@font-face {font-family:'Albert Sans';font-style:normal;font-weight:200;font-display:swap;src:url('assets/features/albert-sans-extralight.ttf') format('truetype');}
@font-face {font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url('assets/features/caveat-medium.ttf') format('truetype');}
/* Re:form's photo, handwritten point number and overlapping title bands,
   expanded to a two-column desktop layout. All selectors are section-local. */
.reform-features {
  --feature-blue: #0080cc;
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #e5f4f7;
  color: #353535;
  padding: clamp(80px, 7.8vw, 120px) 0 0;
  scroll-margin-top: 30px;
}
.reform-features__inner {position: relative; z-index: 1; width: min(1320px, calc(100% - 112px)); margin-inline: auto;}
.reform-features__backdrop {position: absolute; inset: 0; z-index: 0; pointer-events: none;}
.reform-features__motif {position: sticky; top: -25vw; margin-left: -18vw; width: min(1435px, 115vw); aspect-ratio: 240 / 196; background: rgb(86 179 231 / 10%); -webkit-mask: url('assets/features/interview-background.svg') center / contain no-repeat; mask: url('assets/features/interview-background.svg') center / contain no-repeat;}
.reform-features__marquee {position: relative; z-index: 0; overflow: hidden; margin-top: clamp(48px, 6vw, 96px); color: #fff; pointer-events: none; user-select: none;}
.reform-features__track {display: flex; width: max-content; animation: feature-marquee 90s linear infinite; will-change: transform;}
.reform-features__track span {display: block; flex: none; padding-right: .6em; font-family: 'Albert Sans', 'Helvetica Neue', Arial, sans-serif; font-size: clamp(74px, 10.8vw, 180px); font-weight: 200; line-height: 1.08; letter-spacing: -.025em; white-space: nowrap;}
.reform-features.is-motion-paused .reform-features__track {animation-play-state: paused;}
.reform-features__motion-toggle {position: absolute; z-index: 2; bottom: 12px; right: 20px; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid #aacbd3; border-radius: 100px; color: #335f6c; background: #e5f4f7; font: inherit; font-size: 11px; cursor: pointer;}
.reform-features__motion-toggle[hidden] {display: none;}
.reform-features__motion-toggle:focus-visible {outline: 2px solid var(--feature-blue); outline-offset: 4px;}
@keyframes feature-marquee {to {transform: translateX(-50%);}}
.reform-features__heading {text-align: center; margin-bottom: 96px;}
.reform-features__eyebrow {font: 500 40px/1.1 'Caveat', cursive; color: var(--feature-blue); letter-spacing: 0; margin-bottom: 14px;}
.reform-features__heading h2 {font-family: 'Noto Sans JP', sans-serif; font-size: clamp(30px, 3vw, 42px); font-weight: 700; line-height: 1.5; letter-spacing: .035em;}
.reform-features__grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 80px; row-gap: 105px;}
.reform-feature {min-width: 0;}
.reform-feature__visual {position: relative; padding-bottom: 20px;}
.reform-feature__photo {overflow: hidden; width: 100%; aspect-ratio: 4 / 3;}
.reform-feature__photo img {display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.2,.65,.3,1);}
.reform-feature__number {position: absolute; top: -41px; right: auto; left: -3px; z-index: 2; color: var(--feature-blue); font: 500 clamp(48px, 4.7vw, 70px)/1 'Caveat', cursive; letter-spacing: -.045em; white-space: nowrap; transform: rotate(-3deg);}
.reform-feature__title {position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; width: calc(100% + 24px); margin: -97px 0 0 -24px; font: 700 clamp(20px, 1.9vw, 28px)/1.5 'Noto Sans JP', sans-serif; letter-spacing: .035em;}
.reform-feature__title span {display: block; max-width: 100%; padding: 8px 23px 9px;}
.reform-feature__lead {color: #fff; background: var(--feature-blue);}
.reform-feature__headline {color: #353535; background: #fff; margin-top: 7px;}
.reform-feature__description {font-size: 16px; line-height: 2.05; letter-spacing: .055em; margin-top: 7px; overflow-wrap: anywhere;}
.reform-features__note {margin-top: 60px; color: #577a85; font-size: 12px; text-align: center; line-height: 1.8;}
.reform-features--ready .reform-feature {opacity: 0; transform: translateY(28px); transition: opacity 750ms ease, transform 850ms cubic-bezier(.2,.65,.3,1); transition-delay: var(--feature-delay, 0ms);}
.reform-features--ready .reform-feature.is-visible {opacity: 1; transform: none;}
@media (hover: hover) and (pointer: fine) {
  .reform-feature:hover .reform-feature__photo img {transform: scale(1.035);}
}
@media (min-width: 1600px) {.reform-features__grid {column-gap: 100px;}}
@media (max-width: 1100px) {
  .reform-features__inner {width: calc(100% - 80px);}
  .reform-features__grid {column-gap: 48px; row-gap: 90px;}
  .reform-feature__title {font-size: 20px; margin-left: -16px; width: calc(100% + 16px); margin-top: -82px;}
  .reform-feature__title span {padding: 7px 15px;}
  .reform-feature__description {font-size: 15px;}
}
@media (max-width: 760px) {
  .reform-features {padding-top: 76px;}
  .reform-features__motif {width: 185vw; margin-left: -57vw; top: 5vh;}
  .reform-features__motion-toggle {right: 12px; bottom: 8px;}
  .reform-features__motion-label {display: none;}
  .reform-features__track {animation-duration: 70s;}
  .reform-features__inner {width: min(540px, calc(100% - 48px));}
  .reform-features__heading {margin-bottom: 74px;}
  .reform-features__eyebrow {font-size: 32px; margin-bottom: 10px;}
  .reform-features__heading h2 {font-size: 28px;}
  .reform-features__grid {grid-template-columns: minmax(0, 1fr); gap: 78px;}
  .reform-feature__number {font-size: 52px; top: -32px;}
  .reform-feature__title {font-size: clamp(18px, 4.9vw, 24px); margin-top: -76px;}
  .reform-feature__title span {padding: 6px 16px;}
  .reform-feature__description {font-size: 15px; line-height: 1.95; margin-top: 4px;}
  .reform-features__note {margin-top: 42px; font-size: 11px;}
  .reform-features--ready .reform-feature {transition-delay: 0ms;}
}
@media (prefers-reduced-motion: reduce) {
  .reform-features__track {animation: none; transform: none; will-change: auto;}
  .reform-features__motion-toggle {display: none;}
  .reform-features--ready .reform-feature {opacity: 1; transform: none; transition: none;}
  .reform-feature__photo img {transition: none; transform: none !important;}
}
@media print {.reform-features__track {animation: none;} .reform-features__motion-toggle {display: none;}}

/* Show the complete Discord composition and keep its logo clear of the title bands. */
.reform-feature--community .reform-feature__photo {aspect-ratio: 3 / 2;}
.reform-feature--community .reform-feature__photo img {object-fit: contain;}
.reform-feature--community .reform-feature__title {margin-top: 12px;}