/* Yellow Picnic — How It Works page
   Mirrors the homepage design system (Instrument Serif + Montserrat, YP brand
   palette). The global YP nav is styled separately by yp-nav.css. */

.yp-how-it-works {
    --hiw-fawn:     #D9D6D0;
    --hiw-onyx:     #221F1B;
    --hiw-ivory:    #F5F5F2;
    --hiw-juniper:  #286841;
    --hiw-juniper-hover: #275D3B;
    --hiw-espresso: #473B37;
    --hiw-espresso-hover: #3A302D;
    --hiw-black:    #000;
    --hiw-white:    #FFF;
    --hiw-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --hiw-sans:  'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --hiw-max: 1280px;
}

.hiw,
.hiw * { box-sizing: border-box; }

.hiw {
    font-family: var(--hiw-sans);
    color: var(--hiw-black);
    overflow-x: hidden;
}

.hiw-container {
    width: 100%;
    max-width: var(--hiw-max);
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
}

/* ── Typography ──────────────────────────────────────────────────────────── */
.hiw-eyebrow {
    font-family: var(--hiw-sans);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--hiw-juniper);
    margin: 0;
}
.hiw-headline1 {
    font-family: var(--hiw-serif);
    font-weight: 400;
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0.8px;
    color: var(--hiw-black);
    margin: 0;
}
.hiw-headline2 {
    font-family: var(--hiw-serif);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.15;
    color: var(--hiw-onyx);
    margin: 0;
}
.hiw-display {
    font-family: var(--hiw-serif);
    font-weight: 400;
    font-size: 56px;
    line-height: 0.96;
    letter-spacing: -0.02em;
    margin: 0;
}
.hiw-body {
    font-family: var(--hiw-sans);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.45;
    color: var(--hiw-black);
    margin: 0;
}
.hiw-text-center { text-align: center; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.hiw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--hiw-sans);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 17px 40px;
    border: 1px solid transparent;
    border-radius: 0;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.hiw-btn--espresso {
    background: var(--hiw-espresso);
    color: var(--hiw-white);
    border-color: var(--hiw-espresso);
}
.hiw-btn--espresso:hover,
.hiw-btn--espresso:focus-visible {
    background: var(--hiw-espresso-hover);
    border-color: var(--hiw-espresso-hover);
    color: var(--hiw-white);
}
.hiw-btn--ivory {
    background: var(--hiw-ivory);
    color: var(--hiw-black);
    border-color: var(--hiw-ivory);
}
.hiw-btn--ivory:hover,
.hiw-btn--ivory:focus-visible {
    background: var(--hiw-white);
    border-color: var(--hiw-white);
}

/* ── Section scaffold ────────────────────────────────────────────────────── */
.hiw-section { width: 100%; }
.hiw-portion   { background: var(--hiw-white); padding: 80px 0; }
.hiw-steps     { background: var(--hiw-ivory); padding: 80px 0; }
.hiw-deliver   { background: var(--hiw-white); padding: 80px 0; }
.hiw-newsletter{ background: var(--hiw-espresso); padding: 80px 0; }

.hiw-head { margin-bottom: 0; }
.hiw-head--center { text-align: center; }
/* Instrument Serif renders with large built-in line-box leading, so the visible
   gap is bigger than the margin. line-height:1 on the eyebrow removes its inherited
   26px leading, and a negative headline margin-top absorbs the serif's top leading —
   verified live so the rendered eyebrow->headline / headline->body gaps read ~15/20px. */
.hiw-head .hiw-eyebrow { margin-bottom: 8px; line-height: 1; }
.hiw-head .hiw-headline1 { margin-top: -6px; margin-bottom: 8px; }
.hiw-head--center { max-width: 640px; margin-left: auto; margin-right: auto; }

/* ── Pick Your Portion Size ──────────────────────────────────────────────── */
.hiw-portion__toggle { display: none; }      /* mobile only — shown below */

.hiw-portion__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
}
.hiw-portion__card {
    background: var(--hiw-ivory);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.hiw-portion__card-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    background-color: var(--hiw-fawn);
}
.hiw-portion__card-info {
    padding: 30px 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hiw-portion__card-label {
    font-family: var(--hiw-sans);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.1;
    color: var(--hiw-juniper);
    margin: 0;
}

.hiw-portion__support {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}
/* Supporting line = Body1 (18px), one centered line on desktop. */
.hiw-portion__support .hiw-body {
    font-size: 18px;
    line-height: 26px;
    max-width: 900px;
}

/* ── How We Make It ──────────────────────────────────────────────────────── */
.hiw-make { background: var(--hiw-white); }
.hiw-make__split { display: grid; grid-template-columns: 1fr 1fr; }
.hiw-make__image {
    min-height: 480px;
    background-size: cover;
    background-position: center;
    background-color: var(--hiw-fawn);
}
.hiw-make__copy {
    background: var(--hiw-ivory);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 56px;
}
.hiw-make__copy-inner { max-width: 540px; text-align: center; }
.hiw-make__copy .hiw-head { margin-bottom: 24px; }
.hiw-make__copy .hiw-head .hiw-headline1 { margin-bottom: 0; }

/* Proof grid */
.hiw-proof {
    background: var(--hiw-white);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 16px;
    max-width: var(--hiw-max);
    margin: 0 auto;
    padding: 64px 32px;
}
.hiw-proof__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.hiw-proof__icon { width: 40px; height: 40px; color: var(--hiw-juniper, #286841); }
.hiw-proof__label {
    font-family: var(--hiw-sans);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--hiw-espresso, #473B37);
    margin: 0;
}

/* ── Steps ───────────────────────────────────────────────────────────────── */
.hiw-steps__list {
    list-style: none;
    margin: 48px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 64px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.hiw-step { display: flex; gap: 20px; align-items: flex-start; }
.hiw-step__num {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--hiw-juniper);
    color: var(--hiw-ivory);
    font-family: var(--hiw-sans);
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hiw-step__title {
    font-family: var(--hiw-sans);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.25;
    margin: 0 0 6px;
    color: var(--hiw-black);
}
.hiw-steps__support {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* ── Where We Deliver ────────────────────────────────────────────────────── */
.hiw-deliver__form {
    max-width: 600px;
    margin: 40px auto 0;
}
.hiw-deliver__row {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1.5px solid var(--hiw-espresso);
    padding: 12px 4px;
}
.hiw-deliver__input {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    font-family: var(--hiw-sans);
    font-size: 16px;
    color: var(--hiw-espresso);
    padding: 4px 0;
    outline: none;
}
.hiw-deliver__input::placeholder { color: var(--hiw-espresso); opacity: .8; }
body.yp-how-it-works .hiw-deliver__input {
    background: transparent !important;
    border: 0 !important;
    color: var(--hiw-espresso) !important;
}
.hiw-deliver__submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--hiw-espresso);
    font-size: 22px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    padding: 0 4px;
}

/* ── Newsletter ──────────────────────────────────────────────────────────── */
.hiw-newsletter { text-align: center; color: var(--hiw-white); }
.hiw-newsletter__head .hiw-display {
    color: var(--hiw-white);
    margin: 0 auto 16px;
    max-width: 634px;
    font-size: 60px;
    line-height: 60px;
    letter-spacing: -0.04em;
}
.hiw-newsletter__head .hiw-body { color: var(--hiw-white); max-width: 480px; margin: 0 auto; }
/* Desktop: email + button side by side (Figma 500 + 300, 25px gap, 70px tall) */
.hiw-newsletter__form {
    margin: 40px auto 0;
    max-width: 825px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 25px;
}
.hiw-newsletter__input {
    flex: 0 0 500px;
    max-width: 500px;
    height: 70px;
    font-family: var(--hiw-sans);
    font-size: 16px;
    padding: 0 24px;
    outline: none;
}
/* The theme styles native inputs with a grey fill via a high-specificity rule;
   the body-scoped override beats it (verified live). */
body.yp-how-it-works .hiw-newsletter__input {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.8) !important;
    color: var(--hiw-white) !important;
    border-radius: 0 !important;
}
.hiw-newsletter__input::placeholder { color: rgba(255,255,255,.8); opacity: 1; }
.hiw-newsletter__form .hiw-btn { flex: 0 0 300px; width: 300px; height: 70px; }
.hiw-newsletter__msg {
    margin: 16px auto 0;
    font-family: var(--hiw-sans);
    font-size: 13px;
    color: var(--hiw-white);
    min-height: 18px;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.hiw-footer { background: var(--hiw-ivory); padding: 60px 0; text-align: center; }
.hiw-footer .hiw-container { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hiw-footer__logo img { display: block; max-height: 42px; width: auto; }
.hiw-footer__divider { width: 220px; height: 1px; border: 0; background: var(--hiw-fawn); margin: 0; }
.hiw-footer__social { display: flex; gap: 20px; }
.hiw-footer__social a { color: var(--hiw-espresso); display: inline-flex; transition: opacity .2s ease; }
.hiw-footer__social a:hover { opacity: .65; }
.hiw-footer__legal {
    font-family: var(--hiw-sans);
    font-weight: 500;
    font-size: 11px;
    line-height: 1.6;
    color: var(--hiw-black);
}
.hiw-footer__legal p { margin: 0; }
.hiw-footer__legal a { color: inherit; text-decoration: none; }
.hiw-footer__legal a:hover { text-decoration: underline; }
.hiw-footer__legal span { margin: 0 6px; }

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE  (< 1000px) — portion section collapses to a toggle + single card
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 999px) {

    .hiw-container { padding-left: 32px; padding-right: 32px; }
    /* Portion header is full-bleed in the design so the 38px headline stays on
       one line; the cards/toggle/button below are fixed-width + centered. */
    .hiw-portion .hiw-container { padding-left: 16px; padding-right: 16px; }
    /* …but the subtitle is a narrower, centered column so it wraps to two lines
       like the design (the headline above it stays full width). */
    .hiw-portion .hiw-head .hiw-body { max-width: 250px; margin-left: auto; margin-right: auto; }

    .hiw-portion, .hiw-steps, .hiw-deliver, .hiw-newsletter { padding: 50px 0; }

    /* Mobile type scale — matches Figma 393px artboard */
    .hiw-eyebrow   { font-size: 10px; }
    .hiw-headline1 { font-size: 38px; line-height: 36px; }
    .hiw-headline2 { font-size: 26px; line-height: 28px; }
    .hiw-display   { font-size: 48px; }
    .hiw-newsletter__head .hiw-display { font-size: 48px; line-height: 46px; }
    .hiw-body      { font-size: 12px; line-height: 18px; }
    .hiw-btn       { font-size: 12px; }
    .hiw-proof__label { font-size: 10px; }

    /* Toggle visible, becomes the control for the single visible card */
    .hiw-portion__toggle {
        display: flex;
        gap: 8px;
        max-width: 360px;
        margin: 32px auto 0;
    }
    .hiw-portion__toggle-btn {
        flex: 1 1 0;
        min-width: 0;
        border: 0;
        background: var(--hiw-ivory);
        color: var(--hiw-juniper);
        font-family: var(--hiw-sans);
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        padding: 16px 12px;
        cursor: pointer;
        transition: background-color .2s ease, color .2s ease;
    }
    .hiw-portion__toggle-btn.is-active {
        background: var(--hiw-juniper);
        color: var(--hiw-white);
    }

    /* Single-card mode: only the active card is shown */
    .hiw-portion__cards {
        display: block;
        max-width: 360px;
        margin: 20px auto 0;
    }
    .hiw-portion__card { display: none; }
    .hiw-portion__card.is-active {
        display: flex;
        animation: hiw-fade .25s ease;
    }
    .hiw-portion__card-info { padding: 24px 24px 28px; gap: 10px; }

    .hiw-portion__support { margin-top: 32px; gap: 30px; }
    .hiw-portion__support .hiw-body { font-size: 14px; line-height: 20px; max-width: 320px; }
    .hiw-portion__support .hiw-btn,
    .hiw-steps__support .hiw-btn { width: 100%; max-width: 315px; }

    /* How We Make It — stack image over copy, left-aligned on mobile */
    .hiw-make__split { grid-template-columns: 1fr; }
    .hiw-make__image { min-height: 0; aspect-ratio: 393 / 491; }
    .hiw-make__copy { padding: 44px 32px; justify-content: flex-start; }
    .hiw-make__copy-inner { text-align: left; }

    /* Mobile portion card omits the goal label (the toggle already shows it) */
    .hiw-portion__card .hiw-portion__card-label { display: none; }

    .hiw-proof {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 16px;
        padding: 40px 32px;
    }
    .hiw-proof__icon { width: 28px; height: 28px; }

    /* Steps — single column, left aligned */
    .hiw-steps__list { grid-template-columns: 1fr; gap: 25px; }
    .hiw-steps .hiw-head--center { text-align: left; }
    .hiw-step { gap: 16px; }
    .hiw-step__num { width: 28px; height: 28px; font-size: 12px; }
    .hiw-step__title { font-size: 14px; }

    .hiw-newsletter__form,
    .hiw-portion__cards,
    .hiw-portion__toggle { max-width: 315px; }

    /* Newsletter stacks on mobile (315 wide, 50px tall) */
    .hiw-newsletter__form { flex-direction: column; gap: 16px; }
    .hiw-newsletter__input { flex: none; width: 100%; max-width: none; height: 50px; font-size: 14px; }
    .hiw-newsletter__form .hiw-btn { flex: none; width: 100%; height: 50px; }
}

@keyframes hiw-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hiw-portion__card.is-active { animation: none; }
    .hiw-btn { transition: none; }
}