/* ==========================================================================
   heading-semantics.css
   --------------------------------------------------------------------------
   Homepage headings were retagged for a correct H1 > H2 > H3 outline.
   This file pins the new tags to their previous visual sizes so nothing in
   the design shifts. Loaded AFTER main.css / main.min.css.

   Base sizes in main.css for reference:
     h2 { clamp(2.2rem, 5vw, 3.5rem) }
     h3 { clamp(1.5rem, 3vw, 1.8rem) }
     h4 { clamp(1.1rem, 2vw, 1.3rem) }
   ========================================================================== */


/* --- Utility ------------------------------------------------------------ */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* --- How It Works step cards: h4 -> h3 ---------------------------------- */
.step-card h3 {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    margin-bottom: 10px;
}


/* --- The Reaper's Way: h3.rw-title -> h2, div.rw-phrase -> h3 ----------- */
/* .rw-title already declares its own font-size/color and beats the bare h2
   element selector on specificity; these are belt-and-braces. */
h2.rw-title {
    font-size: 1rem;
    line-height: 1.2;
    margin: 0;
}
h3.rw-phrase {
    font-size: 1.4rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    margin: 0 0 8px;
}


/* --- Phone mockup: decorative h5 -> div.ps-top-title -------------------- */
/* This is chrome inside a fake phone screenshot, not a real section heading. */
.ps-top .ps-top-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.01em;
}


/* --- 60-second quote feature list: h4 -> h3 ----------------------------- */
.feat h3 {
    color: var(--white);
    margin-bottom: 2px;
    font-size: 1rem;
    line-height: 1.3;
}


/* --- FAQ: question button wrapped in h3 --------------------------------- */
/* The h3 is a semantic wrapper only. Neutralise the inherited display-font
   styling so the button keeps the body font it had before. */
.faq-q-head {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: normal;
    text-transform: none;
    color: inherit;
}
.faq-q-head .faq-q {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: normal;
    color: var(--black);
}
/* First item renders open on load; JS takes over from the first click. */
.faq-item.active .faq-a { max-height: 600px; }


/* --- Footer column labels: h4 -> h2 ------------------------------------- */
.footer-col h2 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.72rem;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 16px;
}


/* --- Blog cards: h4 -> h3 ----------------------------------------------- */
/* main.css already defines .blog-card-body h3; nothing needed here. Kept as a
   marker so the change is discoverable. */