/* Feature rows — Learn / Study / Practice / Organize (Figma 111:394) */
.features__inner {
  display: flex; flex-direction: column; gap: var(--space-7);
  max-width: 1080px; margin: 0 auto;
  padding: var(--section-y) 0;
}
.feature {
  --ink: #1d2501; --bg: #fbffea; --badge: #9db06e; --glass: #5c6b2e; --g-head: 24px; --g-cta: 42px; --chips-top: 223px; --chips-w: 488px;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-start; gap: var(--space-7);
  padding: var(--space-7);
  border-radius: var(--radius-card);
  background: var(--bg);
}
.feature > * { position: relative; z-index: 1; }
.feature::before {                              /* paper grain — sits UNDER the content so buttons and text stay crisp */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .14; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.feature--study    { --ink: #41001d; --bg: #ffebf4; --badge: #41001d; --glass: #7a2a4d; --chips-w: auto; }
.feature--practice { --ink: #564600; --bg: #fffbe6; --badge: #9d803c; --glass: #7a6112; --g-head: 14px; --g-cta: 26px; --chips-top: 196px; --chips-w: 554px; }
.feature--organize { --ink: #00213e; --bg: #ebf4ff; --badge: #7190c3; --glass: #2f5c94; --g-head: 14px; --g-cta: 26px; --chips-top: 196px; --chips-w: 554px; }
.feature--study .feature__copy { --g-head: 26px; }

/* media */
.feature__media {
  position: relative; flex: none; overflow: hidden;
  width: 613px; aspect-ratio: 613 / 412;
  border-radius: 22px; background: #fff;
}
.feature__photo {                                /* always fills the frame, whatever the width */
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 50%);
}
.feature__media::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.2); z-index: 1; }
.feature__chips {
  position: absolute; z-index: 2; left: 20px; top: var(--chips-top); width: var(--chips-w);
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  margin: 0; padding: 0; list-style: none;
}
.chip-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 13px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 100px;
  background: color-mix(in srgb, var(--glass) 22%, rgba(255,255,255,.08));   /* light card-tinted glass */
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 500 17.7px/27px var(--font-ui); letter-spacing: -0.4px; color: #fafafa;
}
.chip-row img { flex: none; }
.feature__media--a .chip-row span { white-space: nowrap; }
.feature__media--a .chip-row:first-child { width: 100%; }
.feature__media--b .chip-row:last-child  { width: 100%; }

/* text */
.feature__text { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--g-cta); color: var(--ink); }
.feature__copy { display: flex; flex-direction: column; gap: 26px; width: 100%; }

.feature__title {
  margin: calc(var(--g-head) - 26px) 0 0;      /* label→title gap differs per row */
  font: 600 28px/33px var(--font-display); letter-spacing: -0.02em; color: var(--ink);
}
.feature__sub { margin: 0; font: 400 17px/22.75px var(--font-ui); color: var(--ink); opacity: .7; }   /* ink at 70% */

.feature__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 18px 18px 22px;
  border: 2px solid #f5f5f5; border-radius: 100px; background: #fff;
  box-shadow: 0 2px 4px -1px rgba(0,0,0,.07), 0 12px 12px 2px rgba(0,0,0,.05);
  font: 400 14px/14px var(--font-ui); color: var(--ink);
}
.feature__cta:hover { box-shadow: 0 2px 4px -1px rgba(0,0,0,.07), 0 18px 20px -4px rgba(0,0,0,.12); }
.feature__cta:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.feature__cta i {
  width: 16px; height: 5.77px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='5.7735' viewBox='0 0 16 5.7735'%3E%3Cpath d='M0 2.88675V3.38675H11.5V2.88675V2.38675H0V2.88675ZM16 2.88675L11 0V5.7735L16 2.88675Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='5.7735' viewBox='0 0 16 5.7735'%3E%3Cpath d='M0 2.88675V3.38675H11.5V2.88675V2.38675H0V2.88675ZM16 2.88675L11 0V5.7735L16 2.88675Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s cubic-bezier(.3, .7, .4, 1.5);
}
.feature__cta:hover i { transform: translateX(4px); }

/* tablet + mobile: text first, photo below, photo always fills its frame */
@media (max-width: 1120px) {
  .features__inner { padding-inline: calc(var(--gutter) + 30px); }   /* 1024–1120: 30px from the lines */
  .feature { flex-direction: column; gap: var(--space-6); padding: var(--space-6); }
  .feature__text { order: -1; width: 100%; }
  .feature__media { width: 100%; }
  .feature__chips { top: auto; bottom: 20px; width: calc(100% - 40px); }
  .chip-row { font-size: clamp(13px, 2.4vw, 17.7px); line-height: 1.4; }
  .feature__media--a .chip-row span { white-space: normal; }
}
@media (max-width: 1023px) {
  .features__inner { padding-inline: var(--gx); }                       /* tablet 30px / mobile 12px (--pad-x) */
}
@media (max-width: 599px) {
  .feature { padding: var(--space-4); gap: var(--space-5); border-radius: 20px; }
  .feature__media { border-radius: 16px; aspect-ratio: 4 / 5; }
  .feature__title { font-size: 28px; line-height: 33px; }
  .feature__sub { font-size: 16px; line-height: 22px; }
  .feature__chips { left: 12px; bottom: 12px; width: calc(100% - 24px); gap: 8px; }
  .chip-row { padding: 8px 12px 8px 10px; border-radius: 20px; }
  .chip-row img { width: 20px; height: 20px; }
}