/* ============ Four-Step Fit Journey ============ */

/* Base */
.how-it-works,
.how-it-works * { box-sizing: border-box; }

:root{
  --ink-900:#1f1f1f;
  --ink-700:#2c2c2c;
  --ink-500:#5c626a;

  --panel:#f5f5f5;
  --panel-ring:#f2b134;

  --bg-blue:#dfe7ec;

  --radius:10px;
  --shadow-card:0 10px 24px rgba(0,0,0,.07);
  --shadow-phone:0 20px 40px rgba(31,50,63,.22);

  --container:1160px;
  --gap-lg:48px;
  --gap-xl:72px;
}

/* Section wrapper */
.how-it-works{
  position: relative;
  padding: clamp(28px, 4vw, 40px) 0 clamp(60px, 8vw, 120px);
  overflow: hidden;
}
.how-it-works::before,
.how-it-works::after{ content:none; }

.label{
  width: min(100% - 32px, var(--container));
  margin: 0 auto;
  padding: 12px 0 8px;
}
.four-step-fit-journey{
  color: var(--ink-900);
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.8vw, 42px);
  line-height: 1.2;
}

/* Grid layout */
.how-it-works-info{
  width: min(100% - 32px, var(--container));
  margin: clamp(18px, 3vw, 28px) auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
  align-items: center;
}

/* Mobile order: content first, then image */
@media (max-width: 899px){
  .build-your-fit-profile{ grid-row: 1; }
  .mockups-2-2{ grid-row: 2; }

  .get-smart-recommendations{ grid-row: 3; }
  .mockups-4-1{ grid-row: 4; }

  .compare-brand-sizing{ grid-row: 5; }
  .mockups-3-1{ grid-row: 6; }

  .shop-with-confidence-save-your-favorites{ grid-row: 7; }
  .mockups-1-1{ grid-row: 8; }
}

/* Desktop: side by side */
@media (min-width: 900px){
  .how-it-works-info{
    grid-template-columns: 1fr 1fr;
    column-gap: var(--gap-xl);
    row-gap: 64px;
    align-items: center;
  }

  .build-your-fit-profile      { grid-column: 1; grid-row: 1; }
  .mockups-2-2                 { grid-column: 2; grid-row: 1; }

  .mockups-4-1                 { grid-column: 1; grid-row: 2; }
  .get-smart-recommendations   { grid-column: 2; grid-row: 2; }

  .compare-brand-sizing        { grid-column: 1; grid-row: 3; }
  .mockups-3-1                 { grid-column: 2; grid-row: 3; }

  .mockups-1-1                 { grid-column: 1; grid-row: 4; }
  .shop-with-confidence-save-your-favorites { grid-column: 2; grid-row: 4; }
}

/* Cards */
.card{
  background: var(--panel);
  border: 3px solid var(--panel-ring);
  border-radius: var(--radius);
  padding: 28px 32px 28px 92px; /* space for halo + icon */
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 14px;
  position: relative;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  border-color: color-mix(in oklab, var(--panel-ring) 82%, white);
}

/* Headings and text */
.h-3-feature-title,
.h-3-feature-title2,
.h-3-feature-title3,
.h-3-feature-title4{
  font: 700 20px/1.25 "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink-700);
  margin: 0;
}
.paragraph-feature-description,
.paragraph-feature-description2{
  font: 500 15px/1.65 "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink-700);
  margin: 0;
}

/* Halo + icon together, icon centered */
.digit-badge{
  position: absolute;
  top: 18px;
  left: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    conic-gradient(
      from 0deg,
      rgba(255,181,81,.45) 0deg,
      rgba(220,231,236,.5) 120deg,
      rgba(255,246,209,.55) 240deg,
      rgba(22,92,125,.45) 360deg
    ) border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  animation: ring-spin 6s linear infinite;
}
.digit-badge::after{ content:none; }
.digit-badge img{
  width: 28px;
  height: 28px;
  display: block;
}

/* In case old icon classes remain, hide them to avoid duplicates */
.mdi-user,
.vector,
.vector2,
.line-md-heart-filled{ display: none; }

/* Phones: no gray background, only realistic shadow */
.phone,
.mockups-2-2,
.mockups-3-1,
.mockups-4-1,
.mockups-1-1{
  display: block;
  width: 100%;
  max-width: 400px;
  justify-self: center;
  position: relative;
  filter: drop-shadow(var(--shadow-phone));
  background: transparent;
}
.mockups-2-2::before,
.mockups-3-1::before,
.mockups-4-1::before,
.mockups-1-1::before{ content:none; }

/* Animations */
@keyframes fade-up{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes slide-in-right{
  from{ opacity:0; transform: translateX(24px); }
  to{ opacity:1; transform: translateX(0); }
}
@keyframes slide-in-left{
  from{ opacity:0; transform: translateX(-24px); }
  to{ opacity:1; transform: translateX(0); }
}
@keyframes ring-spin{ to{ transform: rotate(360deg); } }

/* Staggered entrances */
.build-your-fit-profile{ animation: fade-up .7s ease both .05s; }
.mockups-2-2{ animation: slide-in-right .7s ease both .15s; }

.get-smart-recommendations{ animation: fade-up .7s ease both .15s; }
.mockups-4-1{ animation: slide-in-left .7s ease both .05s; }

.compare-brand-sizing{ animation: fade-up .7s ease both .05s; }
.mockups-3-1{ animation: slide-in-right .7s ease both .15s; }

.shop-with-confidence-save-your-favorites{ animation: fade-up .7s ease both .15s; }
.mockups-1-1{ animation: slide-in-left .7s ease both .05s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .card,
  .mockups-2-2,
  .mockups-3-1,
  .mockups-4-1,
  .mockups-1-1,
  .digit-badge{ animation: none !important; transition: none !important; }
}

/* Larger screens */
@media (min-width: 1200px){
  .four-step-fit-journey{ font-size: 44px; }
  .card{ padding: 32px 36px 32px 100px; }
}

/* Mobile tighten */
@media (max-width: 480px){
  .card{ padding: 24px 20px 24px 84px; }
  .digit-badge{ width: 52px; height: 52px; top: 14px; left: 22px; }
  .digit-badge img{ width: 26px; height: 26px; }
}

/* ============== UNIQUE, VISIBLE ANIMATIONS ============== */

/* Register animatable custom properties */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* Slightly faster variables you can tweak */
:root{
  --rail-speed: 1.4s;
  --sweep-speed: 1.2s;
  --orbit-speed: 4s;
  --float-speed: 8s;
}

/* Make the grid a positioning context for the rail */
.how-it-works-info{ position: relative; }

/* Desktop progress rail between columns, grows in */
@media (min-width: 900px){
  .how-it-works-info::before{
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 3px;
    transform: translateX(-50%);
    background:
      linear-gradient(var(--panel-ring), var(--panel-ring)) no-repeat;
    background-size: 100% 0%;
    opacity: .9;
    animation: rail-grow var(--rail-speed) ease-out .2s forwards;
    filter: drop-shadow(0 0 6px rgba(242,177,52,.35));
  }
}
@keyframes rail-grow { to { background-size: 100% 100%; } }

/* Card: gradient border sweep, easy to notice on enter, then on hover loops */
.card{
  position: relative;
  border: 2px solid transparent; /* use gradient border below */
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    conic-gradient(from var(--angle),
      color-mix(in oklab, var(--panel-ring) 95%, white) 0turn,
      color-mix(in oklab, var(--panel-ring) 85%, white) .10turn,
      transparent .22turn .70turn,
      color-mix(in oklab, var(--panel-ring) 85%, white) .82turn,
      color-mix(in oklab, var(--panel-ring) 95%, white) 1turn
    ) border-box;
  --angle: 0turn;
  animation: border-sweep var(--sweep-speed) ease-out both;
}
.card:hover{
  animation: border-spin 2.2s linear infinite;
  box-shadow: 0 18px 44px rgba(0,0,0,.10);
}
@keyframes border-sweep { to { --angle: 1turn; } }
@keyframes border-spin  { to { --angle: 1turn; } }

/* A small glow dot near the badge so steps read quickly */
.card::after{
  content: "";
  position: absolute;
  left: 60px; top: 46px; /* sits near the badge circle */
  width: 8px; height: 8spx; border-radius: 50%;
  background: var(--panel-ring);
  box-shadow:
    0 0 0 6px rgba(242,177,52,.18),
    0 0 26px rgba(242,177,52,.55);
  animation: blink 2.4s ease-in-out infinite;
}
@keyframes blink{
  0%, 100% { opacity: .55; transform: scale(.95); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* Step badge: soft pulse plus orbiting dot, clearer than a full spin */
.digit-badge{
  border: 3px solid transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    conic-gradient(
      from 0deg,
      rgba(255,181,81,.55) 0deg,
      rgba(220,231,236,.55) 120deg,
      rgba(255,246,209,.60) 240deg,
      rgba(22,92,125,.55) 360deg
    ) border-box;
  animation: none; /* override the original continuous spin */
}
.digit-badge::before{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(244,195,92,.28), transparent 58%);
  filter: blur(2px);
  animation: pulse 2.8s ease-in-out infinite;
}
.digit-badge::after{
  content: "";
  position: absolute;
  inset: 0; margin: auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--panel-ring);
  box-shadow: 0 0 0 3px rgba(242,177,52,.18);
  transform: rotate(0deg) translateX(26px);
  transform-origin: center center;
  animation: orbit var(--orbit-speed) linear infinite;
}
@keyframes pulse{
  0%,100% { transform: scale(.96); opacity: .7; }
  50%     { transform: scale(1.04); opacity: 1; }
}
@keyframes orbit{
  to { transform: rotate(360deg) translateX(26px); }
}

/* Phone mockups: gentle float after they slide in */
@keyframes floatY{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-8px); }
}

/* Keep original slide-ins, then add float */
.mockups-2-2{
  animation:
    slide-in-right .7s ease both .15s,
    floatY var(--float-speed) ease-in-out 1s infinite;
}
.mockups-4-1{
  animation:
    slide-in-left .7s ease both .05s,
    floatY var(--float-speed) ease-in-out 1.2s infinite;
}
.mockups-3-1{
  animation:
    slide-in-right .7s ease both .15s,
    floatY var(--float-speed) ease-in-out 1.4s infinite;
}
.mockups-1-1{
  animation:
    slide-in-left .7s ease both .05s,
    floatY var(--float-speed) ease-in-out 1.6s infinite;
}

/* Improve hover feedback on titles without changing type scale */
.h-3-feature-title,
.h-3-feature-title2,
.h-3-feature-title3,
.h-3-feature-title4{
  transition: letter-spacing .22s ease, color .22s ease;
}
.card:hover .h-3-feature-title,
.card:hover .h-3-feature-title2,
.card:hover .h-3-feature-title3,
.card:hover .h-3-feature-title4{
  color: var(--ink-900);
  letter-spacing: .2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .how-it-works-info::before,
  .card,
  .card::after,
  .digit-badge::before,
  .digit-badge::after,
  .mockups-2-2,
  .mockups-3-1,
  .mockups-4-1,
  .mockups-1-1{
    animation: none !important;
  }
}