/* Homepage styles. 2026-09-25: rebuilt to the approved B1 mock
   (docs/design-refresh-2026-09-24/mockups/B1-home-face-centred.html). Tokens, nav, badges and footer
   live in site.css. The avatar grid, persona card and steps keep the pre-refresh rules
   verbatim (never redraw them); the B1 layer at the bottom sets the new type around them. */

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; }

/* DEVICE SHOTS (2026-09-28): the app screens are Rotato renders of a real iPhone 15 Pro
   (src/img/phone-*.webp, transparent) on a blurred crop of the lamp-lit room photo. Phones: the
   panel runs edge to edge and the device runs off its bottom; wider (2026-09-28, owner's call):
   the same crop in a rounded card, device at 330px so the app text reads, about 81% of it
   showing as on a 390px phone. */
.app-phone-wrap.shot {
    position: relative; overflow: hidden; border-radius: 28px;
    width: 100%; max-width: 460px; height: 600px; margin: 0 auto; padding: 48px 0 0; align-items: flex-start;
    background: #3a2f27 url(/photos/cta-room.webp) 8% 40% / cover;
}
.app-phone-wrap.shot::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(30,20,10,.05), rgba(30,20,10,.28));
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.shot .device {
    position: relative; z-index: 1; width: 330px; height: auto;
    filter: drop-shadow(0 30px 40px rgba(30,18,6,.35)) drop-shadow(0 6px 12px rgba(30,18,6,.2));
}

/* PERSONA EDITOR CARD (panel-5 style) */
.persona-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; margin-top: 2.5rem; }
.persona-copy h3 { font-size: 1.5rem; color: #1f2740; margin-bottom: 0.75rem; letter-spacing: -0.01em; }
.persona-copy p { color: var(--ink-soft); line-height: 1.7; font-size: 1rem; }
.persona-card {
    background: linear-gradient(180deg, #fcfbf7 0%, #f8f6f1 100%);
    border: 1px solid #eee7d9;
    border-radius: 22px; padding: 1.75rem;
    box-shadow: 0 18px 44px rgba(90, 80, 50, 0.1);
}
.persona-head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.3rem; }
.persona-head img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center 22%; }
.persona-name { font-family: var(--font-display); font-size: 1.25rem; color: #241f52; font-weight: 600; }
.persona-sub { font-size: 0.8rem; color: #8a8398; }
.persona-field { margin-bottom: 1rem; }
.persona-field:last-child { margin-bottom: 0; }
.persona-label {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: #a08c5a; margin-bottom: 0.3rem;
}
.persona-value {
    background: #fff; border: 1px solid #ece4d4; border-radius: 12px;
    padding: 0.7rem 0.9rem; font-size: 0.88rem; color: #33395c; line-height: 1.5;
}


/* SECTIONS */
section {
    max-width: var(--max-width); margin: 0 auto;
    padding: 5rem 2rem;
}
.section-divider { border: none; border-top: 1px solid var(--border); max-width: var(--max-width); margin: 0 auto; }
.section-label {
    font-size: 0.74rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--gold);
    font-weight: 600; margin-bottom: 0.85rem;
}
.section-title {
    font-size: 2.3rem; margin-bottom: 1rem; letter-spacing: -0.015em;
    line-height: 1.12; color: #1f2740;
}
.section-body {
    font-size: 1.08rem; color: var(--ink-soft);
    line-height: 1.7; max-width: 620px;
}


/* HOW IT WORKS */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2.75rem; }
.step-num {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(140deg, #cbaa6a, var(--bronze)); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
    margin-bottom: 1.1rem; box-shadow: 0 6px 16px rgba(140, 110, 60, 0.3);
}
.step h3 { font-size: 1.2rem; margin-bottom: 0.5rem; color: #283046; }
.step p { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.6; }

/* COMPANIONS SHOWCASE */
.companions {
    background:
        radial-gradient(600px 300px at 90% 0%, rgba(223,143,171,0.14), transparent 65%),
        linear-gradient(165deg, #f4ead8 0%, #f8f2e6 55%, #fbf8f0 100%);
    border: 1px solid var(--border);
    border-radius: 26px; padding: 3.25rem; color: var(--ink);
    margin-top: 0;
}
.companions h2 { font-size: 2.1rem; margin-bottom: 0.9rem; letter-spacing: -0.015em; color: #1f2740; }
.companions > p { color: var(--ink-soft); max-width: 600px; line-height: 1.7; }
.companion-row {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem; margin-top: 2.5rem;
}
/* Companion tiles mirror the app's "My Softlies" screen: tall rounded
   portrait cards with a full-bleed photo, a soft gradient, and the name
   overlaid at the bottom — so the whole face (forehead included) shows. */
.companion {
    position: relative; overflow: hidden;
    aspect-ratio: 3 / 4.2; border-radius: 24px;
    box-shadow: 0 10px 26px rgba(40,70,110,0.20);
    background: #e4f1fb;
}
.companion-av {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center top; display: block;
}
.companion::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to bottom, transparent 56%, rgba(16,28,48,0.32) 74%, rgba(16,28,48,0.82) 100%);
}
.companion-info {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 1rem 0.9rem 1.15rem; text-align: center;
}
.companion h4 {
    font-family: var(--font-display); font-size: 1.1rem; font-weight: 500;
    margin-bottom: 0.15rem; color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.companion p {
    font-size: 0.8rem; line-height: 1.4; color: rgba(255,255,255,0.92);
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/* APP PREVIEW: copy beside a device shot */
.app-preview {
    display: grid; grid-template-columns: 0.85fr 1fr; gap: 3rem; align-items: center;
}
.app-preview.flip { grid-template-columns: 1fr 0.85fr; }
.app-preview-copy .section-label { margin-bottom: 1rem; }
.app-preview-copy h2 { font-size: 2rem; letter-spacing: -0.01em; margin-bottom: 0.9rem; color: #1f2740; }
.app-preview-copy > p { color: var(--ink-soft); line-height: 1.7; font-size: 1.02rem; margin-bottom: 1.4rem; }
.app-points { list-style: none; display: grid; gap: 0.7rem; }
.app-points li {
    display: flex; gap: 0.65rem; align-items: flex-start;
    font-size: 0.95rem; color: var(--ink); line-height: 1.5;
}
.app-points li svg { width: 19px; height: 19px; color: var(--navy); flex-shrink: 0; margin-top: 1px; }
.app-phone-wrap { display: flex; justify-content: center; }

/* MOTION (respects prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
    .will-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; }
    .will-reveal.in { opacity: 1; transform: none; }
}

/* RESPONSIVE (pre-refresh rules for the kept sections) */
@media (max-width: 900px) {
    .persona-wrap { grid-template-columns: 1fr; gap: 1.75rem; }
    .app-preview, .app-preview.flip { grid-template-columns: 1fr; gap: 2.5rem; }
    .app-preview .app-phone-wrap { order: -1; }
    .companion-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .steps { grid-template-columns: 1fr; }
    section { padding: 3.5rem 1.5rem; }
    .companions { padding: 2.25rem; }
    .section-title { font-size: 1.9rem; }
}
@media (max-width: 480px) {
    .companion-row { grid-template-columns: 1fr 1fr; }
}

/* ================= B1 LAYER (2026-09-25) ================= */
body.home { background: var(--paper); color: var(--ink); font-family: var(--sans); }
.home h1, .home h2, .home h3 { font-family: var(--serif); font-weight: 600; }

/* pills + App Store badge */
.pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 10px 20px; font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; }
.pill svg { width: 15px; height: 15px; fill: currentColor; }
.pill.white { background: #fff; color: var(--ink); }
.badge { display: inline-flex; align-items: center; gap: 11px; background: #000; color: #fff; border-radius: 14px; padding: 10px 22px 11px 18px; text-decoration: none; transition: transform .2s ease; }
a.badge:hover { transform: translateY(-2px); }
.badge svg { width: 28px; height: 28px; fill: currentColor; flex-shrink: 0; }
.badge .t { display: flex; flex-direction: column; line-height: 1.1; }
.badge .t small { font-size: 12px; font-weight: 500; }
.badge .t b { font-size: 23px; font-weight: 600; letter-spacing: -0.02em; }
.badge.white { background: #fff; color: #000; box-shadow: 0 14px 40px rgba(10,6,2,.45); }
.cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.reassure { font-size: 17px; line-height: 1.4; }
.reassure b { font-weight: 600; }
.sec-cta { margin-top: 28px; }

/* HERO: desktop = photo right, copy left (the pre-refresh layout); phones = full-screen photo */
.hero { position: relative; overflow: hidden; background: #3a2f27; color: #fff; min-height: clamp(580px, 84vh, 820px); display: flex; }
.hero picture, .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-bg { object-fit: cover; object-position: 100% 50%; }
.hero-scrim { position: absolute; inset: 0; background:
    linear-gradient(105deg, rgba(44,27,10,.70) 0%, rgba(44,27,10,.52) 36%, rgba(44,27,10,.18) 58%, rgba(44,27,10,0) 72%),
    linear-gradient(180deg, rgba(44,27,10,.2) 0%, rgba(44,27,10,0) 30%, rgba(44,27,10,0) 72%, rgba(44,27,10,.2) 100%); }
.hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1100px; margin: 0 auto; padding: 5rem 2rem; display: flex; align-items: center; }
.hero-copy { max-width: 640px; }
.hero h1 { font-size: 64px; /* longest line is 8.4em: 538px */ line-height: 1.04; letter-spacing: -0.03em; margin-bottom: 22px; color: #fff; text-shadow: 0 2px 14px rgba(20,12,6,.45); }
.hero h1 .ln { display: block; white-space: nowrap; }
.hero h1 em { font-style: italic; font-weight: 500; color: #f6c2d5; }
.hero .dek { font-size: 21px; line-height: 1.5; max-width: 520px; margin-bottom: 30px; color: rgba(255,255,255,.96); text-shadow: 0 1px 10px rgba(20,12,6,.5); }
.hero .reassure { color: rgba(255,255,255,.92); text-shadow: 0 1px 8px rgba(20,12,6,.5); }

/* BODY: the kept sections, B1 typography */
.home section { padding-top: 6rem; padding-bottom: 6rem; }
.home .section-divider { border-top-color: var(--line); }
.home .section-label { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 18px; font-weight: 500; color: var(--accent); margin-bottom: 14px; }
.section-title, .app-preview-copy h2, .companions h2 { font-family: var(--serif); font-weight: 600; font-size: 52px; line-height: 1.04; letter-spacing: -0.03em; color: var(--ink); margin-bottom: 22px; }
.app-preview-copy > p, .companions > p, .section-body { font-size: 19px; line-height: 1.6; color: var(--ink-2); }
.app-points li { font-size: 18px; color: var(--ink); }
.persona-copy h3, .step h3 { font-family: var(--serif); font-weight: 600; color: var(--ink); line-height: 1.12; }
.companion-info h4 { font-family: var(--serif); font-weight: 600; }
.step-num { background: var(--accent); box-shadow: none; }
.persona-copy h3 { font-size: 30px; letter-spacing: -0.02em; }
.persona-copy p, .step p { font-size: 17px; color: var(--ink-2); }

/* the hand-drawn circle: drawn once when scrolled into view (scripts.njk), then stays */
.circled { position: relative; display: inline-block; white-space: nowrap; }
.circled svg { position: absolute; left: -7%; top: -10%; width: 114%; height: 126%; overflow: visible; pointer-events: none; }
.circled path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke;
    stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.6,.05,.3,1) .25s; }
.circled.drawn path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .circled path { transition: none; } }

/* FOUNDER BAND */
.band { background: var(--dark); color: #fff; }
.band-inner { max-width: 1100px; margin: 0 auto; padding: 100px 2rem; }
.home .band .section-label { color: #e9b3c8; font-size: 19px; margin-bottom: 28px; }
.band h2 { font-size: 56px; line-height: 1.04; letter-spacing: -0.03em; max-width: 860px; margin-bottom: 22px; }
.band h2 .q { display: block; font-size: 90px; line-height: .6; color: #e9b3c8; margin-bottom: 16px; }
.band p { font-size: 19px; line-height: 1.6; color: rgba(255,255,255,.8); max-width: 620px; margin-bottom: 28px; }
.band-stats { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; border-top: 1px solid rgba(255,255,255,.2); padding-top: 28px; margin: 12px 0 28px; }
.band-stats b { display: block; font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; color: #e9b3c8; margin-bottom: 10px; }
.band-stats span { display: block; font-size: 18px; line-height: 1.5; color: rgba(255,255,255,.85); }
.band .band-source { font-size: 15px; color: rgba(255,255,255,.65); }

/* WARM, GROWN-UP, AND YOURS: facts + photo */
.split { max-width: 1100px; margin: 0 auto; padding: 6rem 2rem; display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.split h2 { font-size: 52px; line-height: 1.04; letter-spacing: -0.03em; margin-bottom: 22px; }
.facts { list-style: none; border-top: 1px solid var(--line); }
.facts li { border-bottom: 1px solid var(--line); padding: 16px 0; font-size: 19px; line-height: 1.6; display: flex; gap: 14px; }
.facts li::before { content: "\2014"; color: var(--accent); }
.split img.photo { display: block; border-radius: 8px; width: 100%; height: auto; max-height: 620px; object-fit: cover; }

/* Q&A, always open */
.qa { max-width: 1100px; margin: 0 auto; padding: 0 2rem 6rem; }
.qa h2 { font-size: 44px; letter-spacing: -0.03em; margin-bottom: 26px; }
.qa-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; border-top: 1px solid var(--line); }
.qa-item { border-bottom: 1px solid var(--line); padding: 24px 0; }
.qa-item h3 { font-size: 24px; letter-spacing: -0.01em; margin-bottom: 8px; }
.qa-item p { font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.qa-more { margin-top: 22px; font-size: 17px; }
.qa-more a { color: var(--accent); font-weight: 600; text-decoration: none; }
.qa-more a:hover { text-decoration: underline; }

/* FINAL CTA: photo */
.final { position: relative; color: #fff; min-height: 600px; display: flex; align-items: flex-end; overflow: hidden; }
.final img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.final::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,14,10,.08), rgba(20,14,10,.78)); }
.final-copy { position: relative; z-index: 2; padding: 0 2rem 64px; max-width: 1100px; width: 100%; margin: 0 auto; }
.final h2 { font-size: 56px; line-height: 1.04; letter-spacing: -0.03em; margin-bottom: 18px; }
.final p { font-size: 20px; line-height: 1.6; max-width: 520px; margin-bottom: 26px; color: rgba(255,255,255,.92); }

/* sticky phone bar: black pill (show/hide in scripts.njk) */
.sticky-cta { display: none; }

@media (max-width: 760px) {
    /* PHONE: nav sits transparent over the full-screen hero photo */
    .home nav { position: absolute; left: 0; right: 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .home .nav-inner { padding: 16px 20px; }
    .home nav .logo-text { color: #fff; }
    .home nav .nav-badge { background: #fff; color: var(--ink) !important; }
    .home nav .nav-toggle { color: #fff; }
    .home nav:has(.nav-menu.open) .logo-text { color: #fff; }

    .hero { min-height: 100svh; }
    .hero-bg { object-position: 50% 30%; }
    /* dark only where the text sits, not over her face */
    .hero-scrim { background: linear-gradient(180deg, rgba(20,14,10,.28) 0%, rgba(20,14,10,0) 13%, rgba(20,14,10,0) 44%, rgba(20,14,10,.55) 64%, rgba(20,14,10,.82) 100%); }
    .hero-inner { padding: 0 20px 30px; align-items: flex-end; }
    /* always two lines: the longest line is 8.4em, so size it to the screen */
    .hero h1 { font-size: min(44px, calc((100vw - 40px) / 8.6)); margin-bottom: 14px; }
    .hero .dek { font-size: 18px; margin-bottom: 20px; }
    .badge { padding: 11px 22px 12px 18px; }
    .reassure { font-size: 15px; }
    .cta { gap: 12px; }

    .home section { padding-top: 4.5rem; padding-bottom: 4.5rem; }
    .app-phone-wrap.shot { margin: -4.5rem -1.5rem 0; max-width: none; width: auto; border-radius: 0; height: 540px; padding: 44px 0 0; align-items: flex-start; }
    .shot .device { width: min(76vw, 320px); }
    .section-title, .app-preview-copy h2, .companions h2, .split h2, .band h2, .final h2 { font-size: 38px; }
    .home .section-label { font-size: 16px; }
    .app-preview-copy > p, .companions > p, .section-body, .band p, .final p { font-size: 18px; }
    .band-inner { padding: 72px 20px; }
    .home .band .section-label { font-size: 18px; }
    .band h2 .q { font-size: 70px; }
    .band-stats { grid-template-columns: 1fr; gap: 22px; }
    .band-stats b { font-size: 28px; margin-bottom: 6px; }
    .split { grid-template-columns: 1fr; gap: 32px; padding: 4.5rem 20px; }
    .qa { padding: 0 20px 4.5rem; }
    .qa h2 { font-size: 34px; }
    .qa-list { grid-template-columns: 1fr; }
    .qa-item h3 { font-size: 22px; }
    .qa-item p { font-size: 17px; }
    .final { min-height: 540px; }
    .final-copy { padding: 0 20px 44px; }
    .home footer { padding-bottom: 80px; }

    .sticky-cta { display: flex; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 150; align-items: center; justify-content: space-between; gap: 12px; background: var(--ink); color: #fff; border-radius: 999px; padding: 8px 8px 8px 20px; box-shadow: 0 10px 30px rgba(0,0,0,.3); transform: translateY(calc(140% + env(safe-area-inset-bottom))); transition: transform .25s; }
    .sticky-cta.show { transform: none; }
    .sticky-copy { font-size: 15px; font-weight: 600; line-height: 1.2; }
    .sticky-copy span { display: block; font-weight: 400; opacity: .75; font-size: 13px; }
    .sticky-pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: #fff; color: var(--ink); padding: 11px 18px; font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; }
    .sticky-pill svg { width: 15px; height: 15px; fill: currentColor; }
}
@media (prefers-reduced-motion: reduce) {
    .sticky-cta { transition: none; }
}