/* CS42 · Chill hub (/chill/), Version 2. Shared parts live in site.css; this is only what the hub adds.
   The page: a quiet headline, the two tools as big sage tiles with what each one does listed under it
   (a product comparison: the rows line up across both), then the moments of the day as a story: the
   real scene for each moment stays on screen, with the shape of its breath drawn over it, while Focus,
   Unwind and Sleep scroll past (day, dusk, night). */

.pg-chill {
    --b-in: var(--accent);
    --b-hold: var(--gold);
    --b-out: var(--lilac);
}

/* ── Headline ───────────────────────────────────────────────────── */
.pg-hero { padding-top: clamp(56px, 8vw, 112px); padding-bottom: clamp(40px, 5vw, 72px); }
.pg-hero .eyebrow { color: var(--sage); }
.pg-hero .t-hero { max-width: 11ch; margin-inline: auto; }
.pg-hero em, .pg-moments em { font-style: normal; color: var(--sage); }
.pg-hero .t-lead { margin-top: 22px; max-width: 560px; }
.pg-in { animation: pg-rise 1.3s var(--ease-out) var(--d, 0s) both; }
@keyframes pg-rise { from { opacity: 0; transform: translateY(22px); } }

/* the time of day, gently: a dot, a line, and the two links that fit it */
.pg-now {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px;
    margin: 28px auto 0; font-size: 15px; color: var(--fg-3);
}
.pg-now[hidden] { display: none; }
.pg-now-dot { width: 7px; height: 7px; margin-right: -8px; border-radius: 50%; background: var(--sage); }
.pg-now a { display: inline-flex; align-items: center; font-size: 15px; color: var(--accent); }
.pg-now a::after {
    content: ""; width: 0.42em; height: 0.42em; margin-left: 0.36em;
    border: solid currentColor; border-width: 0.09em 0.09em 0 0; transform: rotate(45deg);
}

/* ── The two tools ──────────────────────────────────────────────── */
.pg-tools { display: grid; gap: 64px 12px; width: min(100% - 24px, 1680px); margin-inline: auto; }
.pg-tool { min-width: 0; }
.pg-tile {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: clamp(44px, 5vw, 64px) clamp(24px, 4vw, 56px) 0;
    border-radius: var(--radius-lg);
}
.pg-kind { font-size: 17px; font-weight: 600; color: var(--fg-3); }
.pg-name {
    display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 0.1em 0.26em;
    margin-top: 6px; font-size: clamp(44px, 4.8vw, 72px); line-height: 1.04; letter-spacing: -0.034em; font-weight: 600;
}
.pg-ar { font-family: var(--font-ar); font-weight: 600; font-size: 0.6em; line-height: 1; letter-spacing: 0; color: var(--fg-3); direction: rtl; unicode-bidi: isolate; }
.pg-desc { margin-top: 16px; max-width: 36ch; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.45; color: var(--fg-2); text-wrap: pretty; }
.pg-desc em { font-style: normal; font-weight: 600; color: var(--fg); }
.pg-tile .btns { justify-content: center; margin-top: 26px; }
/* a real screen from the tool, rising out of the bottom of the tile */
.pg-shot {
    display: block; width: min(100%, 680px); margin-top: clamp(36px, 4vw, 52px);
    border-radius: 18px 18px 0 0; overflow: hidden;
    box-shadow: 0 -16px 48px -24px rgba(22, 22, 26, 0.55);
}
.pg-shot picture { display: block; }
.pg-shot img { width: 100%; transform-origin: 50% 100%; }   /* (phones get a closer crop of the mixer: one column of tiles and the deck) */
.pg-shot .sc-rise { transform: translate3d(0, calc((1 - var(--p, 1)) * 64px), 0); }

/* what each one does, on hairlines under its tile (a product comparison, Apple style).
   On wide screens both lists share one grid (subgrid), so each row's hairline meets the one opposite. */
.pg-can { list-style: none; max-width: 460px; margin: clamp(28px, 3vw, 40px) auto 0; padding: 0 var(--gutter); }
.pg-can li {
    display: grid; align-content: center; padding: 18px 0;
    font-size: 17px; line-height: 1.42; color: var(--fg-2); text-align: center; text-wrap: balance;
}
.pg-can li + li { border-top: 1px solid var(--line); }
@media (min-width: 900px) {
    .pg-tools { grid-template-columns: 1fr 1fr; grid-template-rows: auto repeat(5, auto); row-gap: 0; }
    .pg-tool { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: 0; }
    .pg-can { display: contents; }
    .pg-can li { justify-self: center; width: min(460px, 100% - 2 * var(--gutter)); }
    .pg-can li:first-child { margin-top: clamp(24px, 2.6vw, 36px); }
}

/* ── Where to start: the moments ────────────────────────────────── */
.pg-moments { margin-top: clamp(56px, 7vw, 96px); }
.pg-moments .head .eyebrow { color: var(--sage); }
.pg-moments-head { display: grid; gap: 24px clamp(40px, 6vw, 96px); align-items: end; }
@media (min-width: 900px) { .pg-moments-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.pg-moments-head .head { max-width: none; }
.pg-moments-intro { max-width: 30ch; }
.pg-moments-intro .w.on { color: var(--fg); }

.pg-story { margin-top: clamp(56px, 7vw, 96px); --story-h: 440px; }
.pg-steps { list-style: none; }
.pg-steps .t-1 { margin-top: 2px; }
.pg-steps .t-lead { margin-top: 16px; max-width: 30ch; }
.pg-steps .eyebrow { display: flex; align-items: center; gap: 14px; color: var(--sage); }
.pg-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: var(--fg-2); }
.pg-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.pg-badge[hidden] { display: none; }

/* two links per moment, on hairlines: what it is, then where it goes */
.pg-moment-links { list-style: none; margin-top: 28px; max-width: 420px; border-top: 1px solid var(--line); }
.pg-moment-links a {
    display: grid; grid-template-columns: 5.2em minmax(0, 1fr) auto; align-items: center; gap: 12px;
    min-height: 54px; border-bottom: 1px solid var(--line);
    font-size: 17px; font-weight: 600; letter-spacing: -0.012em; color: var(--fg);
    transition: color .3s var(--ease);
}
.pg-moment-links a:hover { text-decoration: none; color: var(--accent); }
.pg-moment-links a span { font-size: 14px; font-weight: 400; color: var(--fg-3); }
.pg-moment-links a svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--fg-3); transition: transform .3s var(--ease), color .3s var(--ease); }
.pg-moment-links a:hover svg { transform: translateX(3px); color: var(--accent); }

/* the picture: the scene for the moment (Sukoon at day, dusk, night), the shape of its breath drawn over
   the lower third (in, hold, out). It draws itself in a little over a second whenever its moment arrives. */
.pg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pg-frame {
    --b-in: #6BD3C8; --b-hold: #E8C079; --b-out: #C3B8F0;
    position: relative; margin: 0; overflow: hidden; isolation: isolate;
    border-radius: var(--radius-lg); background: #0A0F1E;
}
.pg-frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.pg-frame::after {
    content: ""; position: absolute; inset: 45% 0 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(6, 12, 22, 0), rgba(6, 12, 22, 0.5) 45%, rgba(6, 12, 22, 0.78));
}
.pg-breath { position: absolute; left: 0; right: 0; bottom: 3%; z-index: 2; width: 100%; height: auto; overflow: visible; }
.b-base { fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: 1.4; stroke-dasharray: 2 6; }
.b-area { stroke: none; }
.b-area.b-in { fill: url(#b-fade-in); }
.b-area.b-hold { fill: url(#b-fade-hold); }
.b-area.b-out { fill: url(#b-fade-out); }
.b-stop { stop-opacity: 0.3; }
.b-stop--in { stop-color: #6BD3C8; }
.b-stop--hold { stop-color: #E8C079; stop-opacity: 0.2; }
.b-stop--out { stop-color: #C3B8F0; }
.b-stop--end { stop-opacity: 0; }
.b-line { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45)); }
.b-line.b-in { stroke: var(--b-in); }
.b-line.b-hold { stroke: var(--b-hold); }
.b-line.b-out { stroke: var(--b-out); }
.js .pg-frame .b-line { stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.js .pg-frame .b-area { opacity: 0; }
.js .pg-frame:is(.is-on, .is-in) .b-line { stroke-dashoffset: 0; transition: stroke-dashoffset calc(var(--b) * 1.2s) cubic-bezier(0.45, 0, 0.55, 1) calc(var(--a) * 1.2s + .15s); }
.js .pg-frame:is(.is-on, .is-in) .b-area { opacity: 1; transition: opacity .9s var(--ease) .5s; }
@media (max-width: 899px) {
    .pg-steps .t-lead { max-width: none; }
    .pg-steps .story-inline { margin-top: 28px; }
}

/* ── Both of them, on your iPhone ───────────────────────────────── */
.pg-ios {
    display: grid; gap: 40px; align-items: center; overflow: hidden;
    padding: clamp(36px, 5vw, 72px) clamp(28px, 5vw, 72px) 0;
    border-radius: var(--radius-lg); background: var(--bg-2);
}
@media (min-width: 834px) { .pg-ios { grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); padding-bottom: 0; } }
.pg-ios-copy { display: grid; gap: 22px; justify-items: start; padding-bottom: clamp(0px, 5vw, 72px); }
.pg-ios-copy .app-icon { width: 72px; height: 72px; }
.pg-ios-title { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.028em; font-weight: 600; }
.pg-ios-text { max-width: 46ch; margin-top: -8px; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.5; color: var(--fg-2); }
.pg-ios-media { display: flex; justify-content: center; align-self: end; height: clamp(300px, 30vw, 380px); overflow: hidden; }
.pg-ios-media .phone { --phone-w: 260px; aspect-ratio: auto; height: 540px; padding: 8px; border-radius: 44px; }
.pg-ios-media .phone img { border-radius: 36px; object-position: top; }

@media (prefers-reduced-motion: reduce) {
    .pg-in { animation: none; }
    .pg-shot .sc-rise { transform: none; }
    .js .pg-frame .b-line { stroke-dashoffset: 0; }
    .js .pg-frame .b-area { opacity: 1; }
}