/* ============================================================
   Reflective — shared product vignettes & home components
   Pure-CSS product hints (mini UIs), the phone mock, the home
   hero composition, the 167-hours grid, gallery cards, the
   modality band, and the night band.
   ============================================================ */

/* ---------------- Home hero ---------------- */
.hero-home {
    position: relative;
    overflow: hidden;
    padding: 96px 0 110px;
}
.hero-home-grid {
    display: grid;
    grid-template-columns: 1fr 0.92fr;
    gap: 56px;
    align-items: center;
    position: relative;
}
.hero-home .h-display {
    max-width: 34ch;
    font-size: clamp(34px, 3.5vw, 44px);
}
/* Headline phrase groups. Inline (natural wrap) on the stacked mobile hero;
   forced to one line each once the hero is a two-column grid, so the headline
   always reads as exactly three lines. The font size is bounded by the longest
   phrase ("Give your patients activities") fitting the text column on one line
   — if that copy gets longer, the size ceiling drops with it. */
.hero-home .h-display .hl {
    display: inline;
}
@media (min-width: 961px) {
    .hero-home-grid {
        grid-template-columns: 1.5fr 1fr;
    }
    .hero-home .h-display {
        max-width: none;
        font-size: clamp(30px, 3.8vw, 48px);
    }
    .hero-home .h-display .hl {
        display: block;
    }
}
/* Once the container hits its 1140px cap there is room to favour the headline
   harder without starving the illustration. */
@media (min-width: 1200px) {
    .hero-home-grid {
        grid-template-columns: 1.8fr 1fr;
    }
}
.hero-home .lede {
    max-width: 46ch;
}

.hero-wisps {
    position: absolute;
    top: -22%;
    right: 26%;
    width: 56%;
    max-width: 720px;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: radial-gradient(
        ellipse 62% 60% at 52% 46%,
        black 38%,
        transparent 78%
    );
    mask-image: radial-gradient(
        ellipse 62% 60% at 52% 46%,
        black 38%,
        transparent 78%
    );
}
.hero-art {
    position: relative;
    z-index: 1;
}
.hero-figure {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    display: block;
    border-radius: var(--r-2xl);
    mix-blend-mode: multiply;
}
/* Desktop: nudge the figure left so it clears the right-anchored chips.
   The chips are positioned against .hero-art, so they stay put. */
@media (min-width: 961px) {
    .hero-figure {
        margin-left: -34px;
        margin-right: 34px;
    }
}

/* Floating product chips composed over the watercolor */
.hero-chip {
    position: absolute;
    background: linear-gradient(
        150deg,
        rgba(255, 255, 255, 0.68) 0%,
        rgba(255, 255, 255, 0.42) 100%
    );
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--r-lg);
    box-shadow:
        0 14px 36px rgba(28, 25, 23, 0.13),
        0 2px 8px rgba(28, 25, 23, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    padding: 14px 16px;
}
/* Graceful fallback where backdrop-filter is unsupported */
@supports not (
    (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
    .hero-chip {
        background: rgba(255, 255, 255, 0.92);
    }
}
.hero-chip .chip-head {
    display: flex;
    gap: 10px;
    align-items: center;
}
.hero-chip .chip-dot {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--primary);
    font-size: 16px;
    flex-shrink: 0;
}
.hero-chip .chip-title {
    font-size: 13px;
    font-weight: 600;
}
.hero-chip .chip-sub {
    font-size: 12px;
    color: var(--text-3);
}

.hero-chip.reminder {
    top: -7%;
    right: -8%;
    max-width: 248px;
}
.hero-chip.entry {
    bottom: -2%;
    right: -8%;
    max-width: 290px;
}
.hero-chip.entry .chip-quote {
    font-family: var(--font-serif);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-2);
    margin-top: 10px;
    padding-left: 11px;
    border-left: 2px solid var(--primary-200);
}
.hero-chip.mood {
    bottom: -3%;
    right: 8%;
    padding: 14px 18px;
}
.hero-chip .mood-days {
    display: flex;
    gap: 10px;
}
.hero-chip .mood-days .day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.hero-chip .mood-days .dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}
.hero-chip .mood-days .lbl {
    font-size: 9px;
    color: var(--text-4);
    font-weight: 600;
}

/* ---------------- 167 hours ---------------- */
.hours {
    padding: 110px 0;
    border-top: 1px solid var(--hairline);
}
.hours-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}
/* Dot grid sits left of the copy on the two-column layout. Done with `order`
   rather than swapping the source so the stacked mobile view still leads with
   the heading and body copy, ahead of the decorative grid. */
@media (min-width: 961px) {
    .hours-grid > :first-child {
        order: 2;
    }
    .hours-grid > :last-child {
        order: 1;
    }
}
.hour-dots {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 7px;
}
.hour-dots i {
    display: block;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #e9e7e4;
}
.hour-dots i.session {
    background: var(--primary);
}
.hour-dots i.between {
    background: var(--primary-200);
}
.hour-dots-caption {
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-3);
}
.hour-dots-caption b {
    color: var(--primary);
    font-weight: 600;
}

/* ---------------- Step strip (home) ---------------- */
.step-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.step-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 28px 26px;
}
.step-card .s-num {
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-50);
    border: 1px solid var(--primary-100);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.step-card h3 {
    font-size: 16.5px;
    font-weight: 600;
    margin-top: 16px;
}
.step-card p {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--text-3);
    line-height: 1.6;
    text-wrap: pretty;
}
.step-strip-foot {
    margin-top: 32px;
    font-size: 14.5px;
}
.step-strip-foot a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}
.step-strip-foot a:hover {
    text-decoration: underline;
}

/* Centered closing line + CTA under the modality tiles. */
.modality-foot {
    margin-top: 40px;
    text-align: center;
}
.modality-foot p {
    margin: 0;
    font-size: 15px;
    color: var(--text-2);
}
.modality-foot .cta-row {
    margin-top: 20px;
    justify-content: center;
}

/* ---------------- Activity gallery ---------------- */
.activity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.activity-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}
.activity-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}
.activity-card .mini-ui {
    height: 190px;
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
    overflow: hidden;
}
.activity-card .card-meta {
    padding: 18px 22px 22px;
}
.activity-card h3 {
    font-size: 16px;
    font-weight: 600;
}
.activity-card p {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--text-3);
    line-height: 1.55;
    text-wrap: pretty;
}

/* mini UI: mood week */
.mu-mood {
    display: flex;
    gap: 14px;
}
.mu-mood .day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.mu-mood .dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
}
.mu-mood .lbl {
    font-size: 10.5px;
    color: var(--text-4);
    font-weight: 600;
}

/* mini UI: feelings wheel */
.mu-wheel {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: conic-gradient(
        var(--hue-rose) 0 60deg,
        var(--hue-amber) 60deg 120deg,
        var(--hue-sage) 120deg 180deg,
        var(--hue-teal) 180deg 240deg,
        var(--hue-indigo) 240deg 300deg,
        var(--primary) 300deg 360deg
    );
    position: relative;
    opacity: 0.85;
}
.mu-wheel::after {
    content: '';
    position: absolute;
    inset: 38px;
    background: var(--surface);
    border-radius: 50%;
}

/* mini UI: card sort */
.mu-sort {
    display: flex;
    gap: 16px;
    width: 100%;
    max-width: 280px;
}
.mu-sort .bucket {
    flex: 1;
}
.mu-sort .bucket-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-3);
    text-align: center;
    margin-bottom: 8px;
}
.mu-sort .scard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    font-size: 11px;
    padding: 8px 10px;
    margin-bottom: 6px;
    color: var(--text-2);
}
.mu-sort .scard.tilt {
    transform: rotate(-2.5deg);
    border-color: var(--primary-200);
}

/* mini UI: journal */
.mu-journal {
    width: 100%;
    max-width: 260px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
}
.mu-journal .prompt {
    font-family: var(--font-serif);
    font-size: 14px;
    color: var(--text);
    line-height: 1.4;
}
.mu-journal .lines {
    margin-top: 12px;
    display: grid;
    gap: 9px;
}
.mu-journal .lines i {
    display: block;
    height: 1px;
    background: var(--hairline);
}
.mu-journal .lines i:last-child {
    width: 60%;
}

/* mini UI: mindfulness */
.mu-mind {
    width: 100%;
    max-width: 250px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.mu-mind .play {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-100);
    color: var(--accent-700);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mu-mind .play::before {
    content: '';
    border-style: solid;
    border-width: 7px 0 7px 11px;
    border-color: transparent transparent transparent currentColor;
    margin-left: 3px;
}
.mu-mind .track {
    flex: 1;
}
.mu-mind .track-name {
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 8px;
}
.mu-mind .bar {
    height: 5px;
    border-radius: 99px;
    background: var(--accent-100);
    position: relative;
}
.mu-mind .bar::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 36%;
    border-radius: 99px;
    background: var(--accent-400);
}
.mu-mind .time {
    font-size: 10.5px;
    color: var(--text-4);
    margin-top: 6px;
}

/* mini UI: assessment score */
.mu-score {
    width: 100%;
    max-width: 260px;
}
.mu-score .score-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}
.mu-score .score-name {
    font-size: 12.5px;
    font-weight: 600;
}
.mu-score .score-val {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--primary);
}
.mu-score .bands {
    display: flex;
    gap: 3px;
    height: 8px;
}
.mu-score .bands i {
    flex: 1;
    border-radius: 99px;
    background: var(--bg-2);
}
.mu-score .bands i.f1 {
    background: var(--accent-200);
}
.mu-score .bands i.f2 {
    background: var(--accent-300);
}
.mu-score .bands i.f3 {
    background: var(--primary-300);
}
.mu-score .band-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-4);
    margin-top: 7px;
}

/* mini UI: builder rows */
.mu-builder {
    width: 100%;
    max-width: 270px;
    display: grid;
    gap: 7px;
}
.mu-builder .brow {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 12px;
    color: var(--text-2);
    box-shadow: var(--shadow-sm);
}
.mu-builder .brow.active {
    border-color: var(--primary-300);
    box-shadow: var(--ring);
}
.mu-builder .grip {
    color: var(--text-4);
    font-size: 11px;
    letter-spacing: 1px;
}
.mu-builder .btag {
    margin-left: auto;
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    background: var(--primary-50);
    padding: 2px 7px;
    border-radius: 99px;
}

/* ---------------- Quote band ---------------- */
.quote-band {
    padding: 96px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--hairline);
}
.quote-band .big-quote {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1.3;
    letter-spacing: -0.01em;
    max-width: 24ch;
    margin: 0 auto;
    text-wrap: balance;
}
.quote-band .big-quote em {
    font-style: italic;
    color: var(--primary);
}
.quote-band .quote-wisps {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    width: 620px;
    opacity: 0.22;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(
        ellipse 60% 60% at 50% 50%,
        black 30%,
        transparent 75%
    );
    mask-image: radial-gradient(
        ellipse 60% 60% at 50% 50%,
        black 30%,
        transparent 75%
    );
}
.quote-band .wrap {
    position: relative;
}

/* ---------------- Modality band ---------------- */
.modality-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.modality-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 24px 22px;
}
.modality-card .mod-abbr {
    font-family: var(--font-serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--primary);
}
.modality-card p {
    margin: 10px 0 0;
    font-size: 13.5px;
    color: var(--text-3);
    line-height: 1.55;
    text-wrap: pretty;
}

/* ---------------- For-clients composition ---------------- */
.clients-art {
    position: relative;
    display: flex;
    justify-content: flex-start;
}
.clients-frame {
    width: min(82%, 400px);
    border-radius: var(--r-2xl);
    overflow: hidden;
    background: #faf6f0;
    border: 1px solid rgba(28, 25, 23, 0.05);
}
.clients-frame img {
    width: 100%;
    display: block;
    mix-blend-mode: multiply;
}
.clients-art .phone-mock {
    position: absolute;
    right: 0;
    bottom: -8px;
    width: 235px;
    margin: 0;
}
.clients-art .phone-screen {
    min-height: 320px;
}

/* ---------------- Phone mock (for clients band) ---------------- */
.phone-mock {
    width: 280px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 36px;
    padding: 14px;
    box-shadow: var(--shadow-lg);
}
.phone-screen {
    background: var(--bg);
    border-radius: 24px;
    padding: 18px 16px 24px;
    min-height: 380px;
}
.phone-notch {
    width: 64px;
    height: 5px;
    border-radius: 99px;
    background: var(--border);
    margin: 0 auto 18px;
}
.phone-time {
    font-family: var(--font-serif);
    font-size: 30px;
    text-align: center;
    font-weight: 600;
}
.phone-date {
    font-size: 12px;
    color: var(--text-3);
    text-align: center;
    margin-top: 2px;
}
.phone-notif {
    margin-top: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: var(--shadow-md);
}
.phone-notif .n-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
}
.phone-notif .n-icon {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    background: #260b45;
    color: #f5f1e8;
    font-family: var(--font-serif);
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.phone-notif .n-app {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.phone-notif .n-when {
    font-size: 10.5px;
    color: var(--text-4);
    margin-left: auto;
}
.phone-notif .n-title {
    font-size: 13px;
    font-weight: 600;
}
.phone-notif .n-body {
    font-size: 12.5px;
    color: var(--text-3);
    line-height: 1.45;
    margin-top: 2px;
}
.phone-notif.quiet {
    opacity: 0.65;
    transform: scale(0.97);
}

/* ---------------- Night band ----------------
   Full-bleed wide nocturne. The image IS the band; a charcoal
   gradient on the left keeps the copy readable. */
.night-band {
    background: #1f2024;
    color: #fff;
    position: relative;
    overflow: hidden;
    min-height: 620px;
    display: flex;
    align-items: center;
    padding: 120px 0;
}
.night-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center right;
}
.night-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(26, 27, 32, 0.45) 0%,
            rgba(26, 27, 32, 0) 30%
        ),
        linear-gradient(
            90deg,
            rgba(26, 27, 32, 0.88) 0%,
            rgba(26, 27, 32, 0.66) 38%,
            rgba(26, 27, 32, 0.18) 66%,
            rgba(26, 27, 32, 0) 100%
        );
}
.night-band .wrap {
    position: relative;
    z-index: 1;
    width: 100%;
}
.night-band-copy {
    max-width: 520px;
}
.night-band .eyebrow {
    color: var(--primary-300);
}
.night-band .h-section {
    color: #f5f1e8;
    max-width: 17ch;
    font-size: clamp(34px, 3.4vw, 46px);
}
.night-band .lede {
    color: #c9cedb;
    max-width: 46ch;
}
.night-band .fine {
    margin-top: 18px;
    font-size: 13px;
    color: #8c97b3;
}
.night-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.night-stars i {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #f0c87a;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 960px) {
    .hero-home {
        padding: 64px 0 64px;
    }
    .hero-home-grid {
        grid-template-columns: 1fr;
        gap: 56px;
    }
    .hero-wisps {
        width: 120%;
        max-width: none;
        right: -30%;
        top: -6%;
        opacity: 0.4;
    }
    .hero-art {
        max-width: 480px;
        margin: 0 auto;
    }
    .hero-chip.entry {
        left: -8px;
    }
    .hero-chip.reminder {
        right: 0;
    }
    .hours-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .step-strip {
        grid-template-columns: 1fr;
    }
    .activity-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .modality-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .night-band {
        min-height: 0;
        padding: 88px 0;
    }
    .night-bg {
        background-position: 78% center;
    }
    .night-bg::after {
        background: linear-gradient(
            90deg,
            rgba(26, 27, 32, 0.94) 0%,
            rgba(26, 27, 32, 0.82) 55%,
            rgba(26, 27, 32, 0.55) 100%
        );
    }
    .clients-art .phone-mock {
        width: 215px;
    }
}
@media (max-width: 640px) {
    .activity-grid {
        grid-template-columns: 1fr;
    }
    .hero-chip.entry {
        display: none;
    }
    .hero-chip {
        padding: 10px 12px;
    }
    .hero-chip .chip-title {
        font-size: 12px;
    }
    .hero-chip .chip-sub {
        font-size: 11px;
    }
    .hero-chip .chip-dot {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
    .hero-chip.reminder {
        max-width: 215px;
        top: 0;
        right: 0;
    }
    .hero-chip.mood {
        right: 2%;
        bottom: 0;
    }
    .hero-chip .mood-days .dot {
        width: 15px;
        height: 15px;
    }
    .clients-art .phone-mock {
        width: 190px;
    }
    .clients-art .phone-screen {
        min-height: 270px;
    }
}