/* ================================================================
   features.css  —  /features + /templates pages
   ================================================================ */

/* ── Page hero (minimal) ────────────────────────────────────────── */

.feat-page-hero {
   padding: 72px 0 48px;
   text-align: center;
}

.feat-page-hero__title {
   font-size: clamp(2rem, 4.5vw, 3.2rem);
   font-weight: 800;
   letter-spacing: -0.03em;
   line-height: 1.15;
   margin: 0;
   color: var(--color-title);
}

.feat-page-hero__title .highlight {
   background: linear-gradient(135deg, var(--brand-cta), var(--brand-accent));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

/* ── Feature sections ───────────────────────────────────────────── */

.feat-section {
   position: relative;
   padding: 72px 0 80px;
   overflow: hidden;
   /* background: var(--color-surface); */
}

/* Alternating sections get a subtle background tint */
.feat-section:nth-child(even) {
   background: var(--color-inset);
}

/* Ambient glow */
.feat-section::before {
   content: '';
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 80vw;
   max-width: 1000px;
   aspect-ratio: 3 / 1;
   background: radial-gradient(ellipse,
         rgba(15, 239, 186, 0.07) 0%,
         transparent 70%);
   pointer-events: none;
   z-index: 0;
}

.feat-section__header {
   position: relative;
   z-index: 1;
   text-align: center;
   margin-bottom: 48px;
}

.feat-section__title {
   font-size: clamp(1.8rem, 4vw, 2.8rem);
   font-weight: 800;
   letter-spacing: -0.025em;
   color: var(--color-title);
   margin: 12px 0 0;
}

.feat-section__footer {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 20px;
   margin-top: 36px;
}

/* Hint text below carousel */
.feat-hint {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   font-size: 0.88rem;
   font-weight: 500;
   color: var(--color-muted);
   margin: 0;
}

.feat-hint svg {
   flex-shrink: 0;
   color: var(--brand-accent);
}

/* ── Stage: carousel centred (portrait is absolute on the section) ─ */

.feat-stage {
   position: relative;
   z-index: 1;
   display: flex;
   align-items: flex-end;
   justify-content: center;
}

/* ── Carousel wrapper ───────────────────────────────────────────── */

.fh-carousel {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 24px;
}

/* Screen-reader live region */
.fh-sr-live {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
}

/* ── 3D wheel track ─────────────────────────────────────────────── */

.fh-track {
   position: relative;
   width: 700px;
   height: 520px;
   perspective: 1000px;
   perspective-origin: 50% 50%;
}

.fh-item {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 200px;
   margin-top: -141px;
   /* half of ~282px (200 × √2 A4 ratio) */
   margin-left: -100px;
   cursor: pointer;
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--neo-card);
   transition:
      transform 0.55s var(--ease-out),
      opacity 0.55s var(--ease-out),
      box-shadow 0.3s ease,
      filter 0.55s var(--ease-out);
   /* enable GPU layer for smooth 3D */
   will-change: transform, opacity;
}

.fh-item img {
   width: 100%;
   height: auto;
   display: block;
   pointer-events: none;
   border-radius: var(--radius-lg);
}

.fh-item__label {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 28px 14px 12px;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
   color: #fff;
   font-size: 0.78rem;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   opacity: 0;
   transition: opacity 0.25s ease;
   border-radius: 0 0 var(--radius-lg) var(--radius-lg);
   pointer-events: none;
}

.fh-item--active .fh-item__label,
.fh-item:hover .fh-item__label {
   opacity: 1;
}

/* Active — front and center */
.fh-item--active {
   transform: translateX(0) translateZ(0) rotateY(0deg) scale(1);
   opacity: 1;
   z-index: 3;
   width: 300px;
   margin-left: -150px;
   margin-top: -212px;
   /* half of 300×(842/595)≈424px */
   box-shadow: var(--shadow-lg);
}

/* Prev — curves away to the left */
.fh-item--prev {
   transform: translateX(-200px) translateZ(-80px) rotateY(28deg) scale(0.88);
   opacity: 0.55;
   z-index: 1;
   filter: blur(0.3px);
}

/* Next — curves away to the right */
.fh-item--next {
   transform: translateX(200px) translateZ(-80px) rotateY(-28deg) scale(0.88);
   opacity: 0.55;
   z-index: 1;
   filter: blur(0.3px);
}

.fh-item--prev:hover,
.fh-item--next:hover {
   opacity: 0.7;
   filter: blur(0);
}

/* ── Arrow navigation ───────────────────────────────────────────── */

.fh-nav {
   position: absolute;
   top: calc(50% - 24px);
   /* vertically centered on track */
   transform: translateY(-50%);
   z-index: 10;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   box-shadow: var(--neo-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   color: var(--color-title);
   padding: 0;
   transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.fh-nav--prev {
   left: -22px;
}

.fh-nav--next {
   right: -22px;
}

.fh-nav:hover {
   box-shadow: var(--neo-raised);
   transform: translateY(-50%) scale(1.1);
}

.fh-nav:active {
   transform: translateY(-50%) scale(0.95);
}

.fh-nav svg {
   display: block;
   flex-shrink: 0;
}

/* ── Dot indicators ─────────────────────────────────────────────── */

.fh-dots {
   display: flex;
   gap: 8px;
   align-items: center;
}

.fh-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--color-border);
   border: none;
   cursor: pointer;
   padding: 0;
   transition: background 0.25s ease, transform 0.25s ease;
   flex-shrink: 0;
}

.fh-dot--active {
   background: var(--brand-accent);
   transform: scale(1.4);
}

.fh-dot:hover:not(.fh-dot--active) {
   background: var(--color-muted);
}

/* ── Portrait — decorative, transparent-bg webp ─────────────────── */

.fh-portrait {
   position: absolute;
   right: 0;
   bottom: 0;
   width: 500px;
   height: 700px;
   pointer-events: none;
   z-index: 2;
}

.fh-portrait__img {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: bottom center;
   /* transparent-bg webp — no border-radius or box-shadow */
   opacity: 0;
   transform: translateX(24px);
   transition:
      opacity 0.55s var(--ease-out),
      transform 0.55s var(--ease-out);
}

.fh-portrait__img.is-active {
   opacity: 1;
   transform: translateX(0);
}

.fh-portrait__img.is-leaving {
   opacity: 0;
   transform: translateX(24px);
   transition:
      opacity 0.3s ease,
      transform 0.3s ease;
}

/* ================================================================
   Zoom overlay
   ================================================================ */

.fh-overlay {
   position: fixed;
   inset: 0;
   z-index: 500;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 24px;
}

.fh-overlay[hidden] {
   display: none;
}

.fh-overlay__backdrop {
   position: absolute;
   inset: 0;
   background: rgba(11, 28, 32, 0.78);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   animation: fh-backdrop-in 0.3s ease both;
}

@keyframes fh-backdrop-in {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

.fh-overlay__content {
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: 210px auto;
   gap: 36px;
   align-items: center;
   max-height: 90vh;
}

/* Close button */
.fh-overlay__close {
   position: absolute;
   top: -20px;
   right: -20px;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   box-shadow: var(--shadow-md);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   color: var(--color-title);
   padding: 0;
   transition: box-shadow 0.2s ease, transform 0.15s ease;
   z-index: 2;
}

.fh-overlay__close:hover {
   box-shadow: var(--shadow-lg);
   transform: scale(1.12);
}

.fh-overlay__close svg {
   display: block;
}

/* ── 3D flip card ────────────────────────────────────────────────── */

.fh-flipcard {
   position: relative;
   /* Fill most of the viewport height — A4 ratio width = height × 0.707 */
   --card-h: 84vh;
   height: var(--card-h);
   width: calc(var(--card-h) * 0.707);
   perspective: 1400px;
   flex-shrink: 0;
   /* Zoom-in entrance from carousel size */
   animation: fh-zoom-in 0.45s var(--ease-out) both;
}

@keyframes fh-zoom-in {
   from {
      transform: scale(0.22);
      opacity: 0;
   }

   to {
      transform: scale(1);
      opacity: 1;
   }
}

/* Wobble hint — plays once after zoom-in to suggest flipping */
.fh-flipcard.hint-wobble .fh-flipcard__inner {
   animation: fh-wobble 0.75s ease 0.5s both;
}

@keyframes fh-wobble {

   0%,
   100% {
      transform: rotateY(0deg);
   }

   20% {
      transform: rotateY(-11deg);
   }

   45% {
      transform: rotateY(9deg);
   }

   65% {
      transform: rotateY(-5deg);
   }

   82% {
      transform: rotateY(3deg);
   }
}

.fh-flipcard__inner {
   position: relative;
   width: 100%;
   height: 100%;
   transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
   transition: transform 0.7s var(--ease-out);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-lg);
}

.fh-flipcard__inner.is-flipped {
   transform: rotateY(-180deg);
}

.fh-flipcard__face {
   position: absolute;
   inset: 0;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
   border-radius: var(--radius-lg);
   overflow: hidden;
   background: var(--color-inset);
}

.fh-flipcard__back {
   transform: rotateY(180deg);
}

.fh-flipcard__face img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   display: block;
}

/* Flip button — pill below the card */
.fh-flip-btn {
   position: absolute;
   bottom: -20px;
   left: 50%;
   transform: translateX(-50%);
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 7px 18px;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: 999rem;
   box-shadow: var(--neo-sm);
   font-size: 0.8rem;
   font-weight: 700;
   letter-spacing: 0.04em;
   color: var(--color-title);
   cursor: pointer;
   white-space: nowrap;
   transition: box-shadow 0.2s ease, transform 0.15s ease;
   z-index: 2;
}

.fh-flip-btn:hover {
   box-shadow: var(--neo-raised);
   transform: translateX(-50%) translateY(-2px);
}

.fh-flip-btn svg {
   display: block;
   flex-shrink: 0;
   transition: transform 0.35s ease;
}

.fh-flipcard__inner.is-flipped~.fh-flip-btn svg {
   transform: rotate(180deg);
}

/* ── Detail side panels ─────────────────────────────────────────── */

.fh-detail {
   display: flex;
   flex-direction: column;
   gap: 14px;
}

/* Desktop left: fades in after card */
.fh-detail--left {
   animation: fh-side-in-left 0.35s var(--ease-out) 0.3s both;
}

@keyframes fh-side-in-left {
   from {
      opacity: 0;
      transform: translateX(-16px);
   }

   to {
      opacity: 1;
      transform: translateX(0);
   }
}

/* Mobile panel — hidden on desktop */
.fh-detail--mobile {
   display: none;
}

.fh-detail__eyebrow {
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--brand-cta);
   margin: 0;
}

.fh-detail__name {
   font-size: 1.35rem;
   font-weight: 800;
   letter-spacing: -0.02em;
   color: #fff;
   margin: 0;
   line-height: 1.2;
}

.fh-detail__meta {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin: 0;
}

.fh-detail__row {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.fh-detail__row dt {
   font-size: 0.72rem;
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.45);
}

.fh-detail__row dd {
   font-size: 0.9rem;
   font-weight: 600;
   color: #fff;
   margin: 0;
}

.fh-detail__portrait {
   width: 120px;
   height: 150px;
   object-fit: cover;
   object-position: top center;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
   display: block;
}

.fh-detail__person-name {
   font-size: 1rem;
   font-weight: 700;
   color: #fff;
   margin: 0;
}

.fh-detail__person-title {
   font-size: 0.84rem;
   color: rgba(255, 255, 255, 0.55);
   margin: 0;
}

/* ── ATS score block ─────────────────────────────────────────────── */

.fh-detail__ats {
   display: flex;
   flex-direction: column;
   gap: 6px;
   padding-top: 4px;
}

.fh-detail__ats-label {
   font-size: 0.72rem;
   font-weight: 600;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.45);
   margin: 0;
}

.fh-ats-score {
   display: flex;
   align-items: baseline;
   gap: 5px;
}

.fh-ats-score__num {
   font-size: 2rem;
   font-weight: 800;
   letter-spacing: -0.03em;
   line-height: 1;
   color: var(--brand-accent);
}

.fh-ats-score--great .fh-ats-score__num {
   color: #f5a623;
}

.fh-ats-score__pct {
   font-size: 1rem;
   font-weight: 700;
   color: rgba(255, 255, 255, 0.5);
}

.fh-ats-score__badge {
   display: inline-block;
   font-size: 0.7rem;
   font-weight: 700;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   padding: 2px 8px;
   border-radius: 999rem;
   background: rgba(255, 255, 255, 0.1);
   color: #fff;
   margin-left: 2px;
}

.fh-ats-score--excellent .fh-ats-score__badge {
   background: rgba(15, 239, 186, 0.18);
   color: var(--brand-accent);
}

.fh-ats-score--great .fh-ats-score__badge {
   background: rgba(245, 166, 35, 0.18);
   color: #f5a623;
}

.fh-ats-score__tip {
   font-size: 0.78rem;
   color: rgba(255, 255, 255, 0.5);
   margin: 0;
   line-height: 1.4;
   font-style: italic;
}

/* ── Download button in overlay ─────────────────────────────────── */

.fh-detail__download {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 7px;
   width: 100%;
   margin-top: 6px;
   font-size: 0.82rem;
   padding: 9px 14px;
}

.fh-detail__download[hidden] {
   display: none;
}

/* ================================================================
   Responsive
   ================================================================ */

/* Tablet — hide portrait (it's absolute, so just hide) */
@media (max-width: 1100px) {
   .fh-portrait {
      display: none;
   }
}

/* Medium tablet */
@media (max-width: 860px) {
   .fh-carousel {
      margin: 0 auto;
   }

   .fh-track {
      width: 540px;
      height: 430px;
   }

   .fh-item--active {
      width: 270px;
      margin-left: -135px;
      margin-top: -191px;
   }

   .fh-item--prev {
      transform: translateX(-170px) translateZ(-80px) rotateY(28deg) scale(0.82);
   }

   .fh-item--next {
      transform: translateX(170px) translateZ(-80px) rotateY(-28deg) scale(0.82);
   }
}

/* Mobile */
@media (max-width: 600px) {
   .feat-section {
      padding: 48px 0 60px 0;

   }

   .fh-track {
      width: 320px;
      height: 320px;
   }

   .fh-item {
      width: 160px;
      margin-left: -80px;
      margin-top: -113px;
   }

   .fh-item--active {
      width: 190px;
      margin-left: -95px;
      margin-top: -134px;
   }

   .fh-item--prev {
      transform: translateX(-130px) translateZ(-60px) rotateY(28deg) scale(0.75);
   }

   .fh-item--next {
      transform: translateX(130px) translateZ(-60px) rotateY(-28deg) scale(0.75);
   }

   /* Overlay becomes a bottom sheet on mobile */
   /* Mobile: keep it as a centred zoom overlay, not a drawer */
   .fh-overlay {
      align-items: center;
      justify-content: center;
      padding: 24px 16px;
   }

   .fh-overlay__content {
      grid-template-columns: 1fr;
      gap: 28px;
      width: min(100%, 360px);
      max-height: calc(100vh - 32px);
      overflow-y: auto;
      justify-items: center;
      background: transparent;
      border-radius: 0;
      padding: 8px 0 32px;
      animation: none;
   }

   .fh-overlay__close {
      top: 16px;
      right: 16px;
      position: fixed;
      z-index: 10;
   }

   .fh-flipcard {
      order: 1;
      --card-h: min(55vh, 420px);
      height: var(--card-h);
      width: calc(var(--card-h) * 0.707);
      margin: 0 auto;
      animation: fh-zoom-in 0.4s var(--ease-out) 0.2s both;
   }

   /* Show the real populated detail panel under the card */
   .fh-detail--left {
      display: flex;
      order: 2;
      width: 100%;
      max-width: 320px;
      margin: 4px auto 0;
      animation: none;
   }

   /* Hide the stripped mobile-only fallback block */
   .fh-detail--mobile {
      display: none;
   }
}

/* ================================================================
   Template list page  (/templates)
   ================================================================ */

.page-hero {
   padding: 72px 0 56px;
}

.tpl-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 32px;
   list-style: none;
   margin: 0;
   padding: 0;
}

.tpl-card {
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-xl);
   overflow: hidden;
   box-shadow: var(--neo-sm);
   display: flex;
   flex-direction: column;
   transition:
      box-shadow 0.3s var(--ease-out),
      transform 0.25s var(--ease-out);
}

.tpl-card:hover {
   box-shadow: var(--neo-raised);
   transform: translateY(-4px);
}

/* Preview: show top ~50% of A4 page */
.tpl-card__preview {
   aspect-ratio: 4 / 3;
   overflow: hidden;
   background: var(--color-inset);
}

.tpl-card__preview img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top center;
   display: block;
   transition: transform 0.45s var(--ease-out);
}

.tpl-card:hover .tpl-card__preview img {
   transform: scale(1.04);
}

.tpl-card__body {
   padding: 20px 24px 24px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   flex: 1;
}

.tpl-card__name {
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--color-title);
   margin: 0;
}

.tpl-card__badges {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
}

.tpl-badge {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   font-size: 0.73rem;
   font-weight: 600;
   letter-spacing: 0.03em;
   padding: 4px 10px;
   border-radius: 999rem;
   background: var(--color-inset);
   color: var(--color-muted);
   border: 1px solid var(--color-border);
   white-space: nowrap;
}

.tpl-badge--photo {
   color: var(--brand-accent);
   background: rgba(15, 239, 186, 0.08);
   border-color: rgba(15, 239, 186, 0.22);
}

.tpl-badge svg {
   flex-shrink: 0;
}

.tpl-card__cta {
   width: 100%;
   margin-top: auto;
   text-align: center;
}

/* ── CTA banner (bottom of template list) ───────────────────────── */

.cta-banner {
   margin-top: 80px;
   padding: 64px 24px;
   background: var(--color-inset);
   border-top: 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border);
   text-align: center;
}

.cta-banner__inner {
   max-width: 560px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
}

.cta-banner__title {
   font-size: clamp(1.6rem, 3.5vw, 2.2rem);
   font-weight: 800;
   letter-spacing: -0.02em;
   color: var(--color-title);
   margin: 0;
}

.cta-banner__sub {
   color: var(--color-muted);
   margin: 0;
   max-width: 420px;
}

/* ================================================================
   ATS Live Check — vertical timeline
   ================================================================ */

.feat-tl {
   list-style: none;
   margin: 0 auto;
   padding: 0;
   max-width: calc(64ch + 74px);
   position: relative;
   z-index: 1;
}

.feat-tl::before {
   display: none;
}

.feat-tl__step {
   position: relative;
   padding-bottom: 40px;
}

.feat-tl__step::before {
   content: '';
   position: absolute;
   left: 27px;
   top: 28px;
   bottom: -12px;
   width: 2px;
   background: var(--brand-cta);
   pointer-events: none;
   z-index: 0;
}

.feat-tl__step.is-tail::before {
   display: none;
}

.feat-tl__step.is-tail.has-hidden-next::before {
   display: block;
   top: 28px;
   bottom: auto;
   height: 72px;
   background: linear-gradient(to bottom,
         var(--brand-cta) 0%,
         rgba(15, 239, 186, 0.42) 52%,
         transparent 100%);
}

.feat-tl__step.is-tail:last-child::before {
   display: none;
}

.feat-tl__step:last-child {
   padding-bottom: 0;
}

.feat-tl__step.is-pending {
   opacity: 0;
   transform: translateY(14px);
   max-height: 0;
   overflow: hidden;
   padding-bottom: 0;
   pointer-events: none;
}

.feat-tl__step.is-entering {
   animation: feat-tl-step-in 0.45s var(--ease-out) both;
}

@keyframes feat-tl-step-in {
   from {
      opacity: 0;
      transform: translateY(14px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.feat-tl__head {
   display: flex;
   align-items: center;
   gap: 18px;
   min-height: 56px;
   position: relative;
   z-index: 1;
}

.feat-tl__marker {
   appearance: none;
   -webkit-appearance: none;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: var(--color-surface);
   box-shadow: var(--neo-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--brand-accent);
   flex-shrink: 0;
   position: relative;
   z-index: 1;
   border: none;
   padding: 0;
   transition:
      box-shadow 0.25s var(--ease-out),
      opacity 0.25s var(--ease-out),
      transform 0.25s var(--ease-out);
}

.feat-tl__marker svg {
   display: block;
}

.feat-tl__marker--cta {
   background: var(--color-surface);

   cursor: pointer;
}

.feat-tl__marker--cta:hover {
   box-shadow: var(--neo-raised);
   transform: translateY(-1px);
}

.feat-tl__marker--cta:focus-visible {
   outline: 2px solid rgba(15, 239, 186, 0.45);
   outline-offset: 4px;
}

.feat-tl__step.is-locked .feat-tl__marker {
   /* opacity: 0.78; */
   box-shadow: none;
}

.feat-tl__icon {
   display: flex;
   align-items: center;
   justify-content: center;
}

.feat-tl__icon--open {
   display: flex;
}

.feat-tl__icon--closed {
   display: none;
}

.feat-tl__step.is-locked .feat-tl__icon--closed {
   display: flex;
}

.feat-tl__step.is-locked .feat-tl__icon--open {
   display: none;
}

.feat-tl__title {
   font-size: 1.02rem;
   font-weight: 700;
   color: var(--color-title);
   line-height: 1.2;
   margin: 0;
}

.feat-tl__body {
   padding-left: calc(56px + 18px);
   margin-top: 12px;
   max-width: 64ch;
}

.feat-tl__step.is-locked .feat-tl__body {
   display: none;
}

.feat-tl__content {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 16px;
   min-width: 0;
}

.feat-tl__desc {
   font-size: 0.95rem;
   color: var(--color-muted);
   line-height: 1.72;
   margin: 0;
   max-width: 64ch;
}

.feat-tl__media {
   width: 100%;
   max-width: 64ch;
}

.feat-tl__media img {
   display: block;
   width: 100%;
   height: auto;
   border-radius: 12px;
   box-shadow:
      0 4px 8px rgba(0, 0, 0, 0.05),
      0 12px 40px rgba(0, 0, 0, 0.09);
}



@keyframes feat-tl-in {
   from {
      opacity: 0;
      transform: translateY(10px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.feat-tl__step.is-revealed .feat-tl__body {
   animation: feat-tl-in 0.4s var(--ease-out) both;
}

@media (max-width: 600px) {
   .feat-tl {
      max-width: 100%;
   }

   .feat-tl::before {
      left: 22px;
   }

   .feat-tl__head {
      gap: 14px;
      min-height: 46px;
   }

   .feat-tl__marker {
      width: 46px;
      height: 46px;
   }

   .feat-tl__body {
      padding-left: calc(46px + 14px);
      max-width: none;
   }

   .feat-tl__title {
      font-size: 0.98rem;
   }

   .feat-tl__desc,
   .feat-tl__media {
      max-width: 100%;
   }

   .feat-tl__step::before {
      left: 22px;
      top: 23px;
   }
}

.feat-tl__media img {
   display: block;
   width: 100%;
   height: auto;
   border-radius: 12px;
   box-shadow:
      0 4px 8px rgba(0, 0, 0, 0.05),
      0 12px 40px rgba(0, 0, 0, 0.09);
}

@keyframes feat-tl-in {
   from {
      opacity: 0;
      transform: translateY(10px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.feat-tl__step.is-revealed .feat-tl__body {
   animation: feat-tl-in 0.4s var(--ease-out) both;
}

@media (max-width: 860px) {
   .feat-tl__content--img {
      grid-template-columns: 1fr;
      gap: 24px;
   }
}

@media (max-width: 600px) {
   .feat-tl::before {
      left: 22px;
   }

   .feat-tl__head {
      gap: 16px;
      min-height: 46px;
   }

   .feat-tl__marker {
      width: 46px;
      height: 46px;
   }

   .feat-tl__body {
      padding-left: calc(46px + 16px);
   }

   .feat-tl__title {
      font-size: 1rem;
   }

   .feat-tl__step.is-locked .feat-tl__title {
      font-size: 0.92rem;
   }

   .feat-tl__step.is-tail.has-hidden-next::before {
      left: 22px;
      top: 23px;
      height: 60px;
   }
}

.feat-tl__title-wrap {
   display: flex;
   align-items: center;
   min-height: 56px;
}

.feat-tl__more {
   appearance: none;
   -webkit-appearance: none;
   background: none;
   border: 0;
   padding: 0;
   margin: 0;
   font: inherit;
   font-size: 1.02rem;
   font-weight: 700;
   line-height: 1.2;
   color: rgba(11, 28, 32, 0.72);
   cursor: pointer;
   text-align: left;
}

.feat-tl__more:hover {
   color: var(--color-title);
}

.feat-tl__more:focus-visible {
   outline: 2px solid rgba(15, 239, 186, 0.45);
   outline-offset: 4px;
   border-radius: 4px;
}

.feat-tl__step:not(.is-locked) .feat-tl__more {
   display: none;
}

.feat-tl__title-open {
   display: none;
}

.feat-tl__step:not(.is-locked) .feat-tl__title-open {
   display: block;
}

.feat-tl__step.is-tail {
   padding-bottom: 0;
}

/* ================================================================
   Job Tracker — interactive hotspots
   ================================================================ */

.feat-section--jobtracker {
   overflow: hidden;
}

.jt-showcase {
   position: relative;
   z-index: 1;
}

.jt-stage {
   position: relative;
   max-width: 1120px;
   margin: 0 auto;
}

.jt-screen {
   position: relative;
   border-radius: 24px;
   overflow: hidden;
   background: var(--color-surface);
   border: 1px solid rgba(11, 28, 32, 0.06);
   box-shadow: var(--shadow-lg);
   isolation: isolate;
}

.jt-screen__img {
   display: block;
   width: 100%;
   height: auto;
   position: relative;
   z-index: 1;
}

.jt-node {
   position: absolute;
   left: var(--x);
   top: var(--y);
   transform: translate(-50%, -50%);
   width: 26px;
   height: 26px;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background: transparent;
   cursor: pointer;
   z-index: 2;
   -webkit-tap-highlight-color: transparent;
}

.jt-node::before,
.jt-node::after {
   content: '';
   position: absolute;
   inset: 50% auto auto 50%;
   border-radius: 50%;
   transform: translate(-50%, -50%);
   pointer-events: none;
}

.jt-node::before {
   width: 14px;
   height: 14px;
   background: var(--brand-accent);
   box-shadow:
      0 0 0 4px rgba(255, 255, 255, 0.94),
      0 10px 20px rgba(11, 28, 32, 0.18);
}

.jt-node::after {
   width: 14px;
   height: 14px;
   border: 1px solid rgba(15, 239, 186, 0.55);
   animation: jt-node-pulse 3.1s ease-out infinite;
}

.jt-node:hover::before,
.jt-node.is-active::before {
   box-shadow:
      0 0 0 4px rgba(255, 255, 255, 0.98),
      0 0 0 8px rgba(15, 239, 186, 0.18),
      0 14px 28px rgba(11, 28, 32, 0.22);
}

.jt-node:focus-visible {
   outline: 2px solid rgba(15, 239, 186, 0.45);
   outline-offset: 6px;
}

.jt-tooltip {
   position: absolute;
   left: 16px;
   top: 16px;
   width: min(320px, calc(100% - 32px));
   padding: 16px 18px;
   border-radius: 18px;
   background: rgba(255, 255, 255, 0.97);
   border: 1px solid rgba(11, 28, 32, 0.08);
   box-shadow:
      0 16px 40px rgba(11, 28, 32, 0.18),
      0 2px 12px rgba(11, 28, 32, 0.08);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   z-index: 5;
   transition:
      opacity 0.22s ease,
      transform 0.22s ease,
      left 0.22s ease,
      top 0.22s ease;
}

.jt-tooltip::before {
   content: '';
   position: absolute;
   width: 12px;
   height: 12s ease;
}

.jt-tooltip::before {
   content: '';
   position: absolute;
   width: 12px;
   height: 12px;
   background: inherit;
   border-left: 1px solid rgba(11, 28, 32, 0.08);
   border-top: 1px solid rgba(11, 28, 32, 0.08);
}

.jt-tooltip[data-side="right"]::before {
   left: -7px;
   top: 50%;
   transform: translateY(-50%) rotate(-45deg);
}

.jt-tooltip[data-side="left"]::before {
   right: -7px;
   top: 50%;
   transform: translateY(-50%) rotate(135deg);
}

.jt-tooltip[data-side="top"]::before {
   left: 50%;
   bottom: -7px;
   transform: translateX(-50%) rotate(225deg);
}

.jt-tooltip[data-side="bottom"]::before {
   left: 50%;
   top: -7px;
   transform: translateX(-50%) rotate(45deg);
}

.jt-tooltip__eyebrow,
.jt-mobile-card__eyebrow {
   margin: 0 0 8px;
   font-size: 0.72rem;
   font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--brand-cta);
}

.jt-tooltip__title,
.jt-mobile-card__title {
   margin: 0;
   font-size: 1rem;
   line-height: 1.2;
   font-weight: 800;
   color: var(--color-title);
}

.jt-tooltip__body,
.jt-mobile-card__body {
   margin: 10px 0 0;
   font-size: 0.92rem;
   line-height: 1.65;
   color: var(--color-muted);
}

.jt-mobile-card {
   display: none;
   margin-top: 18px;
   padding: 20px 22px;
   border-radius: 20px;
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   box-shadow: var(--neo-sm);
   position: relative;
   z-index: 3;
}

@keyframes jt-node-pulse {
   0% {
      opacity: 0.72;
      transform: translate(-50%, -50%) scale(1);
   }

   70% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(3.2);
   }

   100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(3.2);
   }
}

@media (max-width: 860px) {
   .jt-tooltip {
      width: min(280px, calc(100% - 24px));
      padding: 15px 16px;
   }
}

@media (max-width: 600px) {
   .jt-screen {
      border-radius: 18px;
   }

   .jt-node {
      width: 28px;
      height: 28px;
      z-index: 2;
   }

   .jt-node::before {
      width: 12px;
      height: 12px;
   }

   .jt-node::after {
      width: 12px;
      height: 12px;
   }

   .jt-tooltip {
      display: none;
   }

   .jt-mobile-card {
      display: block;
   }
}

.jt-tooltip[hidden],
.jt-mobile-card[hidden] {
   display: none !important;
}