/* Feature page (Figma 358:7208). Reuses workflow, FAQ, CTA sections and the pricing comparison table. */
.p-features__hero { padding-bottom: var(--space-16); }
.p-features__hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.p-features__hero-copy { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--space-6); }
.p-features__badge { gap: var(--space-2); padding: var(--space-2) var(--space-4); }
.p-features__badge-kind { color: var(--orange-500); }
.p-features__lead { color: var(--text-medium); max-width: 495px; }
.p-features__capture { position: relative; display: flex; align-items: center; width: 100%; max-width: 431px; height: 56px; padding: 6px 6px 6px var(--space-6); border: 1px solid var(--border-thin); border-radius: var(--radius-pill); background: var(--base-high); box-shadow: var(--shadow-md); margin-top: var(--space-2); }
.p-features__capture-input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-weight: var(--fw-medium); font-size: var(--body-md-size); color: var(--text-strong); }
.p-features__capture-input:focus { outline: none; }
.p-features__capture:focus-within { border-color: var(--amber-800); }
.p-features__capture-msg { position: absolute; left: var(--space-6); top: calc(100% + var(--space-2)); font-size: var(--body-sm-size); color: var(--text-strong); }
.p-features__capture .btn { height: 44px; }
.p-features__hero .rating { margin-top: var(--space-8); }
.p-features__hero-visual { overflow: hidden; border-radius: var(--radius-sm); background: var(--peach-100); }
.p-features__hero-visual img { width: 100%; }

.p-features__rows { display: grid; gap: var(--space-6); max-width: 1120px; margin-inline: auto; }
.p-features__row { display: grid; gap: var(--space-8); align-items: center; }
.p-features__visual { overflow: hidden; border-radius: var(--radius-md); }
.p-features__visual img { width: 100%; }
.p-features__copy { display: grid; justify-items: start; gap: var(--space-6); }
.p-features__copy .para-lg { color: var(--text-medium); }
.p-features__checks { display: grid; gap: var(--space-2); color: var(--text-strong); font-size: var(--para-lg-size); line-height: 1.5; }
.p-features__checks li { display: flex; gap: var(--space-2); align-items: center; }
.p-features__checks li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-strong); }

.p-features__caps { display: grid; gap: var(--space-4); max-width: 1022px; margin-inline: auto; }
.p-features__cap { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-10); min-height: 220px; padding: var(--space-6); border-radius: var(--radius-lg); background: #f4f4f5; transition: background var(--dur) var(--ease), rotate var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.p-features__cap-head { display: flex; justify-content: space-between; gap: var(--space-4); }
.p-features__cap h3 { max-width: 200px; font-size: var(--h6-size); line-height: var(--h6-lh); letter-spacing: var(--h6-ls); }
.p-features__shield { width: 28px; height: 28px; flex: none; color: var(--text-strong); }
.p-features__cap p { font-size: var(--para-sm-size); color: var(--text-medium); max-width: 260px; }
.p-features__cap:hover, .p-features__cap.is-active { background: #e6f2dd; }
.p-features__cap.is-active { rotate: -3deg; box-shadow: var(--shadow-md); }

.p-features__voices { overflow: hidden; }
.p-features__voices-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-6); margin-bottom: var(--space-10); }
.p-features__voices-head .section-head__text { margin-top: var(--space-2); color: var(--text-medium); }
.p-features__voices-nav { display: flex; gap: var(--space-2); }
.p-features__voices-nav .icon-btn { background: var(--base-high); border: 1px solid var(--border-thin); }
.p-features__voices-nav .icon-btn:hover { background: var(--btn-dark); color: var(--text-negative); }
.p-features__track { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
.p-features__track::-webkit-scrollbar { display: none; }
.p-features__quote { flex: 0 0 min(607px, 86%); scroll-snap-align: start; }
.p-features__quote figure { display: flex; flex-direction: column; height: 100%; min-height: 320px; padding: var(--space-8) var(--space-10); border-radius: var(--radius-lg); background: #491d05; color: var(--text-negative); }
.p-features__quote-logo { width: 28px; height: 28px; }
.p-features__quote blockquote { margin-top: auto; }
.p-features__quote blockquote p { max-width: 400px; font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--h4-size); line-height: 1.12; letter-spacing: var(--h4-ls); }
.p-features__quote figcaption { margin-top: var(--space-6); font-size: var(--para-lg-size); color: rgb(255 255 255 / 0.6); }
.p-features__quote figcaption strong { font-weight: var(--fw-regular); color: var(--text-negative); }

.p-features__security-inner { display: grid; justify-items: center; text-align: center; }
.p-features__lock { width: 126px; }
.p-features__security h2 { margin-top: var(--space-6); }
.p-features__security-sub { margin-top: var(--space-4); color: var(--text-medium); }
.p-features__badges { width: min(604px, 100%); margin-top: var(--space-10); }
.p-features__sec-list { display: grid; gap: var(--space-4); width: min(758px, 100%); margin-top: var(--space-6); padding: var(--space-6) var(--space-8); border-radius: var(--radius-lg); background: var(--stone-100); text-align: left; font-size: var(--para-lg-size); color: var(--text-strong); }
.p-features__sec-list li { display: flex; align-items: center; gap: var(--space-3); }
.p-features__sec-list svg { width: 18px; height: 18px; flex: none; color: var(--orange-700); }
.p-features__always { margin-top: var(--space-10); }
.p-features__always span { color: var(--text-low); }

@media (min-width: 768px) {
  .p-features__caps { grid-template-columns: repeat(3, 1fr); }
  .p-features__sec-list { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .p-features__hero { padding-top: calc(var(--header-h) + 72px); }
  .p-features__hero-grid { grid-template-columns: minmax(0, 495px) minmax(0, 603px); justify-content: space-between; }
  .p-features__title { font-size: var(--h1-size); line-height: var(--h1-lh); }
  .p-features__rows { gap: var(--space-6); }
  .p-features__row { grid-template-columns: 1fr 1fr; gap: 80px; }
  .p-features__row--flip .p-features__visual { order: 2; }
  .p-features__cap { min-height: 253px; }
}
.p-features__how .section-head { max-width: none; }

/* Figma QC: desktop rhythm of the features page (hero 800, how 99/99, caps 112, voices 120, workflow 60, security 80) */
@media (min-width: 1024px) {
  .p-features__hero { padding-bottom: 78px; }
  .p-features__hero-grid { max-width: calc(1232px + var(--gutter) * 2); padding-inline: calc(var(--gutter) + 8px) calc(var(--gutter) + 4px); }
  .p-features__hero-copy { gap: 0; }
  .p-features__badge { height: 32px; padding-block: 0; }
  .p-features__title { margin-top: 40px; }
  .p-features__lead { margin-top: 36px; }
  .p-features__capture { margin-top: 32px; }
  .p-features__hero .rating { margin-top: 88px; }

  .p-features__how { padding-block: 99px; }
  .p-features__how .section-head { gap: 13px; margin-bottom: 80px; }
  .p-features__how .section-head .tag { height: 32px; padding-block: 0; }
  .p-features__caps-wrap { padding-block: 112px; }

  .p-features__voices { padding-block: 120px; }
  .p-features__voices-head { margin-bottom: 64px; }
  .p-features__voices-head .section-head__text { margin-top: 0; }
  .p-features__quote figure { min-height: 386px; }

  .page-features .s-workflow { padding-top: 60px; }

  .p-features__lock { width: 252px; }
  .p-features__security h2 { margin-top: 40px; }
  .p-features__security-sub { margin-top: 24px; }
  .p-features__badges { margin-top: 40px; }
  .p-features__security .p-features__sec-list { margin-top: 23px; gap: 16px; padding: 28px 27px; }
  .p-features__sec-list li { min-height: 26px; }
  .p-features__always { margin-top: 40px; }
}
.p-features__capture-input::placeholder { color: var(--text-strong); opacity: 1; }
.p-features__checks { gap: 0; }
@media (min-width: 1024px) {
  .p-features__cap { padding-right: 30px; }
  .p-features__cap h3 { max-width: 170px; }
  .p-features__shield { width: 32px; height: 32px; }
  .p-features__cap.is-active { rotate: -5deg; }
}
@media (min-width: 1024px) {
  .p-features__quote figure { padding: 40px 40px 48px; }
  .p-features__quote-logo { width: 38px; height: 38px; margin: -3px 0 0 -3px; }
  .p-features__quote figcaption { margin-top: 32px; }
}
.p-features__always { color: var(--text-strong); }

/* Mobile QC: single-column capability cards don't need the desktop height */
@media (max-width: 767px) { .p-features__cap { min-height: 160px; gap: var(--space-6); } }

/* Interactions (plan/motion-convention.md): hover, focus and press states. Entrances use data-reveal in features.html. */
.p-features__hero-visual img,
.p-features__visual img { transition: transform var(--dur-reveal) var(--ease-out); }
.p-features__capture { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.p-features__capture:hover { border-color: var(--border-strong); }
.p-features__capture:focus-within { border-color: var(--amber-800); box-shadow: var(--shadow-md), 0 0 0 4px rgb(202 53 0 / 0.12); }

.p-features__copy .tag { transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.p-features__checks li::before { transition: scale var(--dur-slow) var(--ease-spring), background var(--dur) var(--ease); }

/* Capability cards: the highlighted card stays tilted until another card is hovered, then the hovered one takes over */
.p-features__cap { transition: background var(--dur-slow) var(--ease-out), rotate var(--dur-slow) var(--ease-spring), translate var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }
.p-features__shield { transition: scale var(--dur-slow) var(--ease-spring), color var(--dur) var(--ease); }
.p-features__cap.is-active .p-features__shield { scale: 1.12; color: var(--orange-700); }

.p-features__quote figure { transition: translate var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }
.p-features__quote-logo { transition: rotate var(--dur-slow) var(--ease-spring); }
.p-features__track { scroll-behavior: smooth; }
.p-features__track:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 4px; border-radius: var(--radius-lg); }
.p-features__voices-nav .icon-btn { transition: background var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.p-features__voices-nav .icon-btn:disabled { opacity: 0.4; cursor: default; pointer-events: none; }

.p-features__sec-list li { transition: color var(--dur) var(--ease); }
.p-features__sec-list li svg { transition: scale var(--dur-slow) var(--ease-spring); }
.p-features__lock { transition: translate var(--dur-slow) var(--ease-out); }

@media (hover: hover) {
  .p-features__hero-visual:hover img { transform: scale(1.03); }
  .p-features__row:hover .p-features__visual img { transform: scale(1.04); }
  .p-features__row:hover .p-features__copy .tag { background: var(--peach-100); color: var(--orange-700); }
  .p-features__row:hover .p-features__checks li::before { scale: 1.4; background: var(--orange-500); }

  .p-features__cap:hover { rotate: -3deg; translate: 0 -4px; background: #e6f2dd; box-shadow: var(--shadow-md); }
  .p-features__cap:hover .p-features__shield { scale: 1.12; color: var(--orange-700); }
  .p-features__caps:hover .p-features__cap.is-active:not(:hover) { rotate: 0deg; background: #f4f4f5; box-shadow: none; }
  .p-features__caps:hover .p-features__cap.is-active:not(:hover) .p-features__shield { scale: 1; color: var(--text-strong); }

  .p-features__quote:hover figure { translate: 0 -4px; box-shadow: var(--shadow-md); }
  .p-features__quote:hover .p-features__quote-logo { rotate: -8deg; }

  .p-features__sec-list li:hover svg { scale: 1.18; }
  .p-features__security-inner:hover .p-features__lock { translate: 0 -6px; }
}

@media (prefers-reduced-motion: reduce) {
  .p-features__track { scroll-behavior: auto; }
  .p-features__hero-visual img, .p-features__visual img, .p-features__cap, .p-features__shield, .p-features__quote figure,
  .p-features__quote-logo, .p-features__lock, .p-features__checks li::before, .p-features__sec-list li svg { transition-duration: 0.01ms; }
  .p-features__hero-visual:hover img, .p-features__row:hover .p-features__visual img { transform: none; }
  .p-features__cap:hover, .p-features__quote:hover figure, .p-features__security-inner:hover .p-features__lock { translate: none; }
}

/* Single-feature template (features.html, feature-autocomplete.html, feature-chat.html, feature-search.html) */
.p-features__switch { padding-block: var(--space-4); border-block: 1px solid var(--border-thin); background: var(--base-high); }
.p-features__switch-list { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.p-features__switch-list::-webkit-scrollbar { display: none; }
.p-features__switch-link { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding-inline: var(--space-4); border: 1px solid var(--border-thin); border-radius: var(--radius-pill); font-weight: var(--fw-medium); font-size: var(--body-md-size); color: var(--text-medium); white-space: nowrap; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.p-features__switch-icon { width: 18px; height: 18px; flex: none; }
.p-features__switch-link[aria-current="page"] { background: var(--btn-dark); border-color: var(--btn-dark); color: var(--text-negative); }
.p-features__switch-link:focus-visible { outline: 2px solid var(--orange-500); outline-offset: 2px; }

.p-features__stats-wrap { padding-block: var(--space-12); }
.p-features__stats { display: grid; gap: var(--space-8); max-width: 1120px; margin-inline: auto; }
.p-features__stat { display: grid; gap: var(--space-2); padding-left: var(--space-6); border-left: 2px solid var(--orange-500); }
.p-features__stat dd { order: -1; font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: 48px; line-height: 1; letter-spacing: -1.5px; color: var(--text-strong); }
.p-features__stat dt { font-size: var(--para-lg-size); color: var(--text-medium); max-width: 260px; }

.p-features__steps-wrap { background: var(--stone-100); }
.p-features__steps { display: grid; gap: var(--space-4); max-width: 1120px; margin-inline: auto; }
.p-features__step { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-8) var(--space-6); border-radius: var(--radius-lg); background: var(--base-high); border: 1px solid var(--border-thin); }
.p-features__step-num { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--space-4); border-radius: 50%; background: var(--peach-100); color: var(--orange-700); font-weight: var(--fw-semibold); font-size: var(--body-sm-size); }
.p-features__step h3 { font-size: var(--h6-size); line-height: var(--h6-lh); letter-spacing: var(--h6-ls); }
.p-features__step p { color: var(--text-medium); font-size: var(--para-sm-size); }

.p-features__visual--code { display: grid; align-items: center; min-height: 320px; padding: var(--space-6); background: var(--peach-100); }
.p-features__window { overflow: hidden; border-radius: var(--radius-md); background: #1c1917; box-shadow: var(--shadow-md); color: #e7e5e4; }
.p-features__window-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.p-features__window-dots { display: flex; gap: 6px; }
.p-features__window-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / 0.18); }
.p-features__window-title { overflow: hidden; font-size: var(--body-sm-size); color: rgb(255 255 255 / 0.6); white-space: nowrap; text-overflow: ellipsis; }
.p-features__window-code { display: grid; margin: 0; padding: var(--space-4) 0; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.7; }
.p-features__window-code span { display: block; min-height: 1.7em; padding-inline: var(--space-4); white-space: pre-wrap; overflow-wrap: anywhere; }
.p-features__window-code .is-add { background: rgb(0 201 80 / 0.14); color: #b9f8cf; }
.p-features__window-code .is-del { background: rgb(251 44 54 / 0.14); color: #ffc9c9; }
.p-features__window-code .is-c { color: rgb(255 255 255 / 0.45); }
.p-features__window-code .is-cmd { color: #fdba74; }
.p-features__window-code .is-ok { color: #7bf1a8; }
.p-features__window-code .is-hl { background: rgb(255 105 0 / 0.16); color: #fff; }

.p-features__voices .p-features__quote--solo { max-width: 960px; margin-inline: auto; }
.p-features__quote--solo figure { min-height: 0; gap: var(--space-10); }
.p-features__quote--solo blockquote p { max-width: 760px; }

.p-features__details-grid { display: grid; gap: var(--space-10); max-width: 1120px; }
.p-features__details-grid .section-head { margin-bottom: 0; align-content: start; }
.p-features__details-grid .section-head .btn { margin-top: var(--space-2); }
.p-features__details { display: grid; border-top: 1px solid var(--border-thin); }
.p-features__detail { display: grid; gap: var(--space-1); padding-block: var(--space-5, 20px); border-bottom: 1px solid var(--border-thin); }
.p-features__detail dt { font-weight: var(--fw-medium); color: var(--text-strong); }
.p-features__detail dd { color: var(--text-medium); }

.p-features__related { border-top: 1px solid var(--border-thin); }
.p-features__related-grid { display: grid; gap: var(--space-4); max-width: 1120px; margin-inline: auto; }
.p-features__related-card { display: grid; align-content: start; justify-items: start; gap: var(--space-3); height: 100%; padding: var(--space-8) var(--space-6); border-radius: var(--radius-lg); }
.p-features__related-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--space-2); border-radius: var(--radius-sm); background: var(--peach-100); color: var(--orange-700); }
.p-features__icon { width: 22px; height: 22px; }
.p-features__related-kind { font-size: var(--body-sm-size); color: var(--orange-700); }
.p-features__related-title { font-size: var(--h6-size); line-height: var(--h6-lh); letter-spacing: var(--h6-ls); }
.p-features__related-card p { color: var(--text-medium); font-size: var(--para-sm-size); }
.p-features__related-more { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-weight: var(--fw-medium); color: var(--text-strong); }
.p-features__related-more svg { transition: translate var(--dur-slow) var(--ease-out); }

@media (min-width: 768px) {
  .p-features__stats { grid-template-columns: repeat(3, 1fr); }
  .p-features__steps { grid-template-columns: repeat(3, 1fr); }
  .p-features__related-grid { grid-template-columns: repeat(3, 1fr); }
  .p-features__detail { grid-template-columns: 180px 1fr; gap: var(--space-6); }
}
@media (min-width: 1024px) {
  .p-features__switch-list { justify-content: center; }
  .p-features__stats-wrap { padding-block: 80px; }
  .p-features__steps-wrap { padding-block: 112px; }
  .p-features__steps-wrap .section-head { margin-bottom: 64px; }
  .p-features__visual--code { min-height: 477px; padding: var(--space-10); }
  .p-features__details-grid { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 80px; margin-inline: auto; }
  .p-features__details-wrap { padding-block: 112px; }
  .p-features__related { padding-bottom: 112px; }
}

@media (hover: hover) {
  .p-features__switch-link:not([aria-current]):hover { border-color: var(--border-strong); color: var(--text-strong); background: var(--stone-50); }
  .p-features__related-card:hover .p-features__related-more svg { translate: 4px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .p-features__related-more svg { transition-duration: 0.01ms; }
}