/* ============================================
   homepagefeatures.css
   Features & How It Works sections
   Depends on: bibaldi.css (variables, fonts)
   All selectors scoped to avoid conflicts with
   bibaldi.css global h2 and p overrides.
   ============================================ */

/* ────────────────────────────────────────────
   SHARED SECTION UTILITIES
   ──────────────────────────────────────────── */

   .features-section,
   .howitworks-section {
     width: 100%;
     box-sizing: border-box;
     cursor: default;
   }
   
   .features-section {
     background-color: var(--color-white);
     padding: 48px 20px 40px;
   }
   
   .howitworks-section {
     background-color: var(--color-beige);
     padding: 0;          /* inner handles its own padding */
   }
   
   .section-label {
     font-family: var(--font-funnel);
     font-size: 0.8rem;
     font-weight: 600;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--color-lightpurple);
     display: block;
     margin: 0 0 10px;
   }
   
   /* ── Features section label centred ── */
   .features-section .section-label {
     text-align: center;
     margin: 0 auto 10px;
   }
   
   /* ────────────────────────────────────────────
      FEATURES — HEADING & INTRO
      ──────────────────────────────────────────── */
   
   .features-heading {
     font-family: var(--font-funnel) !important;
     font-weight: 600 !important;
     font-size: 2rem !important;
     line-height: 1.1 !important;
     color: var(--color-purple) !important;
     text-align: center;
     margin: 0 auto 12px !important;
     padding: 0 !important;
     max-width: 600px;
     letter-spacing: -0.5px;
   }
   
   .section-intro {
     font-family: var(--font-funnel) !important;
     font-size: 0.95rem !important;
     font-weight: 300;
     color: var(--color-lighterblack) !important;
     text-align: center;
     max-width: 560px;
     margin: 0 auto 36px !important;
     line-height: 1.6;
   }
   
   /* ────────────────────────────────────────────
      FEATURES GRID
      ──────────────────────────────────────────── */
   
   .features-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 12px;
     width: 100%;
     max-width: 900px;
     margin: 0 auto;
   }
   
   .feature-card {
     background-color: var(--color-y);
     border: 2px solid var(--color-yellow);
     border-radius: var(--border-radius);
     padding: 20px;
     transition: all 0.2s ease;
   }
   
   .feature-card:hover {
     background-color: var(--color-lightestpurple);
     border-color: var(--color-lightpurple);
     transform: scale(1.01);
   }
   
   .feature-card h3 {
     font-family: var(--font-accent);
     font-size: 1.1rem;
     font-weight: 600;
     color: var(--color-lighterblack);
     margin: 0 0 10px;
     padding: 0;
   }
   
   .feature-card p {
     font-family: var(--font-funnel) !important;
     font-size: 0.88rem !important;
     font-weight: 300;
     color: var(--color-lighterblack) !important;
     line-height: 1.65;
     margin: 0 !important;
   }
   
   .feature-card-divider {
     border: none;
     border-top: 2px solid var(--color-lightpink);
     margin: 0 0 12px;
     width: 20px;
   }
   
   /* ────────────────────────────────────────────
      HOW IT WORKS — TWO-COLUMN LAYOUT
      ──────────────────────────────────────────── */
   
   .howitworks-inner {
     display: flex;
     flex-direction: column;
     width: 100%;
     max-width: 1100px;
     margin: 0 auto;
   }
   
   /* ── Left col: image ── */
   
   .howitworks-image-col {
     width: 100%;
     background-color: var(--color-lightestblue);
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 280px;
     padding: 32px 24px;
     box-sizing: border-box;
   }
   
   /* Placeholder — remove once real screenshot is dropped in */
   .howitworks-img-placeholder {
     width: 100%;
     max-width: 320px;
     aspect-ratio: 9 / 16;
     background-color: var(--color-lightblue);
     border-radius: 12px;
     border: 2px dashed var(--color-lightpurple);
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .howitworks-img-label {
     font-family: var(--font-funnel);
     font-size: 0.7rem;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     color: var(--color-lightpurple);
   }
   
   /* Real screenshot — add class "howitworks-screenshot" to your <img> */
   .howitworks-screenshot {
     width: 100%;
     max-width: 320px;
     border-radius: 12px;
     box-shadow: 0 8px 32px rgba(66, 84, 197, 0.12);
     display: block;
   }
   
   /* ── Right col: content ── */
   
   .howitworks-content-col {
     width: 100%;
     padding: 40px 24px 48px;
     box-sizing: border-box;
   }
   
   .howitworks-heading {
     font-family: var(--font-funnel) !important;
     font-weight: 600 !important;
     font-size: 2rem !important;
     line-height: 1.05 !important;
     color: var(--color-purple) !important;
     margin: 0 0 12px !important;
     padding: 0 !important;
     letter-spacing: -0.5px;
   }
   
   .howitworks-subhead {
     font-family: var(--font-funnel) !important;
     font-size: 0.92rem !important;
     font-weight: 300;
     color: var(--color-lighterblack) !important;
     line-height: 1.55;
     margin: 0 0 28px !important;
   }
   
   /* ────────────────────────────────────────────
      ACCORDION
      ──────────────────────────────────────────── */
   
   .hiw-accordion {
     display: flex;
     flex-direction: column;
     gap: 0;
   }
   
   /* Group label — "Drills" / "Stories" */
   .hiw-group-label {
     font-family: var(--font-accent);
     font-size: 1.3rem;
     font-weight: 500;
     letter-spacing: -1px;
     text-transform: uppercase;
     color: var(--color-beige);
     background-color: var(--color-purple);
     text-align: center;
     padding: 12px;
     margin: 16px 0 4px;
     cursor: default;
     display: inline-block;
   }
   
   .hiw-group-label--stories {
     background-color: var(--color-green);
     margin-top: 24px;
   }
   
   /* details/summary reset */
   .hiw-item {
     border-bottom: 1px solid var(--color-lightestpurple);
     list-style: none;
   }
   
   .hiw-item--stories {
     border-bottom-color: rgba(49, 165, 117, 0.2);
   }
   
   .hiw-item summary::-webkit-details-marker { display: none; }
   .hiw-item summary::marker { display: none; }
   
   .hiw-summary {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 13px 2px;
     cursor: pointer;
     font-family: var(--font-accent);
     font-size: 0.88rem;
     font-weight: 600;
     color: var(--color-black);
     text-transform: uppercase;
     letter-spacing: 0px;
     list-style: none;
     gap: 12px;
     transition: color 0.2s ease;
     user-select: none;
   }
   
   .hiw-summary:hover {
     color: var(--color-purple);
   }
   
   .hiw-item--stories .hiw-summary:hover {
     color: var(--color-green);
   }
   
   /* Chevron icon */
   .hiw-chevron {
     width: 16px;
     height: 16px;
     flex-shrink: 0;
     color: var(--color-lightpurple);
     transition: transform 0.25s ease;
   }
   
   .hiw-item--stories .hiw-chevron {
     color: var(--color-green);
     opacity: 0.6;
   }
   
   .hiw-item[open] .hiw-chevron {
     transform: rotate(180deg);
   }
   
   /* Body text */
   .hiw-body {
     font-family: var(--font-funnel) !important;
     font-size: 0.88rem !important;
     font-weight: 300;
     color: var(--color-lighterblack) !important;
     line-height: 1.65;
     padding: 0 4px 16px;
     margin: 0 !important;
     animation: hiw-open 0.2s ease;
   }
   
   @keyframes hiw-open {
     from { opacity: 0; transform: translateY(-4px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   
   /* ────────────────────────────────────────────
      TABLET  ≥ 768px
      ──────────────────────────────────────────── */
   
   @media (min-width: 768px) {
   
     .features-section {
       padding: 60px 30px 52px;
     }
   
     .features-heading {
       font-size: 2.6rem !important;
     }
   
     .section-intro {
       font-size: 1rem !important;
     }
   
     .features-grid {
       grid-template-columns: 1fr 1fr;
       gap: 14px;
     }
   
     /* How It Works stays stacked on tablet, image on top */
     .howitworks-image-col {
       min-height: 340px;
     }
   
     .howitworks-heading {
       font-size: 2.4rem !important;
     }
   
     .hiw-summary {
       font-size: 0.92rem;
       padding: 15px 2px;
     }
   }
   
   /* ────────────────────────────────────────────
      DESKTOP  ≥ 1024px
      ──────────────────────────────────────────── */
   
   @media (min-width: 1024px) {
   
     .features-section {
       padding: 80px 40px 64px;
     }
   
     .features-heading {
       font-size: 3.2rem !important;
       max-width: 700px;
     }
   
     .section-intro {
       font-size: 1.05rem !important;
       margin-bottom: 48px !important;
     }
   
     .features-grid {
       grid-template-columns: repeat(3, 1fr);
       gap: 16px;
       max-width: 960px;
     }
   
     .feature-card:last-child:nth-child(3n - 2) {
       grid-column: 2 / 3;
     }
   
     .feature-card {
       padding: 24px;
     }
   
     /* ── Two-column side by side on desktop ── */
   
     .howitworks-inner {
       flex-direction: row;
       min-height: 620px;
     }
   
     .howitworks-image-col {
       width: 45%;
       min-height: unset;
       position: sticky;
       top: 0;
       align-self: flex-start;
       padding: 48px 40px;
     }
   
     .howitworks-img-placeholder {
       max-width: 280px;
     }
   
     .howitworks-screenshot {
       max-width: 280px;
     }
   
     .howitworks-content-col {
       width: 55%;
       padding: 56px 48px 64px 40px;
     }
   
     .howitworks-heading {
       font-size: 2.8rem !important;
     }
   
     .hiw-summary {
       font-size: 0.9rem;
     }
   
     .hiw-body {
       font-size: 0.9rem !important;
       padding-bottom: 18px;
     }
   }
   
   /* ────────────────────────────────────────────
      LARGE DESKTOP  ≥ 1280px
      ──────────────────────────────────────────── */
   
   @media (min-width: 1280px) {
   
     .howitworks-img-placeholder,
     .howitworks-screenshot {
       max-width: 340px;
     }
   
     .howitworks-heading {
       font-size: 3rem !important;
     }
   }