/*
 * Home page (mynestor.php) rules moved out of its inline <style> block. Tokens (--primary,
 * --radius...) come from the theme stylesheet (css/theme-*.css) loaded first.
 */

/* ── HERO ──
   The H1 carries the words families search for; the slogan below it keeps the large visual
   heading look, but is a paragraph, so that search engines read the H1 as the page's
   subject. */
.hero .hero-kicker {
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.2px;
    margin-bottom: 12px;
}
.hero .hero-title {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
    color: var(--dark);
}
.hero .hero-title em {
    font-style: normal;
    color: var(--accent);
}

/* ── HOW IT WORKS: the relative (TV) and the family (mobile app), linked by a line ──
   Each card is text + pictogram, the pictograms facing each other at mid-height: the TV on
   the right edge of the relative's card, the phone on the left edge of the family's. The
   cards stretch to the same height, so both pictograms sit on the same line, and the dashed
   line (::before) runs from one to the other across the gap: the call. */
.how-columns {
    --how-gap: 32px;
    --how-pad: 36px;
    --how-icon: 72px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--how-gap);
    max-width: 960px;
    margin: 0 auto;
}
.how-columns::before {
    content: "";
    position: absolute;
    top: 50%;
    /* From the centre of one pictogram to the centre of the other. */
    left: calc(50% - var(--how-gap) / 2 - var(--how-pad) - var(--how-icon) / 2);
    right: calc(50% - var(--how-gap) / 2 - var(--how-pad) - var(--how-icon) / 2);
    border-top: 3px dashed var(--primary);
    z-index: 1;
}
.how-column {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px var(--how-pad);
}
/* Texts start at the top, whatever their length; only the pictograms are centred. */
.how-text { flex: 1; min-width: 0; align-self: flex-start; }
.how-icon {
    /* Above the line, which then seems to come out of each device. */
    position: relative;
    z-index: 2;
    flex: 0 0 var(--how-icon);
    width: var(--how-icon); height: var(--how-icon);
    display: flex; align-items: center; justify-content: center;
    background: var(--primary-light);
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 50%;
}
.how-column h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
.how-column .how-lead { color: var(--dark); font-weight: 600; font-size: 1.05rem; margin-bottom: 16px; }
.how-column p { color: var(--muted); font-size: 0.97rem; line-height: 1.7; }
.how-column p + p { margin-top: 12px; }

/* One column: the cards are stacked and no longer the same height, so the line can no longer
   be drawn across the whole block (it would cross the text). The TV goes under the
   relative's text and the phone above the family's (the markup order), both centred, and
   each draws its own half of the line into the gap between the cards. */
@media (max-width: 768px) {
    .how-columns { grid-template-columns: 1fr; --how-pad: 24px; }
    .how-columns::before { content: none; }
    .how-column { flex-direction: column; align-items: stretch; padding: 32px var(--how-pad); }
    .how-icon { align-self: center; }
    .how-column-relative .how-icon::after,
    .how-column-family .how-icon::before {
        content: "";
        position: absolute;
        left: 50%;
        margin-left: -1.5px;
        /* From the pictogram's edge, through the card's padding, to the middle of the gap. */
        height: calc(32px + var(--how-gap) / 2 + 2px);
        border-left: 3px dashed var(--primary);
    }
    .how-column-relative .how-icon::after { top: 100%; }
    .how-column-family .how-icon::before { bottom: 100%; }
}