/* myPill brand tokens and page components, layered on site.css. Teal from the app icon, warmed with blush and butter. */

:root {
    --bg: #fdfaf6;
    --surface: #f5f1e8;
    --text: #17302b;
    --text-muted: #556a65;
    --border: #e8e3d7;
    --accent: #0b7f6f;
    --accent-strong: #08594e;
    --accent-soft: #dff1ec;
    --accent-fill: #0b7f6f;
    --accent-fill-hover: #08594e;
    --accent-glow: rgb(11 127 111 / 26%);
    --accent-gradient: linear-gradient(135deg, #1ba592 0%, #0b7f6f 48%, #075247 100%);
    --accent-text: linear-gradient(100deg, #12a08c, #0a6659);
    --aura-1: rgb(40 170 150 / 20%);
    --aura-2: rgb(244 150 175 / 20%);
    --aura-3: rgb(250 205 130 / 16%);
    --star: #e9a10f;
    --phone-frame: #13201d;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0e1513;
        --surface: #141d1a;
        --surface-raised: #1b2623;
        --text: #eaf2ef;
        --text-muted: #a3b4af;
        --border: #26342f;
        --accent: #5ccdb9;
        --accent-strong: #9be5d8;
        --accent-soft: rgb(92 205 185 / 13%);
        --accent-fill: #0f8573;
        --accent-fill-hover: #0b6d5f;
        --accent-glow: rgb(15 133 115 / 34%);
        --accent-gradient: linear-gradient(135deg, #12907d 0%, #0b6b5e 55%, #06443c 100%);
        --accent-text: linear-gradient(100deg, #7fe0cf, #45b9a5);
        --tone-1: rgb(92 205 185 / 12%);
        --tone-1-ink: #7fdccb;
        --tone-2: rgb(240 140 175 / 12%);
        --tone-2-ink: #f3a3bf;
        --tone-3: rgb(240 195 110 / 11%);
        --tone-3-ink: #ecc478;
        --tone-4: rgb(175 150 240 / 13%);
        --tone-4-ink: #c0aaf2;
        --aura-1: rgb(40 170 150 / 16%);
        --aura-2: rgb(230 110 150 / 11%);
        --aura-3: rgb(240 190 110 / 6%);
        --star: #f2b33a;
        --phone-frame: #050908;
    }
}

/* Phone frame around an app screenshot */

.phone { display: block; padding: 7px; border-radius: 44px; background: var(--phone-frame); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 14%), 0 2px 4px rgb(10 40 34 / 14%), 0 34px 70px rgb(10 60 50 / 26%); }
.phone img { display: block; width: 100%; aspect-ratio: 660 / 1434; border-radius: 37px; object-fit: cover; }

/* Hero artwork: two screenshots with floating status chips */

.hero-visual { position: relative; width: min(440px, 100%); margin-inline: auto; padding: 20px 0 30px; }
.hero-visual .phone--back { position: absolute; left: 0; top: 64px; width: min(226px, 50vw); transform: rotate(-7deg); }
.hero-visual .phone--front { position: relative; width: min(272px, 60vw); margin-left: auto; margin-right: 12px; transform: rotate(3deg); }
.hero-visual .chip { position: absolute; }
.chip--reminder { top: 4px; right: -40px; }
.chip--protected { bottom: 84px; left: -20px; }

.trust { display: flex; align-items: center; gap: 14px; margin-top: 44px; }
.trust img { width: auto; height: 60px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #ffffff; }

/* Screenshot gallery */

.gallery { display: flex; gap: 20px; margin: 0 -20px; padding: 8px 40px 44px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery li { flex: 1 0 190px; max-width: 240px; scroll-snap-align: center; }
.gallery figure { margin: 0; }
.gallery .phone { padding: 5px; border-radius: 32px; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 14%), 0 14px 26px rgb(10 60 50 / 14%); }
.gallery .phone img { border-radius: 27px; }
.gallery figcaption { margin-top: 20px; padding-inline: 6px; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.5; }
.gallery figcaption strong { display: block; margin-bottom: 2px; color: var(--text); font-size: var(--text-body); font-weight: 600; }

/* Reviews */

.review-grid { columns: 3 280px; column-gap: 16px; }
.review { display: inline-block; width: 100%; margin-bottom: 16px; break-inside: avoid; }
.site .review h3 { margin: 14px 0 8px; font-family: var(--font-display); font-size: 1.375rem; font-weight: 400; font-variation-settings: 'SOFT' 100, 'WONK' 0; letter-spacing: -0.015em; }
.review p { color: var(--text-muted); font-size: 0.9375rem; }
.review .caption { margin-top: 16px; font-size: var(--text-caption); font-weight: 500; }
.stars { color: var(--border); font-size: var(--text-title); letter-spacing: 2px; line-height: 1; }
.stars .on { color: var(--star); }

.review--skeleton { height: 190px; background: linear-gradient(100deg, var(--surface-raised) 30%, var(--surface) 50%, var(--surface-raised) 70%) 0 0 / 300% 100%; animation: shimmer 1.6s linear infinite; }
.review--skeleton:nth-child(2) { height: 230px; }

@keyframes shimmer { to { background-position: -150% 0; } }

.reviews-status { margin-top: 8px; text-align: center; }
.reviews-more { margin-top: 24px; text-align: center; }

/* Press */

.press-kit { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 24px; max-width: 800px; box-shadow: var(--shadow); }
.press-kit > div:nth-child(2) { flex: 1 1 260px; }
.site .press-kit h2 { margin-bottom: 4px; font-size: 1.625rem; }

@media (max-width: 960px) {
    .trust { justify-content: center; }
    .gallery li { flex: 0 0 min(62vw, 240px); }
}

@media (max-width: 520px) {
    .phone { border-radius: 38px; }
    .phone img { border-radius: 32px; }
    .hero-visual .phone--back { top: 48px; }
    .chip--reminder { top: 0; right: -6px; }
    .chip--protected { bottom: 56px; left: -6px; }
    .hero-visual .chip { padding: 9px 14px 9px 9px; font-size: var(--text-caption); }
    .hero-visual .chip small { font-size: 0.75rem; }
    .hero-visual .chip .icon-badge { width: 34px; height: 34px; }
}