/* Encore marketing site, R6 (27 Oct 2026): the visuals show the app as it is today, and they scale to the screen.
Link after kit-app.css: (+ assets/kit-r6.js after kit-app.js)
Josh's rulings 15-27 (kit/JOSH-R5-NOTES.md) are the brief; ground truth is r6/truth/ (Encore 4.123.0, 27 Oct).
Reference: ../NOTES-R6.md.
1. Fit [data-fit]: one scale for the whole mock, proportions kept, never cropping its own UI (ruling 15).
2. .rv The page people answer, as 4.123.0 draws it: the Moodboard (click, rate, say why), the Comparison
pair, the welcome, the choice rows (ruling 16).
3. .dp The laptop + phone pair: one composition, shared baseline, phone over the laptop's lower right (23).
4. .jy The journey: steps of one process, pinned and scrolled, a clickable thread as the progress (17, 19).
5. Accent The studio colour recolours everything it drives, exactly as the app does (22). */
/* ============================== 1 · Fit ==============================
kit-r6.js wraps every [data-fit] mock in .fit > .fit-in, lays it out at a desktop width and scales the whole
thing to the room it has (width, and a height budget so it is seen whole). .fit-in is the `ka` container, so the
app's own responsive rules see the width the mock is laid out at, not the scaled one. Without script nothing is
wrapped and the mock reflows on its own (the R4c behaviour). On phones (under 601px) the mock is not scaled: it
shows its phone layout at full width, under its text. */
/* A visual that bleeds off the outer edge is cut there, never scrolls the page sideways (clip keeps sticky pins working). */
main { overflow-x: clip; }
.fit { position: relative; display: block; width: 100%; min-width: 0; justify-self: stretch; align-self: start; }
.fit > .fit-in { position: absolute; top: 0; left: 0; transform-origin: 0 0; container: ka / inline-size; will-change: transform; }
.fit.fit--off > .fit-in { position: relative; width: auto !important; transform: none !important; will-change: auto; }
.fit.fit--off { height: auto !important; }
.fit > .fit-in > .ka-win { width: 100%; }
/* A fitted window keeps its real proportions (it is the app on a screen); the floors from KIT2 still apply. */
.fit .ka-win--bleed-r, .fit .ka-win--bleed-l { aspect-ratio: var(--ka-ar, 16 / 10); }
.fit .ka-win--bleed-r > .ka-body, .fit .ka-win--bleed-l > .ka-body { min-height: var(--ka-h); }
/* ============================== 2 · The page people answer (4.123.0) ==============================
.rv is the respondent page inside a browser (.ka-browser) or a phone (.dp-phone). Sizes are the app's at 1440
(r6/truth/*-1440-*). --acc is the studio's colour (default plum); --rv-ground the studio's ground (Gradient). */
@property --acc { syntax: ""; inherits: true; initial-value: #3A1E3C; }
.rv {
--acc: #3A1E3C; --rv-ink: #3A1E3C; --rv-mute: #6E5A70; --rv-hair: rgba(58, 30, 60, .12); --rv-edge: rgba(58, 30, 60, .2);
--rv-quiet: #F4F3F4;
position: relative; overflow: clip; background: #FFFFFF; color: var(--rv-ink); font-family: var(--sans); font-size: 15px; line-height: 1.45;
text-align: left; transition: --acc .6s var(--ease-out);
}
.rv * { box-sizing: border-box; }
.rv img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rv i { font-style: normal; }
/* The ground: the app's Gradient (clientGroundImage). Plum, Encore's own colour, fades from lavender; any other
colour gets a 9% glow at the top and a 5% tint that reaches white at 340px. One layer per colour, crossfaded. */
.rv-ground { position: absolute; inset: 0 0 auto 0; height: 460px; pointer-events: none; }
.rv-ground > i { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease-out); background-repeat: no-repeat; }
.rv-ground > i.is-on, .rv-ground > i:only-child { opacity: 1; }
.rv-ground > i[data-acc="#3A1E3C"], .rv-ground > i:not([data-acc]) { background-image: linear-gradient(180deg, #EEEBFB 0px, #F3F1FD 180px, #FFFFFF 380px); }
.rv-ground > i[data-acc="#5B478B"] { background-image: radial-gradient(120% 290px at 50% 0%, color-mix(in oklch, #5B478B 9%, transparent) 0%, transparent 100%), linear-gradient(180deg, color-mix(in oklch, #5B478B 5%, white) 0%, #FFFFFF 340px); }
.rv-ground > i[data-acc="#2E5E4E"] { background-image: radial-gradient(120% 290px at 50% 0%, color-mix(in oklch, #2E5E4E 9%, transparent) 0%, transparent 100%), linear-gradient(180deg, color-mix(in oklch, #2E5E4E 5%, white) 0%, #FFFFFF 340px); }
.rv--white .rv-ground { display: none; }
.rv-prog { position: absolute; left: 0; top: 0; z-index: 4; height: 3px; width: var(--prog, 40%); background: var(--acc); }
.rv-prog::after { content: ""; position: absolute; left: 100%; top: 0; width: 100vw; height: 3px; background: rgba(58, 30, 60, .08); }
.rv-in { position: relative; z-index: 1; }
/* In a window the page takes the screen's height (16:10) and runs on below it, like the page scrolled. */
.ka-win > .rv { flex: 1 1 0; min-height: 0; }
/* The Comparison page is taller than a 16:10 screen: its window shows the whole pair (the page as it scrolls to it). */
.ka-win:has(> .rv-cmp), .ka-win:has(> .rv-welp) { aspect-ratio: auto; }
.ka-win > .rv-cmp, .ka-win > .rv-welp { flex: none; }
/* The top: the studio's name (branding on) left, the step pill in the middle, "Saved to secure session" right. */
.rv-top { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 16px 32px 0; min-height: 76px; }
.rv-studio { display: inline-flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 22px; letter-spacing: -.01em; white-space: nowrap; }
.rv-studio > i { width: 34px; height: 34px; border-radius: 50%; background: var(--acc); color: #F6F3EE; display: grid; place-items: center; font-size: 18px; }
.rv-pill { justify-self: center; display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 20px; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .14); font-size: 15px; white-space: nowrap; }
.rv-pill > i { width: 4px; height: 4px; border-radius: 50%; background: var(--rv-mute); }
.rv-pill small { font-size: 15px; color: var(--rv-mute); }
.rv-saved { justify-self: end; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--rv-ink); white-space: nowrap; }
.rv-saved::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2BA89E; }
.rv-rule { display: block; width: 48px; height: 2px; border-radius: 1px; background: var(--acc); }
/* ---------- A Slides question (Form in a Flow) ---------- */
.rv-q { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 48px 32px; }
.rv-kick { font-size: 14px; color: var(--rv-mute); }
.rv-q > .rv-rule { margin: 20px auto 22px; }
.rv-qt { font-family: var(--serif); font-size: 38px; line-height: 1.12; letter-spacing: -.02em; max-width: 760px; text-wrap: balance; }
.rv-q .ka-pair { max-width: 820px; }
/* Choice rows (Pick One / Pick Many / Yes-No), 4.123.0: full-width grey rows, hairlines between, a small number,
a serif label and a radio at the right that fills when picked (truth/form-slides-1440-q14-pick-one-answered). */
.rv-rows { width: 100%; max-width: 576px; margin-top: 30px; text-align: left; border-top: 1px solid rgba(58, 30, 60, .16); }
.rv-rows > span { display: grid; grid-template-columns: 30px minmax(0, 1fr) 16px; align-items: center; gap: 14px; min-height: 76px; padding: 0 22px 0 24px; background: var(--rv-quiet); border-bottom: 1px solid rgba(58, 30, 60, .16); font-family: var(--serif); font-size: 26px; letter-spacing: -.01em; transition: background-color .35s var(--ease-out); }
.rv-rows > span > small { font-family: var(--sans); font-size: 14px; color: var(--rv-mute); }
.rv-rows > span::after { content: ""; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .35); background: #FFFFFF; transition: box-shadow .3s var(--ease-out); }
.rv-rows > span.is-on::after { box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .35), inset 0 0 0 4px #FFFFFF, inset 0 0 0 10px var(--acc); }
.rv-rows--many > span::after { border-radius: 4px; }
.rv-rows--sm > span { min-height: 60px; font-size: 22px; }
.rv-foot { width: 100%; max-width: 920px; margin-top: 40px; padding-top: 16px; border-top: 1px solid rgba(58, 30, 60, .12); display: flex; justify-content: space-between; }
.rv-back { height: 46px; padding: 0 20px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .14); display: inline-flex; align-items: center; color: var(--rv-mute); }
.rv-cont { height: 46px; padding: 0 24px; border-radius: 999px; background: color-mix(in oklch, var(--acc) 58%, white); color: #FFFFFF; display: inline-flex; align-items: center; font-weight: 500; transition: background-color .35s var(--ease-out); }
.rv-cont.is-on { background: var(--acc); }
.rv-skip { margin-top: 22px; font-size: 14px; color: var(--rv-mute); text-decoration: underline; text-underline-offset: 4px; }
.rv-dots { margin-top: 24px; display: flex; gap: 8px; justify-content: center; }
.rv-dots span { width: 44px; height: 44px; border-radius: 50%; background: #F1EFF2; color: var(--rv-mute); display: grid; place-items: center; font-size: 14px; }
.rv-dots span.is-on { background: #E9E5EC; color: var(--rv-ink); box-shadow: inset 0 0 0 1px var(--rv-edge); }
.rv-dots span.is-done { color: var(--rv-ink); }
/* ---------- The Moodboard, as people answer it ----------
Click an image: a window opens (the image large on the left, three steps on the right), you rate it 1-10, say
what draws you in or puts you off, optionally how it feels, and Save. The image then wears a thumbs badge.
data-st on .rv-mb: board | hover | rate | why | feel | saved (kit-r6.js plays them as a calm loop). */
.rv-mb { min-height: 100%; }
.rv-mb-head { position: relative; z-index: 1; text-align: center; padding: 14px 40px 0; }
.rv-title { font-family: var(--serif); font-size: 56px; line-height: 1.02; letter-spacing: -.025em; }
.rv-sub { margin-top: 16px; font-size: 15px; color: var(--rv-mute); }
.rv-mason { position: relative; z-index: 1; margin: 40px 40px 0; padding-top: 10px; columns: var(--cols, 5); column-gap: 20px; }
.rv-mason figure { position: relative; margin: 0 0 20px; break-inside: avoid; border-radius: 12px; overflow: clip; background: #EEEBF0; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.rv-mason figure img { height: auto; aspect-ratio: var(--ar, 3 / 4); }
/* The badge (app 4.123.4): top-right, 40px, a 2px white edge, so it reads on a dark or a light photo. */
.rv-badge { position: absolute; right: 10px; top: 10px; z-index: 1; box-sizing: border-box; width: 40px; height: 40px; border: 2px solid #FFFFFF; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .22); background-size: 18px !important; transition: opacity .35s var(--ease-out), transform .45s cubic-bezier(.3, 1.5, .5, 1); }
.rv-badge.up { background: var(--mark, var(--acc)) no-repeat center / 15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.2 7.1 7.6 2.2c.9 0 1.6.7 1.6 1.6v2.3h3.4c.9 0 1.5.8 1.3 1.6l-1 4.6c-.1.6-.7 1.1-1.3 1.1H5.2Z' fill='%23fff'/%3E%3Crect x='1.6' y='7.1' width='2.6' height='6.3' rx='.8' fill='%23fff'/%3E%3C/svg%3E"); }
.rv-badge.down { background: #E5776A no-repeat center / 15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg transform='rotate(180 8 8)'%3E%3Cpath d='M5.2 7.1 7.6 2.2c.9 0 1.6.7 1.6 1.6v2.3h3.4c.9 0 1.5.8 1.3 1.6l-1 4.6c-.1.6-.7 1.1-1.3 1.1H5.2Z' fill='%23fff'/%3E%3Crect x='1.6' y='7.1' width='2.6' height='6.3' rx='.8' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E"); }
/* Hover: the image lifts a little and a round "+" sits in its middle (truth/flow-1440-06-moodboard-hover). */
.rv-plus { position: absolute; left: 50%; top: 50%; z-index: 1; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(40, 24, 42, .5); opacity: 0; transition: opacity .3s var(--ease-out); }
.rv-plus::before, .rv-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.6px; margin: -.8px 0 0 -8px; background: #FFFFFF; border-radius: 1px; }
.rv-plus::after { transform: rotate(90deg); }
.rv-plus { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9); }
figure.is-hover { transform: scale(1.02); box-shadow: 0 14px 30px rgba(30, 20, 40, .18); }
figure.is-hover .rv-plus { opacity: 1; }
.rv-mb .rv-mason figure:not(.is-rated) .rv-badge { opacity: 0; transform: scale(.4); }
/* A liked picture (app 4.123.4): a 3px ring 4px off the photo in the like mark (--mark: the accent, plum when the
accent is too pale to see on white; kit-r6.js setAccent), lifted 6px. Not for me: the coral badge only. */
.rv-mason figure.is-liked { outline: 3px solid var(--mark, var(--acc)); outline-offset: 4px; transform: translateY(-6px); transition: transform .45s var(--ease-out), outline-color .35s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .rv-mason figure.is-liked { transform: none; } }
/* The liked tray: a white bar at the foot of the board with the liked pictures, the running count, the hint, and the
one count of rated and needed (it replaces the dark count pill). */
.rv-tray { position: absolute; z-index: 3; left: 50%; bottom: 24px; translate: -50% 0; box-sizing: border-box; width: min(calc(100% - 48px), 660px); display: flex; align-items: center; gap: 14px; padding: 10px 20px 10px 10px; border-radius: 20px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(58, 30, 60, .10), 0 10px 30px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .06); color: var(--rv-ink); }
.rv-tray-th { flex: none; display: flex; gap: 8px; padding: 4px; }
.rv-tray-th img { display: block; width: 40px; height: 40px; border-radius: 9px; object-fit: cover; outline: 2px solid var(--mark, var(--acc)); outline-offset: 2px; }
.rv-tray-th:empty::before { content: ""; width: 40px; height: 40px; box-sizing: border-box; border-radius: 9px; border: 2px dashed color-mix(in oklch, var(--acc) 50%, white); }
.rv-tray-t { display: grid; gap: 2px; min-width: 0; text-align: left; }
.rv-tray-t b { font-weight: 400; font-size: 16px; line-height: 1.3; }
.rv-tray-t small { font-size: 14px; line-height: 1.35; color: var(--rv-mute); }
/* The count and the confirm: dark pills floating at the bottom of the page. */
.rv-float { position: absolute; z-index: 3; bottom: 24px; display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px; border-radius: 999px; background: rgba(58, 30, 60, .84); color: #FFFFFF; font-size: 15px; white-space: nowrap; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.rv-count { right: 24px; }
.rv-count b { font-weight: 400; }
.rv-confirm { left: 50%; translate: -50% 0; }
.rv-confirm::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: #FFFFFF; }
.rv-confirm.is-on::before { background: #FFFFFF no-repeat center / 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='%233A1E3C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.rv-go { position: absolute; z-index: 3; right: 24px; bottom: 76px; height: 46px; padding: 0 26px; border-radius: 999px; background: var(--acc); color: #FFFFFF; display: inline-flex; align-items: center; font-weight: 500; }
/* The board runs on below the window, as the page scrolls: it fades out at the bottom. */
.rv-mb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #FFFFFF 92%); }
.rv-mb { --ka-fades: 1; }
/* The rating window (V5MoodboardReactionDrawer at 1440: 1024 wide, the image left, the steps right). */
.rv-scrim { position: absolute; inset: 0; z-index: 5; background: rgba(36, 22, 38, .46); opacity: 0; visibility: hidden; transition: opacity .45s var(--ease-out), visibility 0s .45s; }
.rv-rate { position: absolute; z-index: 6; left: 50%; top: 50%; width: 1024px; max-width: calc(100% - 64px); height: 548px; max-height: calc(100% - 56px); translate: -50% -46%; border-radius: 28px; background: #FFFFFF; overflow: clip; display: grid; grid-template-columns: 49% minmax(0, 1fr); opacity: 0; visibility: hidden; transition: opacity .45s var(--ease-out), translate .55s var(--ease-out), visibility 0s .45s; }
.rv-rate-pic { position: relative; background: #111014; min-width: 0; }
.rv-rate-pic img { position: absolute; inset: 0; object-fit: cover; }
.rv-rate-side { position: relative; display: flex; flex-direction: column; min-width: 0; }
.rv-rate-h { flex: none; height: 76px; display: flex; align-items: center; gap: 14px; padding: 0 24px; border-bottom: 1px solid var(--rv-hair); font-size: 15px; color: var(--rv-mute); }
.rv-sdots { display: inline-flex; align-items: center; gap: 6px; }
.rv-sdots i { width: 6px; height: 6px; border-radius: 3px; background: #CFC9D2; transition: width .35s var(--ease-out), background-color .35s var(--ease-out); }
.rv-sdots i.is-on { width: 20px; background: var(--acc); }
.rv-x { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rv-hair); display: grid; place-items: center; color: var(--rv-ink); font-size: 18px; line-height: 1; }
.rv-rate-b { position: relative; flex: 1; min-height: 0; }
.rv-step { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 40px; opacity: 0; visibility: hidden; transition: opacity .4s var(--ease-out), visibility 0s .4s; }
.rv-step.is-on { opacity: 1; visibility: visible; transition: opacity .45s var(--ease-out) .1s, visibility 0s; }
.rv-step > p { font-size: 16px; color: var(--rv-ink); }
.rv-scale { margin-top: 18px; display: flex; gap: 8px; }
.rv-scale span { flex: 1 1 0; max-width: 42px; height: 44px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rv-edge); display: grid; place-items: center; font-size: 14px; color: var(--rv-ink); transition: background-color .3s var(--ease-out), color .3s var(--ease-out); }
.rv-scale span.is-on { background: var(--acc); color: #FFFFFF; box-shadow: none; }
.rv-word { margin-top: 14px; height: 20px; font-size: 15px; color: var(--rv-mute); }
.rv-chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.rv-chips span { height: 44px; padding: 0 15px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rv-edge); display: inline-flex; align-items: center; font-size: 15px; color: var(--rv-mute); white-space: nowrap; transition: background-color .3s var(--ease-out), color .3s var(--ease-out); }
.rv-chips span.is-on { background: var(--acc); color: #FFFFFF; box-shadow: none; }
.rv-note { margin-top: 22px; font-size: 15px; color: var(--rv-ink); }
.rv-note span { display: block; margin-top: 8px; min-height: 84px; padding: 14px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .3); font-size: 16px; color: var(--rv-ink); }
.rv-rate-f { flex: none; height: 76px; display: flex; align-items: center; gap: 12px; padding: 0 24px; border-top: 1px solid var(--rv-hair); }
.rv-btn { height: 46px; padding: 0 22px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rv-edge); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: var(--rv-ink); white-space: nowrap; }
.rv-btn--wide { flex: 1; }
.rv-btn--fill { flex: 1; background: var(--acc); color: #FFFFFF; box-shadow: none; font-weight: 500; }
/* Footer states: step 1 shows Cancel alone; steps 2 and 3 show Back + Next / Save. */
.rv-rate-f [data-f] { display: none; }
.rv-mb[data-st="rate"] .rv-rate-f [data-f="1"], .rv-mb[data-st="why"] .rv-rate-f [data-f="2"], .rv-mb[data-st="feel"] .rv-rate-f [data-f="3"] { display: inline-flex; }
.rv-mb:is([data-st="rate"], [data-st="why"], [data-st="feel"]) .rv-scrim { opacity: 1; visibility: visible; transition: opacity .45s var(--ease-out), visibility 0s; }
.rv-mb:is([data-st="rate"], [data-st="why"], [data-st="feel"]) .rv-rate { opacity: 1; visibility: visible; translate: -50% -50%; transition: opacity .45s var(--ease-out), translate .55s var(--ease-out), visibility 0s; }
.rv-mb:is([data-st="rate"], [data-st="why"], [data-st="feel"]) .rv-float { opacity: .45; }
/* The rating window covers the tray, as the app's window covers its dock. */
.rv-tray { transition: opacity .35s var(--ease-out), visibility 0s; }
.rv-mb:is([data-st="rate"], [data-st="why"], [data-st="feel"]) .rv-tray { opacity: 0; visibility: hidden; transition: opacity .35s var(--ease-out), visibility 0s .35s; }
/* ---------- The Comparison pair, as people answer it (V5ComparisonFlow) ---------- */
.rv-cmp-head { position: relative; z-index: 1; text-align: center; padding: 10px 40px 0; }
.rv-cmp-head .rv-rule { margin: 0 auto 18px; }
.rv-eyebrow { font-size: 15px; color: var(--rv-mute); }
.rv-cmp-head .rv-title { margin-top: 8px; font-size: 56px; }
.rv-cmp-head .rv-sub { margin-top: 14px; font-size: 16px; }
.rv-cmp-body { position: relative; z-index: 1; padding: 26px 56px 30px; }
.rv-meta { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--rv-mute); }
.rv-meta b { font-weight: 500; }
.rv-help { margin-top: 12px; font-size: 15px; color: var(--rv-ink); opacity: .85; }
.rv-pair { position: relative; margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.rv-dir { position: relative; height: var(--pair-h, 340px); display: grid; place-items: center; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.rv-dir figure { position: relative; margin: 0; width: 100%; height: 100%; }
.rv-dir figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 40px rgba(20, 40, 60, .18)); }
.rv-dl, .rv-choose { position: absolute; display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .1), 0 10px 24px rgba(20, 40, 60, .08); font-size: 14px; font-weight: 500; color: var(--rv-mute); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rv-dl { left: 14px; top: -6px; }
.rv-choose { right: 14px; bottom: -8px; min-height: 40px; font-weight: 400; }
.rv-vs { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 1; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .1), 0 12px 24px rgba(20, 40, 60, .08); display: grid; place-items: center; font-size: 14px; font-weight: 500; color: var(--rv-mute); }
/* Chosen (truth/cmp-1440-p01-chosen): the other side fades back; the pick holds. */
.rv-pair[data-pick="a"] .rv-dir:nth-of-type(2), .rv-pair[data-pick="b"] .rv-dir:nth-of-type(1) { opacity: .28; }
.rv-pair[data-pick="a"] .rv-dir:nth-of-type(1), .rv-pair[data-pick="b"] .rv-dir:nth-of-type(2) { transform: translateY(-4px); }
/* ---------- The welcome (V5 Flow welcome, truth/flow-1440-01-welcome) ---------- */
.rv-wel-wrap { position: relative; z-index: 1; display: grid; place-items: center; padding: 56px 40px 60px; }
.rv-wel { width: 560px; max-width: 100%; padding: 40px 40px 40px; border-radius: 24px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--rv-hair), 0 18px 40px rgba(58, 30, 60, .06); text-align: left; }
.rv-wel .rv-rule { margin: 0 0 30px; width: 52px; }
.rv-wel small { display: block; font-size: 14px; color: var(--rv-mute); }
.rv-wel h4, .rv-wel .rv-wt { margin: 10px 0 0; font-family: var(--serif); font-weight: 400; font-size: 48px; line-height: 1.03; letter-spacing: -.02em; }
.rv-wel .rv-from { margin-top: 10px; font-size: 15px; color: var(--rv-mute); }
.rv-wel p.rv-msg { margin-top: 22px; font-size: 17px; line-height: 1.6; color: var(--rv-ink); }
.rv-wel .rv-do { margin-top: 26px; font-size: 14px; color: var(--rv-mute); }
.rv-wel ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.rv-wel li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.rv-wel li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); flex: none; }
.rv-wel .rv-time { margin-top: 24px; font-size: 15px; color: var(--rv-mute); }
.rv-wel .rv-begin { margin-top: 30px; width: 220px; height: 48px; border-radius: 999px; background: var(--acc); color: #FFFFFF; display: grid; place-items: center; font-weight: 500; font-size: 16px; }
/* ---------- Phone and narrow windows: the same pages as the app draws them under 520px ---------- */
@container ka (max-width: 520px) {
.ka-win:has(> .rv) { aspect-ratio: 9 / 15; }
.rv-top { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 14px 16px 0; min-height: 0; }
.rv-top .rv-studio, .rv-top .rv-saved { display: none; }
.rv-pill { height: 38px; padding: 0 16px; gap: 10px; }
.rv-mb-head { padding: 18px 20px 0; }
.rv-mb-head::before { content: ""; display: block; width: 48px; height: 2px; margin: 0 auto 22px; background: var(--acc); }
.rv-title { font-size: 36px; }
.rv-sub { margin-top: 12px; }
.rv-mason { margin: 26px 14px 0; columns: 1; }
.rv-mason figure { margin-bottom: 14px; }
.rv-float { bottom: 16px; height: 38px; font-size: 14px; padding: 0 16px; }
.rv-count { right: 50%; translate: 50% 0; }
.rv-tray { bottom: 12px; width: calc(100% - 24px); gap: 10px; padding: 8px 14px 8px 8px; }
.rv-tray-th { max-width: 100px; overflow: hidden; }
.rv-tray-sep { display: none; }
.rv-tray-count { display: block; }
.rv-confirm { display: none; }
.rv-go { display: none; }
/* The rating window becomes a sheet: the image on top, the steps under it. */
.rv-rate { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-width: none; height: auto; max-height: calc(100% - 64px); translate: 0 24px; grid-template-columns: minmax(0, 1fr); grid-template-rows: 220px auto; border-radius: 24px; }
.rv-mb:is([data-st="rate"], [data-st="why"], [data-st="feel"]) .rv-rate { translate: 0 0; }
.rv-rate-b { min-height: 230px; }
.rv-step { padding: 0 20px; }
.rv-scale { flex-wrap: wrap; gap: 8px; }
.rv-scale span { flex: 0 0 calc((100% - 32px) / 5); max-width: none; }
.rv-rate-h { height: 64px; padding: 0 16px; }
.rv-rate-f { height: 72px; padding: 0 16px; }
.rv-chips span { height: 40px; padding: 0 13px; font-size: 14px; }
.rv-cmp-head { padding: 22px 18px 0; }
.rv-cmp-head .rv-title { font-size: 34px; }
.rv-cmp-body { padding: 24px 16px 28px; }
.rv-meta { flex-direction: column; gap: 10px; }
.rv-pair { grid-template-columns: minmax(0, 1fr); gap: 34px; }
.rv-dir { height: var(--pair-h-sm, 240px); }
.rv-vs { position: relative; left: auto; top: auto; translate: none; justify-self: center; width: 44px; height: 44px; margin: -22px 0; }
.rv-wel-wrap { padding: 28px 14px 28px; }
.rv-wel { padding: 30px 24px 30px; }
.rv-wel h4, .rv-wel .rv-wt { font-size: 36px; }
.rv-wel .rv-begin { width: 100%; }
.rv-q { padding: 28px 18px 24px; }
.rv-qt { font-size: 28px; }
.rv-rows { margin-top: 22px; }
.rv-rows > span { min-height: 62px; font-size: 22px; padding: 0 16px; }
.rv-dots span:nth-child(n+6) { display: none; }
}
@container ka (min-width: 521px) and (max-width: 900px) {
.rv-mason { --cols: 3; margin: 30px 24px 0; }
.rv-title { font-size: 44px; }
.rv-cmp-head .rv-title { font-size: 46px; }
.rv-cmp-body { padding: 28px 28px 32px; }
.rv-pair { gap: 32px; }
.rv-top .rv-saved { display: none; }
}
/* ============================== 3 · The laptop + phone pair (ruling 23) ==============================
One composition used everywhere: the laptop is a 1024px desktop browser, the phone a 375px phone, both on one
baseline; the phone overlaps the laptop's lower right by a third of its own width. The pair is fitted as one
mock ([data-fit="1260"]), so it is centred and fills its card. Each screen holds the real page at its own width:
the phone's screen is its own `ka` container, so the app's phone rules apply there. */
.dp { position: relative; width: 1260px; height: 760px; }
.dp-laptop { position: absolute; left: 0; bottom: 0; width: 1024px; height: 712px; display: flex; flex-direction: column; border-radius: 18px; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(58, 30, 60, .14); overflow: clip; container: ka / inline-size; }
.dp-laptop > .ka-chrome { flex: none; }
.dp-laptop > .rv { flex: 1; min-height: 0; }
.dp-phone { position: absolute; right: 0; bottom: 0; width: 375px; height: 760px; padding: 12px; border-radius: 54px; background: #1E1A24; box-shadow: 0 30px 60px rgba(30, 20, 40, .22); }
.dp-screen { position: relative; width: 351px; height: 100%; border-radius: 42px; overflow: clip; background: #FFFFFF; container: ka / inline-size; display: flex; flex-direction: column; }
.dp-status { flex: none; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px 0 30px; font-size: 14px; font-weight: 500; color: #1E1A24; }
.dp-status i { width: 96px; height: 28px; border-radius: 14px; background: #1E1A24; }
.dp-status b { font-weight: 500; letter-spacing: .02em; }
.dp-addr { flex: none; margin: 0 12px; height: 32px; border-radius: 10px; background: #F2F0F3; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13.5px; color: #6E5A70; }
.dp-screen > .rv { flex: 1; min-height: 0; }
.dp-screen > .rv::before { content: ""; }
/* Phone pages run on below the screen: the bottom fades like the page scrolls on. */
.dp-screen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; z-index: 6; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #FFFFFF 90%); }
.dp-screen { --ka-fades: 1; }
/* ============================== 4 · The journey (rulings 17 and 19) ==============================
Steps of one process, in order, on one thread. Markup is the stacked form (each step: label, line, visual), so
phones and pages without script read it top to bottom. On a desktop tall enough to hold it, kit-r6.js adds
.jy--pin: the section pins, scrolling moves from step to step, the thread on the left is the progress (click a
step to go to it), and the visuals move into the stage on the right, each landing whole and holding before the
next one comes.
h2, body
-
…a [data-fit] mock…
…