/* * kiosk-landscape-v1.css — the short-landscape band (phase 5). * * A rotating kiosk (or any tablet/phone turned sideways) gives the six stages * a viewport of roughly 640-1280 x 360-560 CSS px. Every layer above this one * was sized for a tall screen: the stage is bounded to * calc(100dvh - header) with overflow:hidden (phase 2), and the quiz grid, * the three stacked portrait cards, the advice article and the delivery form * simply did not fit, so their lower half was cut off — the quiz questions * and the third portrait were invisible and untappable in landscape while the * same page worked in portrait (videos of 2026-09-15). * * The product rule for this band is the same as for phones: NOTHING SCROLLS. * Every stage is re-laid out to fit a 360px-tall viewport at 640px width and * scales up from there: * header/rail the logo alone in a 44px row; the six steps in the side * rail on the right (VERTICAL RAIL section at the end) * Capture title + actions on the left, the 3:4 camera on the right * Explore title + progress on the left, the quiz panel fills the right * with the options in two columns * Profile the three 16:9 portraits in ONE row, one-line title, CTA * Advice one-line title, the reflection in three columns * (reflection | signals | next steps), CTA * Delivery one-line title, portrait summary | compact form * Achievement one-line title, portrait | details / share / restart * Secondary copy (stage subtitles, the quiz kicker, the advice recap and * disclaimer, the achievement description/steps/services, the organization * field) is hidden here; it is all repeated in the email. * * Portrait ratio is untouched: every portrait stays 16:9. * * Specificity: this file loads last and every selector carries a twelve-deep * #portraitDialog chain (12 ids). The layers below it use chains of up to * eleven ids (`html body #portraitDialog … #resultGrid×9` in * ui-bugfixes-v1.css) and !important throughout, so the id count — not the * source order — is what makes these declarations win. The [hidden] guard at * the end uses thirteen so a hidden element can never be shown by this file. * * Band: (min-width: 640px) and (max-height: 640px), plus every landscape * screen up to 800px tall (1024x768, 1280x720, 1366x768 and 1280x800 kiosks, * monitors and short laptops). Portrait kiosks and every taller screen are * outside it and unchanged; the landing and console hero keep the desktop * layout from 1100px up. 640px also takes in the * 1024x600 tablet, whose Explore panel used to scroll internally and whose * third portrait card was cut off at 900x600. * * The step rail: at EVERY size the six steps sit in a vertical rail on the * right (number + label), never in a top bar — see the VERTICAL RAIL section * at the end of this file (Nahira, 2026-09-21). */ @media (min-width: 640px) and (max-height: 640px), (min-width: 640px) and (min-height: 641px) and (max-height: 800px) and (orientation: landscape) { /* ---- shell: one 44px header row, stage bounded under it ---- */ html body { --nv-shell-header-h: 44px; --nv-stage-pad-top: 8px; --nv-stage-pad-bottom: 8px; --nv-stage-pad-left: 14px; --nv-stage-pad-right: 14px; --nv-kiosk-content-h: calc(100dvh - 44px - 16px); --nv-kiosk-fs: clamp(11px, 2.9vh, 15px); --nv-kiosk-lh: 1.2; --nv-kiosk-cta-h: clamp(40px, 10vh, 52px); --nv-kiosk-title-fs: clamp(20px, 6vh, 34px); /* Bayon, ~27% narrower than the Space Grotesk it replaced */ } /* The logo row and the step rail are laid out by the VERTICAL RAIL section at the end of this file (the rail is a side column at every size). */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-screen, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast { position: absolute !important; inset: 44px 0 0 0 !important; top: 44px !important; height: calc(100dvh - 44px) !important; max-height: calc(100dvh - 44px) !important; min-height: 0 !important; padding: var(--nv-stage-pad-top) var(--nv-stage-pad-right) var(--nv-stage-pad-bottom) var(--nv-stage-pad-left) !important; overflow: hidden !important; row-gap: 6px !important; column-gap: 16px !important; align-content: start !important; } /* ---- stage headers: tiny eyebrow, scaled title, no subtitle ---- */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stage-header, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .result-review-header { display: grid !important; grid-area: header !important; gap: 2px !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; align-self: start !important; justify-self: start !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stage-eyebrow { font-size: 11px !important; letter-spacing: .14em !important; line-height: 1.2 !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-title { font-size: var(--nv-kiosk-title-fs) !important; line-height: 1.02 !important; margin: 0 !important; max-width: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-title strong::first-line, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-title strong, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-title span { font-size: var(--nv-kiosk-title-fs) !important; line-height: 1.02 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-subtitle { display: none !important; } /* One-line titles where the title sits on a full-width row. */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultsTitle br, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #adviceStageTitle br, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #sendDetailsTitle br, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #achievementStageTitle br { display: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultsTitle > span::after, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #adviceStageTitle > span::after, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #sendDetailsTitle > span::after, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #achievementStageTitle > span::after { content: " "; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultsTitle > strong, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #adviceStageTitle > strong, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #sendDetailsTitle > strong, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #achievementStageTitle > strong, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultsTitle > span, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #adviceStageTitle > span, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #sendDetailsTitle > span, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #achievementStageTitle > span { display: inline !important; } /* ---- shared control sizes ---- */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .primary-button, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .secondary-button, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .nv-flow-button { min-height: var(--nv-kiosk-cta-h) !important; height: var(--nv-kiosk-cta-h) !important; max-height: var(--nv-kiosk-cta-h) !important; padding: 0 14px !important; font-size: clamp(11px, 2.9vh, 15px) !important; line-height: 1 !important; box-sizing: border-box !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .primary-button svg { width: 16px !important; height: 16px !important; } /* ================= CAPTURE ================= */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-screen[data-screen="capture"] { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: auto auto minmax(0, 1fr) !important; grid-template-areas: "header camera" "actions camera" "status camera" !important; align-content: start !important; align-items: start !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .camera-frame { grid-area: camera !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; width: auto !important; height: var(--nv-kiosk-content-h) !important; max-width: 100% !important; max-height: var(--nv-kiosk-content-h) !important; aspect-ratio: 3 / 4 !important; justify-self: end !important; align-self: start !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .screen-actions { grid-area: actions !important; position: relative !important; top: auto !important; left: auto !important; bottom: auto !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: start !important; align-self: start !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; gap: 8px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .screen-actions > .primary-button, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .screen-actions > .secondary-button { /* 190px: below two of these side by side the pair stacks instead of "UPLOAD PHOTO" breaking in two */ flex: 1 1 190px !important; white-space: nowrap !important; min-width: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .capture-secondary-actions { flex: 1 1 100% !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px 10px !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .secure-processing-note { margin: 0 !important; /* on a dark backing so it stays readable over the moving video (layout audit 2026-09-23) */ padding: 4px 8px !important; background: rgba(5, 10, 11, .72) !important; color: rgba(255, 255, 255, .82) !important; font-size: 11px !important; line-height: 1.3 !important; max-width: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] #cameraStatus { grid-area: status !important; position: relative !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 6px 10px !important; font-size: 11px !important; line-height: 1.3 !important; white-space: normal !important; justify-self: start !important; align-self: start !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .camera-guide-instruction { font-size: 11px !important; line-height: 1.25 !important; gap: 2px !important; padding: 6px 8px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .camera-guide-instruction .camera-guide-title, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .camera-guide-instruction .camera-guide-hint { font-size: 11px !important; line-height: 1.25 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .camera-guide-instruction .camera-guide-helper { display: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .camera-overlay { font-size: 11px !important; padding: 4px 8px !important; } /* ================= EXPLORE ================= */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-screen[data-screen="generating"] { display: grid !important; grid-template-columns: minmax(200px, 0.9fr) minmax(0, 1.7fr) !important; grid-template-rows: minmax(0, 1fr) auto !important; grid-template-areas: "header quiz" "status quiz" !important; align-content: stretch !important; align-items: start !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .generating-layout { grid-area: quiz !important; display: grid !important; grid-template-rows: minmax(0, auto) auto !important; grid-template-columns: minmax(0, 1fr) !important; align-self: stretch !important; align-content: start !important; height: 100% !important; max-height: 100% !important; min-height: 0 !important; overflow: hidden !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizPanel { display: grid !important; grid-template-rows: auto auto minmax(0, auto) auto !important; grid-template-columns: minmax(0, 1fr) !important; height: auto !important; max-height: 100% !important; min-height: 0 !important; overflow: hidden !important; overflow-y: hidden !important; padding: clamp(8px, 2vh, 14px) clamp(12px, 1.6vw, 18px) !important; gap: clamp(6px, 1.6vh, 12px) !important; row-gap: clamp(6px, 1.6vh, 12px) !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; align-content: start !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-panel-header { display: grid !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-kicker, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-subtitle { display: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-title { font-size: 11px !important; letter-spacing: .12em !important; text-transform: uppercase !important; line-height: 1.2 !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizStatus { font-size: 11px !important; line-height: 1.2 !important; margin: 0 !important; min-height: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizStatus:empty { display: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-question-column { display: grid !important; min-height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; align-content: start !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizQuestion { font-size: clamp(12px, 3.4vh, 18px) !important; line-height: 1.22 !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizQuestion strong { font-size: inherit !important; line-height: inherit !important; } /* Bayon's glyph box is taller than its 1.22 line: the column clipped ~5px under the question */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-question-column { overflow: visible !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizQuestion .quiz-complete-label, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizQuestion .quiz-complete-saved, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizQuestion .quiz-complete-progress { font-size: 11px !important; line-height: 1.3 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizOptions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: minmax(0, auto) !important; gap: clamp(6px, 1.4vh, 10px) !important; align-content: start !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; max-height: 100% !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizOptions .quiz-option { display: flex !important; align-items: center !important; gap: 6px !important; min-height: clamp(36px, 9vh, 56px) !important; height: auto !important; max-height: none !important; padding: clamp(4px, 1.2vh, 8px) clamp(8px, 1.4vw, 14px) !important; font-size: var(--nv-kiosk-fs) !important; line-height: 1.2 !important; text-align: left !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizOptions .quiz-option-index { font-size: 11px !important; min-width: 0 !important; flex: 0 0 auto !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizOptions .quiz-option-text, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizOptions .quiz-option { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizOptions .quiz-option-text { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 4 !important; line-clamp: 4 !important; overflow: hidden !important; font-size: inherit !important; line-height: inherit !important; min-width: 0 !important; flex: 1 1 auto !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-controls { margin: 0 !important; padding: 0 !important; min-height: 0 !important; gap: 6px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-controls:empty { display: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-fact-step:not([hidden]) { display: grid !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; overflow: hidden !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-fact-step-category { font-size: 11px !important; letter-spacing: .12em !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-fact-step-title { font-size: clamp(12px, 3.4vh, 18px) !important; line-height: 1.2 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-fact-step-body { font-size: var(--nv-kiosk-fs) !important; line-height: var(--nv-kiosk-lh) !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-fact-step-source { font-size: 11px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-fact-continue { width: auto !important; justify-self: start !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #generationReadyMessage:not([hidden]) { font-size: 11px !important; line-height: 1.3 !important; margin: 0 !important; padding: 4px 8px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #exploreLoadingBar { grid-area: status !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: none !important; gap: 4px !important; align-self: end !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .generation-status-chip { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; font-size: 11px !important; line-height: 1.2 !important; letter-spacing: .08em !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .generator-ring { width: 22px !important; height: 22px !important; min-width: 22px !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .generation-portrait-count { font-size: 11px !important; line-height: 1.2 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .explore-rail-progress { display: grid !important; gap: 3px !important; margin: 0 !important; width: 100% !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-progress-meta { display: flex !important; justify-content: space-between !important; font-size: 11px !important; line-height: 1.2 !important; margin: 0 !important; gap: 8px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-progress-meta span { font-size: 11px !important; line-height: 1.2 !important; letter-spacing: .04em !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-progress-bar { height: 3px !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-privacy-note { display: none !important; } /* ================= PROFILE ================= */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-screen[data-screen="portrait-discovery"] { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; grid-template-areas: "stage" !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] .result-review-stage { grid-area: stage !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) auto auto !important; grid-template-areas: "profile-header" "portraits" "profile-status" "profile-actions" !important; row-gap: 8px !important; column-gap: 0 !important; height: 100% !important; max-height: 100% !important; min-height: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; overflow-y: hidden !important; align-content: start !important; align-items: start !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] .result-review-header { grid-area: profile-header !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] #resultGrid { grid-area: portraits !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: minmax(0, auto) !important; gap: 10px !important; align-items: start !important; align-self: start !important; justify-self: center !important; width: 100% !important; /* cap the row so a 16:9 card never grows taller than the space left under the title (eyebrow+title 36, gaps 16, status 0, CTA, caption 46, card padding 12) */ max-width: calc(3 * ((100dvh - 44px - 16px - 36px - 16px - var(--nv-kiosk-cta-h) - 58px) * 16 / 9) + 20px) !important; min-height: 0 !important; max-height: 100% !important; height: auto !important; margin: 0 auto !important; padding: 0 !important; overflow: hidden !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .result-card { display: grid !important; grid-template-rows: auto auto !important; grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; padding: 6px !important; margin: 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important; width: 100% !important; max-width: 100% !important; align-content: start !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .result-card-img-wrapper { aspect-ratio: 16 / 9 !important; width: 100% !important; height: auto !important; max-height: none !important; min-height: 0 !important; align-self: start !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .result-card-img { width: 100% !important; height: 100% !important; object-fit: cover !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .result-caption { display: grid !important; gap: 1px !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid :is(.portrait-direction-kicker, .portrait-direction-label) { font-size: 11px !important; letter-spacing: .12em !important; line-height: 1.2 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .result-caption strong { font-size: clamp(11px, 3vh, 13px) !important; line-height: 1.2 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .portrait-direction-points { display: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .portrait-preview-trigger { width: 32px !important; height: 32px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; } /* the selection mark owns the top-right corner; the preview button sat on top of it (22px mark and 26px button 2-6px apart) */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .portrait-preview-trigger { top: auto !important; bottom: 5px !important; right: 5px !important; left: auto !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .portrait-preview-trigger::after { content: "" !important; position: absolute !important; inset: -6px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .selection-mark { width: 22px !important; height: 22px !important; font-size: 12px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] #portraitDiscoveryStatus { grid-area: profile-status !important; display: block !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; font-size: 11px !important; line-height: 1.3 !important; text-align: left !important; width: 100% !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] #portraitDiscoveryStatus:empty { display: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] .result-review-actions { grid-area: profile-actions !important; display: flex !important; gap: 8px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; justify-content: flex-start !important; justify-self: start !important; align-self: end !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] #openSendDetails { width: min(100%, 420px) !important; max-width: 420px !important; margin: 0 !important; } /* ================= ADVICE ================= */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-screen[data-screen="personalized-advice"] { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) auto !important; grid-template-areas: "header" "layout" "actions" !important; align-content: stretch !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-stage-layout { grid-area: layout !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; grid-template-areas: "main" !important; gap: 0 !important; min-height: 0 !important; height: 100% !important; max-height: 100% !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; align-items: start !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] #adviceRecap, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-disclaimer { display: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-stage-main { grid-area: main !important; display: block !important; min-height: 0 !important; height: auto !important; max-height: 100% !important; overflow: hidden !important; overflow-y: hidden !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; align-self: start !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-content:not([hidden]) { display: grid !important; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1.15fr) !important; grid-template-rows: minmax(0, 1fr) !important; gap: clamp(8px, 1.2vw, 14px) !important; align-items: start !important; margin: 0 !important; padding: clamp(4px, 1.4vh, 10px) clamp(6px, 1vw, 12px) !important; width: 100% !important; max-width: 100% !important; min-height: 0 !important; max-height: 100% !important; overflow: hidden !important; box-sizing: border-box !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-content > header { display: grid !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; min-width: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-content > header > span { font-size: 11px !important; letter-spacing: .12em !important; line-height: 1.2 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] #adviceHeadline { font-size: clamp(12.5px, 3.6vh, 19px) !important; line-height: 1.15 !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] #adviceFitRationale, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-signal-grid p, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-next-steps li { font-size: var(--nv-kiosk-fs) !important; line-height: var(--nv-kiosk-lh) !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-signal-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; width: 100% !important; min-width: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-signal-grid > section, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-next-steps { display: grid !important; gap: 3px !important; margin: 0 !important; padding: clamp(4px, 1.4vh, 8px) clamp(6px, 0.8vw, 10px) !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-signal-grid h3, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-next-steps h3 { font-size: 11px !important; letter-spacing: .12em !important; line-height: 1.2 !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-next-steps ol { display: grid !important; gap: clamp(3px, 1vh, 6px) !important; margin: 0 !important; padding: 0 0 0 14px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-loading:not([hidden]), html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-error:not([hidden]) { display: grid !important; gap: 6px !important; justify-items: start !important; align-content: start !important; margin: 0 !important; padding: 10px 12px !important; font-size: var(--nv-kiosk-fs) !important; line-height: var(--nv-kiosk-lh) !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-loading strong, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-error strong { font-size: clamp(12.5px, 3.6vh, 16px) !important; line-height: 1.2 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-loading p, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-error p { font-size: var(--nv-kiosk-fs) !important; line-height: var(--nv-kiosk-lh) !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-loading-mark { width: 26px !important; height: 26px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-actions { grid-area: actions !important; display: flex !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; justify-content: flex-start !important; align-self: end !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] #adviceContinue { width: min(100%, 420px) !important; max-width: 420px !important; margin: 0 !important; } /* ================= DELIVERY ================= */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-screen[data-screen="delivery"] { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) !important; grid-template-areas: "header" "layout" !important; align-content: start !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] #sendDetailsModal { grid-area: layout !important; display: grid !important; grid-template-columns: minmax(150px, 0.75fr) minmax(0, 1.5fr) !important; grid-template-rows: minmax(0, 1fr) !important; grid-template-areas: "summary form" !important; gap: 14px !important; align-items: start !important; min-height: 0 !important; height: auto !important; max-height: 100% !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .delivery-summary { grid-area: summary !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important; grid-template-areas: none !important; gap: 6px !important; align-self: start !important; margin: 0 !important; padding: 6px !important; min-height: 0 !important; height: auto !important; max-height: 100% !important; overflow: hidden !important; width: 100% !important; max-width: calc((100dvh - 44px - 16px - 36px - 8px - 52px) * 16 / 9) !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] #deliveryPortraitImage { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; object-fit: cover !important; max-height: none !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .delivery-summary-copy { display: grid !important; gap: 1px !important; margin: 0 !important; padding: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .delivery-summary-copy > span { font-size: 11px !important; letter-spacing: .12em !important; line-height: 1.2 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] #deliveryPortraitTitle { font-size: clamp(11px, 3vh, 13px) !important; line-height: 1.2 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .delivery-summary-copy > p, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .delivery-summary-copy > section { display: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .send-details-panel { grid-area: form !important; display: grid !important; gap: 6px !important; align-self: start !important; margin: 0 !important; padding: 8px 12px !important; min-height: 0 !important; height: auto !important; max-height: 100% !important; overflow: hidden !important; overflow-y: hidden !important; width: 100% !important; max-width: 100% !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .send-details-brand { display: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .send-details-header { display: grid !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .send-details-kicker { display: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .send-details-header h2 { font-size: clamp(12px, 3.4vh, 18px) !important; line-height: 1.15 !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .send-details-form { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px 10px !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; align-content: start !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .field-group { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "label" "input" "error" !important; gap: 2px !important; margin: 0 !important; padding: 0 !important; min-width: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .field-group label { grid-area: label !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .field-group input { grid-area: input !important; } /* inline errors: one small line under the input */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .field-group .field-error:not([hidden]) { grid-area: error !important; margin: 0 !important; font-size: 11px !important; line-height: 1.2 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] #terms-error:not([hidden]) { grid-column: 1 / -1 !important; margin: 0 !important; font-size: 11px !important; line-height: 1.2 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .field-group:has(#company) { display: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .field-group label { font-size: 11px !important; letter-spacing: .1em !important; line-height: 1.2 !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .field-group input { height: clamp(36px, 9vh, 44px) !important; min-height: 0 !important; padding: 0 10px !important; font-size: 16px !important; /* 16px: iOS Safari zooms into smaller inputs (iPhone landscape sits in this band) */ line-height: 1.2 !important; width: 100% !important; box-sizing: border-box !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .terms-row { grid-column: 1 / -1 !important; display: flex !important; align-items: flex-start !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .terms-row .custom-checkbox { width: 16px !important; height: 16px !important; min-width: 16px !important; font-size: 11px !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .terms-row .terms-copy { font-size: 11px !important; line-height: 1.25 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] #deliveryStatus { grid-column: 1 / -1 !important; margin: 0 !important; padding: 0 !important; font-size: 11px !important; line-height: 1.3 !important; min-height: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] #deliveryStatus:empty { display: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] #submitBtn { grid-column: 1 / -1 !important; width: min(100%, 420px) !important; max-width: 420px !important; margin: 0 !important; justify-self: start !important; } /* ================= ACHIEVEMENT ================= */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) auto !important; grid-template-areas: "header" "layout" "actions" !important; align-content: start !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-stage-layout { grid-area: layout !important; display: grid !important; grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.5fr) !important; grid-template-rows: minmax(0, 1fr) !important; grid-template-areas: "portrait details" !important; gap: 14px !important; align-items: start !important; min-height: 0 !important; height: auto !important; max-height: 100% !important; overflow: hidden !important; overflow-y: hidden !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-portrait-wrap { grid-area: portrait !important; position: relative !important; width: 100% !important; max-width: calc((100dvh - 44px - 16px - 36px - 8px - 12px) * 16 / 9) !important; margin: 0 !important; padding: 0 !important; aspect-ratio: 16 / 9 !important; height: auto !important; max-height: none !important; align-self: start !important; overflow: hidden !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast #achievementPortraitImage { width: 100% !important; height: 100% !important; object-fit: cover !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-seal { width: 26px !important; height: 26px !important; font-size: 12px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-success-signals, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-services, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-stub { display: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-success-details:not([hidden]), html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-success-share:not([hidden]) { grid-area: details !important; display: grid !important; gap: 5px !important; align-content: start !important; align-self: start !important; margin: 0 !important; padding: 8px 12px !important; min-height: 0 !important; height: auto !important; max-height: 100% !important; overflow: hidden !important; overflow-y: hidden !important; width: 100% !important; max-width: 100% !important; } /* both panels can be on screen together (details stays while sharing): stack them in the same column */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-success-details:not([hidden]) ~ .achievement-success-share:not([hidden]) { grid-area: auto !important; grid-column: 2 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-stage-layout:has(.achievement-success-share:not([hidden])) { grid-template-rows: auto auto !important; grid-template-areas: "portrait details" "portrait share" !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-stage-layout:has(.achievement-success-share:not([hidden])) .achievement-success-details:not([hidden]) { grid-area: details !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-stage-layout:has(.achievement-success-share:not([hidden])) .achievement-success-share:not([hidden]) { grid-area: share !important; grid-column: auto !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-success-eyebrow, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-success-description, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-success-steps, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-disclaimer { display: none !important; } /* the one-paragraph description fits while the panel is alone in its column; once the share panel joins it (after Mission Done) the room is gone */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-stage-layout:not(:has(.achievement-success-share:not([hidden]))) .achievement-success-description { display: block !important; font-size: var(--nv-kiosk-fs) !important; line-height: var(--nv-kiosk-lh) !important; margin: 0 !important; padding: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-badge-label { font-size: 11px !important; letter-spacing: .12em !important; line-height: 1.2 !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast #achievementTitle { font-size: clamp(14px, 4.2vh, 24px) !important; line-height: 1.1 !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast #achievementMessage, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast #achievementEmailStatus, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast #achievementShareText, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast #achievementShareStatus { font-size: var(--nv-kiosk-fs) !important; line-height: var(--nv-kiosk-lh) !important; margin: 0 !important; padding: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast #achievementMessage:empty, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast #achievementShareText:empty, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast #achievementShareStatus:empty { display: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-delivery-state { display: flex !important; align-items: flex-start !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; flex-wrap: wrap !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast #achievementEmailIndicator { width: 10px !important; height: 10px !important; min-width: 10px !important; margin-top: 3px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast #achievementShareTitle { font-size: clamp(12px, 3.4vh, 15px) !important; line-height: 1.15 !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-share-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; max-width: 420px !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-share-actions > button { width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast #missionDone { width: min(100%, 420px) !important; max-width: 420px !important; margin: 0 !important; justify-self: start !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-actions:not([hidden]) { grid-area: actions !important; display: flex !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; justify-content: flex-start !important; align-self: end !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast #restartExperience { width: min(100%, 420px) !important; max-width: 420px !important; margin: 0 !important; } /* ---- every band height (layout audit 2026-09-23): the Profile row, the reflection, the delivery form and the achievement card sit in the middle of the height they have instead of under the title with the rest of the screen empty (the quiz panel likewise in its column); "safe" keeps them top-aligned when they fill it ---- */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] #resultGrid, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-stage-main, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] #sendDetailsModal, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-stage-layout { align-self: safe center !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .generating-layout { align-content: safe center !important; } /* ---- touch floors (layout audit 2026-09-23): the achievement preview button and the inline privacy link keep their look but get a 44px / 32px hit area ---- */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-portrait-wrap .portrait-preview-trigger { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-portrait-wrap .portrait-preview-trigger::after { content: "" !important; position: absolute !important; inset: -6px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] #openPrivacyModal { padding: 9px 0 !important; margin: -9px 0 !important; } /* ---- guard: nothing above may resurrect a [hidden] element ---- */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [hidden] { display: none !important; } } /* Roomier part of the band: the Capture and Explore left columns have spare height from ~480px up, so their one-paragraph subtitles come back. */ @media (min-width: 640px) and (min-height: 480px) and (max-height: 640px), (min-width: 640px) and (min-height: 641px) and (max-height: 800px) and (orientation: landscape) { html body { --nv-kiosk-lh: 1.3; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .flow-subtitle, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .flow-subtitle { display: block !important; font-size: clamp(11px, 2.4vh, 14px) !important; line-height: 1.3 !important; margin: 4px 0 0 !important; max-width: 52ch !important; } } /* ---- Landscape screens 641-800px tall: 4:3 tablets and kiosks (1024x768), HD monitors (1280x720, 1366x768) and short laptops (1280x800, 1512x767). Outside the band these sizes used the tablet or desktop layout, whose quiz panel, reflection, delivery summary and achievement column all scrolled internally (100-500px hidden; three of five quiz options behind a scroll at 1280x720). They now take the band layout — nothing scrolls — with the type and controls scaled up for the taller screen (Nahira, 2026-09-21). ---- */ @media (min-width: 640px) and (min-height: 641px) and (max-height: 800px) and (orientation: landscape) { html body { --nv-kiosk-fs: clamp(15px, 2.2vh, 17px); --nv-kiosk-lh: 1.35; --nv-kiosk-cta-h: 56px; --nv-kiosk-title-fs: clamp(24px, 3.6vw, 36px); --nv-stage-pad-top: 12px; --nv-stage-pad-bottom: 12px; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .flow-subtitle, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .flow-subtitle { font-size: 15px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] #adviceHeadline { font-size: clamp(19px, 2.8vh, 22px) !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizQuestion { font-size: clamp(18px, 2.7vh, 21px) !important; } /* the 9px eyebrow sat 2px above the title */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stage-eyebrow { margin-bottom: 4px !important; } } /* ---- Short laptops and 4:3 screens, 641-800px tall (layout audit 2026-09-23, phase 3): the band layout was made for 360-640px and left 35-55% of these screens empty with 9-11px labels. Here the type and controls grow, each stage's block is centred in the height it has, and copy the band hides for lack of room comes back where it now fits: the direction bullets on Profile, the organization field on Delivery, the next steps on Achieved. ---- */ @media (min-width: 640px) and (min-height: 641px) and (max-height: 800px) and (orientation: landscape) { html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stage-eyebrow { font-size: 12.5px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .secure-processing-note { font-size: 13px !important; line-height: 1.4 !important; padding: 6px 10px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .camera-guide-instruction :is(.camera-guide-hint, .camera-guide-title) { font-size: 13px !important; } /* Explore: a larger question and answers, the panel centred in its column */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizPanel { padding: clamp(16px, 2.6vh, 24px) clamp(18px, 2vw, 28px) !important; row-gap: 14px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-title { font-size: 13px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizQuestion, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizQuestion > * { font-size: clamp(22px, 3.3vh, 26px) !important; line-height: 1.15 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizOptions { gap: 12px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizOptions .quiz-option { min-height: clamp(62px, 9vh, 72px) !important; padding: 10px 16px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizOptions .quiz-option-text { font-size: 17px !important; line-height: 1.3 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizOptions .quiz-option-index { font-size: 13px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .generation-portrait-count { font-size: 15px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-progress-meta, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-progress-meta span { font-size: 13px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-fact-step-category { font-size: 12px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-fact-step-source { font-size: 13px !important; } /* Profile: the direction bullets return under each title; the row is centred between title and button */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid :is(.portrait-direction-kicker, .portrait-direction-label) { font-size: 12px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .result-caption strong { font-size: 17px !important; line-height: 1.2 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .portrait-direction-points { display: grid !important; gap: 6px !important; margin: 6px 0 0 !important; padding: 0 !important; list-style: none !important; text-align: left !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .portrait-direction-points li { display: block !important; position: relative !important; padding-left: 13px !important; font-size: 14px !important; line-height: 1.38 !important; color: rgba(255, 255, 255, .8) !important; overflow: visible !important; -webkit-line-clamp: unset !important; white-space: normal !important; } /* Advice: larger reflection type, the three columns centred in the height */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-content:not([hidden]) { padding: 14px 18px !important; gap: 18px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-content > header > span, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] :is(.advice-signal-grid h3, .advice-next-steps h3) { font-size: 12.5px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] #adviceHeadline { font-size: clamp(22px, 3.3vh, 26px) !important; line-height: 1.15 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] :is(#adviceFitRationale, .advice-signal-grid p, .advice-next-steps li) { font-size: 17px !important; line-height: 1.45 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-signal-grid > section, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-next-steps { padding: 12px 14px !important; gap: 6px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-next-steps ol { gap: 8px !important; } /* Delivery: a larger portrait and form, the organization field back, centred */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] #sendDetailsModal { gap: 22px !important; grid-template-columns: minmax(150px, 0.9fr) minmax(0, 1.3fr) !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .delivery-summary { padding: 8px !important; gap: 8px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .delivery-summary-copy > span { font-size: 12px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] #deliveryPortraitTitle { font-size: 17px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .send-details-panel { padding: 16px 20px !important; gap: 12px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .send-details-header h2 { font-size: 22px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .send-details-form { gap: 12px 16px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .field-group { gap: 5px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .field-group:has(#company) { display: grid !important; grid-column: 1 / -1 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .field-group label { font-size: 12.5px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .field-group input { height: 50px !important; padding: 0 14px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .terms-row { gap: 10px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .terms-row .custom-checkbox { width: 20px !important; height: 20px !important; min-width: 20px !important; font-size: 13px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .terms-row .terms-copy { font-size: 14px !important; line-height: 1.4 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] :is(.field-group .field-error:not([hidden]), #terms-error:not([hidden]), #deliveryStatus) { font-size: 13px !important; } /* Achieved: a larger portrait, the badge copy and the next steps back */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-stage-layout { gap: 22px !important; grid-template-columns: minmax(150px, 1fr) minmax(0, 1.2fr) !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-badge-label { font-size: 12.5px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast #achievementTitle { font-size: clamp(24px, 3.6vh, 30px) !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-stage-layout:not(:has(.achievement-success-share:not([hidden]))) .achievement-success-description { font-size: 17px !important; line-height: 1.45 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast :is(#achievementMessage, #achievementEmailStatus, #achievementShareText, #achievementShareStatus) { font-size: 16px !important; line-height: 1.4 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-stage-layout:not(:has(.achievement-success-share:not([hidden]))) .achievement-success-steps { display: grid !important; gap: 6px !important; margin: 4px 0 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-success-steps :is(h2, h3, p, span, strong):first-child { font-size: 12.5px !important; letter-spacing: .12em !important; text-transform: uppercase !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast #achievementSteps { display: grid !important; gap: 6px !important; margin: 0 !important; padding: 0 0 0 18px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast #achievementSteps li { font-size: 15px !important; line-height: 1.4 !important; } } /* ---- Desktop, share state (after Mission Done): the share panel joins the portrait, direction cards and services in the left column, and at 1440-1512px the services list ran 60-105px past the bounded layout. The services block exists to fill an idle column; once the share panel is on screen the column is not idle. ---- */ @media (min-width: 1100px) and (min-height: 641px) { html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-stage-layout:has(.achievement-success-share:not([hidden])) .achievement-services { display: none !important; } } /* ---- Landing + Console Hero in the short-landscape band. landing.css is a frozen blob (qa_protected_baseline), so the band's geometry for the two screens before the experience lives here. At 853x395 the video-entry title (70px, three lines, positioned from the bottom) ran under the Start button and the hero's single-column layout put its CTA and phone hotspot below the fold — on a landscape kiosk the visitor could not start. ---- */ @media (min-width: 640px) and (max-height: 640px), (min-width: 640px) and (max-width: 1099px) and (min-height: 641px) and (max-height: 800px) and (orientation: landscape) { /* video entry: logo top-left, copy under it, the two buttons on one row at the bottom */ html body #videoEntry#videoEntry#videoEntry .video-entry-logo { position: absolute !important; top: 10px !important; left: 16px !important; right: auto !important; bottom: auto !important; height: clamp(34px, 11vh, 56px) !important; width: auto !important; max-width: none !important; margin: 0 !important; } html body #videoEntry#videoEntry#videoEntry .video-entry-copy { position: absolute !important; inset: auto !important; top: clamp(56px, 16vh, 80px) !important; left: 16px !important; right: 16px !important; bottom: clamp(62px, 19vh, 92px) !important; align-content: center !important; justify-items: center !important; width: auto !important; max-width: none !important; height: auto !important; display: grid !important; grid-template-rows: auto auto !important; grid-template-columns: minmax(0, 1fr) !important; gap: clamp(4px, 1.4vh, 10px) !important; margin: 0 !important; padding: 0 !important; transform: none !important; text-align: center !important; } html body #videoEntry#videoEntry#videoEntry .video-entry-title { font-size: clamp(26px, 11vh, 54px) !important; line-height: .98 !important; max-width: none !important; margin: 0 !important; height: auto !important; text-align: center !important; } html body #videoEntry#videoEntry#videoEntry .video-entry-subtitle { font-size: clamp(13px, 4vh, 19px) !important; line-height: 1.3 !important; max-width: 64ch !important; margin: 0 !important; height: auto !important; text-align: center !important; } html body #videoEntry#videoEntry#videoEntry .video-entry-actions { position: absolute !important; inset: auto !important; left: 16px !important; right: 16px !important; bottom: clamp(10px, 3vh, 18px) !important; top: auto !important; width: auto !important; height: auto !important; display: flex !important; flex-direction: row !important; justify-content: center !important; align-items: stretch !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; } html body #videoEntry#videoEntry#videoEntry .video-entry-button { height: clamp(40px, 12vh, 54px) !important; min-height: 0 !important; max-height: none !important; padding: 0 18px !important; font-size: clamp(13px, 3.8vh, 18px) !important; line-height: 1.1 !important; width: auto !important; min-width: 200px !important; max-width: 320px !important; flex: 0 1 auto !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* console hero: brand row, then copy | visual; the visual only when there is width for it */ html body #heroLayer#heroLayer#heroLayer { padding: 8px 12px !important; align-items: start !important; grid-template-rows: minmax(0, 1fr) !important; grid-template-columns: minmax(0, 1fr) !important; } html body #heroLayer#heroLayer#heroLayer .lab-hero-console { height: calc(100dvh - 16px) !important; max-height: calc(100dvh - 16px) !important; min-height: 0 !important; overflow: hidden !important; align-items: start !important; grid-template-rows: minmax(0, 1fr) !important; grid-template-columns: minmax(0, 1fr) !important; } html body #heroLayer#heroLayer#heroLayer .lab-hero-shell { display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) !important; grid-template-rows: auto minmax(0, 1fr) !important; grid-template-areas: "brand brand" "copy visual" !important; gap: clamp(4px, 1.6vh, 12px) clamp(14px, 2.4vw, 32px) !important; padding: 8px 16px 10px !important; height: 100% !important; max-height: 100% !important; min-height: 0 !important; overflow: hidden !important; align-items: start !important; align-content: start !important; justify-content: stretch !important; } html body #heroLayer#heroLayer#heroLayer .lab-hero-brand { grid-area: brand !important; position: relative !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; display: flex !important; align-items: center !important; gap: 12px !important; width: auto !important; height: auto !important; margin: 0 !important; grid-template-columns: none !important; grid-template-rows: none !important; } html body #heroLayer#heroLayer#heroLayer .lab-hero-logo { height: clamp(30px, 9vh, 44px) !important; width: auto !important; max-width: none !important; margin: 0 !important; } html body #heroLayer#heroLayer#heroLayer .lab-hero-brand > span { font-size: 10px !important; letter-spacing: .12em !important; line-height: 1.2 !important; } html body #heroLayer#heroLayer#heroLayer .lab-hero-copy { grid-area: copy !important; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto auto !important; gap: clamp(4px, 1.6vh, 12px) !important; padding: 0 !important; margin: 0 !important; height: auto !important; min-height: 0 !important; max-width: none !important; width: auto !important; transform: none !important; align-self: center !important; } html body #heroLayer#heroLayer#heroLayer .lab-hero-title { font-size: clamp(22px, 8vh, 40px) !important; line-height: .98 !important; max-width: none !important; width: auto !important; height: auto !important; margin: 0 !important; } html body #heroLayer#heroLayer#heroLayer .lab-hero-summary { font-size: clamp(12px, 3.4vh, 16px) !important; line-height: 1.3 !important; max-width: 52ch !important; margin: 0 !important; height: auto !important; } html body #heroLayer#heroLayer#heroLayer .lab-hero-actions { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; grid-template-columns: none !important; grid-template-rows: none !important; gap: 10px !important; height: auto !important; max-width: none !important; margin: 0 !important; } html body #heroLayer#heroLayer#heroLayer .lab-hero-action { height: clamp(38px, 11vh, 50px) !important; min-height: 0 !important; max-height: none !important; padding: 0 16px !important; font-size: clamp(12px, 3.5vh, 16px) !important; line-height: 1.1 !important; width: auto !important; min-width: 170px !important; margin: 0 !important; } html body #heroLayer#heroLayer#heroLayer .lab-hero-visual { grid-area: visual !important; display: block !important; align-self: center !important; justify-self: center !important; transform: none !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: 100% !important; min-height: 0 !important; grid-template-columns: none !important; grid-template-rows: none !important; overflow: hidden !important; } html body #heroLayer#heroLayer#heroLayer .lab-hero-visual-panel { display: block !important; position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: calc(100dvh - 110px) !important; aspect-ratio: 1 / 1 !important; overflow: hidden !important; margin: 0 auto !important; grid-template-columns: none !important; grid-template-rows: none !important; } html body #heroLayer#heroLayer#heroLayer .lab-hero-picture, html body #heroLayer#heroLayer#heroLayer .lab-hero-subject { display: block !important; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; margin: 0 !important; } html body #heroLayer#heroLayer#heroLayer .lab-hero-annotation { display: none !important; } /* the phone hotspot is positioned for the full-size hero; here the whole visual is the second way in */ html body #heroLayer#heroLayer#heroLayer #openExperience { position: absolute !important; inset: 0 !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; transform: none !important; margin: 0 !important; border-radius: 0 !important; } } @media (min-width: 640px) and (max-width: 899px) and (max-height: 640px), (min-width: 640px) and (max-width: 899px) and (min-height: 641px) and (max-height: 800px) and (orientation: landscape) { html body #heroLayer#heroLayer#heroLayer .lab-hero-shell { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "brand" "copy" !important; } html body #heroLayer#heroLayer#heroLayer .lab-hero-visual { display: none !important; } } /* ---- Portrait kiosk between 1100 and 1700px wide (1440x2560): the desktop two-column Explore put the hero-sized title in a ~580px column, and its longest word ran under the quiz panel. A portrait panel has height to spare, so Explore stacks: title, quiz panel, status. (1080x1920 is below the desktop breakpoint and already stacks; 2160x3840 is wide enough.) ---- */ @media (min-width: 1100px) and (max-width: 1700px) and (orientation: portrait) { html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-screen[data-screen="generating"] { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "header" "quiz" "status" !important; grid-template-rows: auto minmax(0, 1fr) auto !important; column-gap: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .generating-layout { grid-area: quiz !important; grid-column: auto !important; width: 100% !important; max-width: 100% !important; justify-self: stretch !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #exploreLoadingBar { grid-area: status !important; grid-column: auto !important; } } /* ---- Tablet band (768-1099px, 641px+ tall): the Profile card is image | caption, and the image wrapper stretched to the caption's height, so the 16:9 portrait was cropped (319x229 at 834x1112, 244x581 on a 1080x1920 vertical kiosk). Portraits are 16:9 everywhere: the wrapper keeps the ratio at a fixed share of the card and centres beside the caption. ---- */ @media (min-width: 768px) and (max-width: 1099px) and (min-height: 801px) { html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .result-card { flex-direction: row !important; align-items: center !important; height: auto !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .result-card-img-wrapper { aspect-ratio: 16 / 9 !important; width: clamp(220px, 42%, 360px) !important; height: auto !important; max-height: none !important; min-height: 0 !important; align-self: center !important; flex: 0 0 auto !important; } } /* ============================================================================ VERTICAL RAIL EVERYWHERE — 2026-09-21 (Nahira): "no top menu; the step rail sits at the side of the screen at every size, like the desktop — even on phone sizes". Below 1100px and in the short-landscape band the six steps used to share the header row with the logo (chips on phones, numbers only there). Now every size gets the desktop rail: a fixed column on the right, number + label for every step, the active step teal with a dot, the finished ones white, and the logo alone in the top-left corner, small. The stage reserves the rail's column (--nv-rail-w) on its right so no content runs under the labels; the layout harness (scripts/qa_phase13_layout_matrix.py, "rail") checks that. Tiers: phone (<768), tablet (768–1099, taller than the band) and the short-landscape band (>=640 wide, <=640 tall). Desktop >=1100 (taller than 640) keeps its own rail from experience-layout.css. ============================================================================ */ @media (max-width: 1099px), (min-width: 640px) and (max-height: 640px), (min-width: 640px) and (min-height: 641px) and (max-height: 800px) and (orientation: landscape) { html body { --nv-rail-w: 96px; --nv-rail-right: 12px; --nv-rail-top: 68px; --nv-rail-gap: 8px; --nv-rail-label-fs: 11.5px; --nv-rail-label-lh: 18px; --nv-rail-hit: 36px; --nv-rail-marker-fs: 9px; --nv-rail-dot: 6px; --nv-logo-w: 108px; --nv-logo-pad: 8px 0 0 14px; --nv-stage-pad-right: var(--nv-rail-w); } /* ---- the logo alone, top-left, no bar behind it ---- */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .modal-header { position: fixed !important; inset: auto !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; width: auto !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: var(--nv-logo-pad) !important; display: block !important; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 8 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .modal-logo { width: var(--nv-logo-w) !important; height: auto !important; max-width: none !important; max-height: none !important; object-fit: contain !important; object-position: left top !important; margin: 0 !important; } /* ---- the rail: a fixed column on the right ---- */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stepper { position: fixed !important; inset: auto !important; top: var(--nv-rail-top) !important; right: var(--nv-rail-right) !important; left: auto !important; bottom: auto !important; transform: none !important; width: auto !important; max-width: none !important; min-width: 0 !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; justify-content: flex-start !important; gap: var(--nv-rail-gap) !important; border: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 9 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stepper > li { display: block !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stepper .experience-stepper-track { display: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stepper-button { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 6px !important; padding: 0 !important; margin: 0 !important; min-height: var(--nv-rail-hit) !important; /* touch target: 44px pitch with the gap */ height: auto !important; min-width: 0 !important; width: auto !important; border: 0 !important; background: transparent !important; box-shadow: none !important; line-height: var(--nv-rail-label-lh) !important; white-space: nowrap !important; text-align: right !important; touch-action: manipulation !important; } /* every label is readable (the phone layer showed only the active one); the reachable/unreachable dimming lives further down in this block */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stepper > li.is-active .experience-stepper-button, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stepper > li.is-reachable .experience-stepper-button { opacity: 1 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stepper-marker { display: inline-block !important; order: 0 !important; width: auto !important; height: auto !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-family: var(--nanno-font-body, "Space Grotesk", sans-serif) !important; font-size: var(--nv-rail-marker-fs) !important; font-weight: 700 !important; letter-spacing: .1em !important; line-height: 1 !important; color: rgba(10, 186, 181, .8) !important; /* ≥4.5:1 on the dark shell */ } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stepper > li.is-active .experience-stepper-marker { color: var(--nv-accent, #0ABAB5) !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stepper > li.is-complete .experience-stepper-marker { color: rgba(10, 186, 181, .9) !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stepper-button span:last-child { display: inline !important; font-family: var(--nanno-font-body, "Space Grotesk", sans-serif) !important; font-size: var(--nv-rail-label-fs) !important; font-weight: 700 !important; letter-spacing: normal !important; text-transform: none !important; line-height: var(--nv-rail-label-lh) !important; color: rgba(255, 255, 255, .95) !important; text-shadow: 0 2px 14px rgba(0, 0, 0, .55) !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stepper > li.is-active .experience-stepper-button span:last-child { color: var(--nv-accent, #0ABAB5) !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stepper > li.is-active .experience-stepper-button::before { content: "" !important; display: inline-block !important; order: 0 !important; flex: 0 0 auto !important; align-self: center !important; width: var(--nv-rail-dot) !important; height: var(--nv-rail-dot) !important; border-radius: 50% !important; background: var(--nv-accent, #0ABAB5) !important; box-shadow: 0 0 0 2px rgba(10, 186, 181, .22) !important; margin: 0 !important; } /* ---- the stage keeps clear of the rail's column ---- */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-screen { padding-right: var(--nv-stage-pad-right) !important; } /* Reachable vs not (impeccable critique, P1): experience-flow.js marks every step a tap can go to with .is-reachable (anything the visitor has already reached, in either direction). Steps not yet reached — and a skipped stage — are quiet; steps already passed show a tick instead of their number, so "tappable" and "been there" both read at a glance. The active step keeps its dot. */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stepper > li:not(.is-active):not(.is-reachable) .experience-stepper-button { opacity: .42 !important; cursor: default !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stepper > li.is-reachable .experience-stepper-button { cursor: pointer !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stepper > li.is-complete .experience-stepper-marker { font-size: 0 !important; letter-spacing: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stepper > li.is-complete .experience-stepper-marker::before { content: "\2713" !important; font-size: var(--nv-rail-marker-fs) !important; font-weight: 700 !important; color: var(--nv-accent, #0ABAB5) !important; } } /* The chosen portrait never leaves the screen (impeccable critique, P1): where the stage layout has no room for the portrait panel — Advice on phones and in the landscape band, Delivery on phones — it docks as a 16:9 thumb at the foot of the rail column, which is reserved anyway, and the whole thumb opens the full-portrait lightbox. */ @media (max-width: 767px) and (min-height: 400px), (min-width: 640px) and (max-height: 640px), (min-width: 640px) and (min-height: 641px) and (max-height: 800px) and (orientation: landscape) { html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-portrait-panel { display: block !important; position: fixed !important; inset: auto !important; top: auto !important; left: auto !important; right: var(--nv-rail-right) !important; bottom: 12px !important; width: calc(var(--nv-rail-w) - 14px) !important; max-width: none !important; min-width: 0 !important; height: auto !important; max-height: none !important; min-height: 0 !important; aspect-ratio: 16 / 9 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid rgba(10, 186, 181, .65) !important; border-radius: 0 !important; background: #000 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .45) !important; z-index: 9 !important; transform: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-portrait-panel img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover !important; margin: 0 !important; border: 0 !important; } /* the whole thumb is the lightbox button; the expand glyph stays as a small corner hint and the keyboard ring hugs the thumb */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-portrait-panel .portrait-preview-trigger { position: absolute !important; inset: 0 !important; top: 0 !important; right: 0 !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: flex-end !important; justify-content: flex-end !important; opacity: 1 !important; background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #fff !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-portrait-panel .portrait-preview-trigger:hover { background: rgba(10, 186, 181, .12) !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-portrait-panel .portrait-preview-trigger::after { content: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-portrait-panel .portrait-preview-trigger svg { width: 12px !important; height: 12px !important; margin: 0 3px 3px 0 !important; opacity: .9 !important; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .9)) !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-portrait-panel .portrait-preview-trigger:focus-visible { outline: 2px solid var(--nv-accent, #0ABAB5) !important; outline-offset: -2px !important; } /* the "Selected direction" caption has no room on a thumb; the direction name is still the stage's own title copy */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-portrait-panel > div { display: none !important; } } @media (max-width: 767px) and (min-height: 400px) { html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .delivery-summary { display: block !important; position: fixed !important; inset: auto !important; top: auto !important; left: auto !important; right: var(--nv-rail-right) !important; bottom: 12px !important; width: calc(var(--nv-rail-w) - 14px) !important; max-width: none !important; min-width: 0 !important; height: auto !important; max-height: none !important; min-height: 0 !important; aspect-ratio: 16 / 9 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid rgba(10, 186, 181, .65) !important; border-radius: 0 !important; background: #000 !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .45) !important; z-index: 9 !important; transform: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .delivery-summary #deliveryPortraitImage { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover !important; margin: 0 !important; border: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .delivery-summary .delivery-summary-copy { display: none !important; } } /* Desktop rail (>=1100 wide, taller than the band) gets the same reachable/visited affordance; its geometry stays in experience-layout.css. */ @media (min-width: 1100px) and (min-height: 801px) { html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stepper > li:not(.is-active):not(.is-reachable) .experience-stepper-button { opacity: .42 !important; cursor: default !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stepper > li.is-reachable .experience-stepper-button { opacity: 1 !important; cursor: pointer !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stepper > li.is-complete .experience-stepper-marker { font-size: 0 !important; letter-spacing: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .experience-stepper > li.is-complete .experience-stepper-marker::before { content: "\2713" !important; font-size: 12px !important; font-weight: 700 !important; color: var(--nv-accent, #0ABAB5) !important; } } /* tablet: roomier rail, larger logo */ @media (min-width: 768px) and (max-width: 1099px) and (min-height: 801px) { html body { --nv-rail-w: 114px; --nv-rail-right: 16px; --nv-rail-top: 100px; --nv-rail-gap: 10px; --nv-rail-label-fs: 15px; --nv-rail-label-lh: 22px; --nv-rail-hit: 34px; --nv-rail-marker-fs: 10px; --nv-rail-dot: 8px; --nv-logo-w: 150px; --nv-logo-pad: 12px 0 0 24px; } } /* short-landscape band: the rail scales with the viewport height and the logo fits the 44px row the stage begins under */ @media (min-width: 640px) and (max-height: 640px), (min-width: 640px) and (min-height: 641px) and (max-height: 800px) and (orientation: landscape) { html body { --nv-rail-w: clamp(92px, calc(56px + 9vh), 116px); --nv-rail-right: 10px; --nv-rail-top: 50px; --nv-rail-gap: clamp(4px, 1.4vh, 8px); --nv-rail-label-fs: clamp(11px, 2.9vh, 13px); --nv-rail-label-lh: 1.25; --nv-rail-hit: clamp(32px, 8.5vh, 40px); --nv-rail-marker-fs: 10px; --nv-rail-dot: 5px; --nv-logo-w: auto; --nv-logo-pad: 5px 0 0 14px; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .modal-logo { height: clamp(28px, 5.2vh, 38px) !important; } } /* phone: the rail takes ~96px of a 390px screen, so the quiz options and the portrait titles get a third line instead of an ellipsis, and the card's "DIRECTION 01" kicker drops to one line to pay for it; inline field errors are one tight line each so three at once still fit the delivery panel */ @media (max-width: 767px) and (min-height: 641px) { html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .field-error:not([hidden]) { margin: 2px 0 0 !important; font-size: 11px !important; line-height: 1.25 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizOptions .quiz-option-text { -webkit-line-clamp: 3 !important; line-clamp: 3 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .result-card .portrait-direction-kicker { font-size: 13px !important; letter-spacing: .1em !important; line-height: 1.2 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #resultGrid .result-card .result-caption strong { -webkit-line-clamp: 3 !important; line-clamp: 3 !important; } } /* the narrowest landscape kiosks (640–759px wide) lose ~90px to the rail: Explore gives the quiz panel more of the width and Advice packs its three columns tighter */ @media (min-width: 640px) and (max-width: 759px) and (max-height: 640px) { html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-screen[data-screen="generating"] { grid-template-columns: minmax(172px, 0.8fr) minmax(0, 1.8fr) !important; column-gap: 12px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizPanel { padding: clamp(6px, 1.6vh, 12px) clamp(8px, 1.2vw, 14px) !important; gap: clamp(5px, 1.4vh, 10px) !important; row-gap: clamp(5px, 1.4vh, 10px) !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizOptions { gap: clamp(4px, 1.2vh, 8px) !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizOptions .quiz-option { padding: clamp(3px, 1vh, 7px) clamp(6px, 1.2vw, 12px) !important; min-height: clamp(26px, 8vh, 52px) !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-content:not([hidden]) { grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.33fr) minmax(0, 1.18fr) !important; gap: 6px !important; padding: 3px 4px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-signal-grid { gap: 6px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-signal-grid > section, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-next-steps { padding: 3px 5px !important; } } /* tablet: the quiz panel lost ~100px of width to the rail and its 34px question ran to three lines, pushing the fifth option under the panel's edge — a smaller question and tighter option gaps keep all five in view */ @media (min-width: 768px) and (max-width: 1099px) and (min-height: 801px) { html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizQuestion strong { font-size: clamp(22px, 3.2vw, 27px) !important; line-height: 1.12 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-kicker { font-size: 15px !important; line-height: 1.3 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizOptions { gap: 8px !important; } } /* The shortest band (≤400px tall, 640x360 phones on their side): with the 11px text floor the next-steps column of a long reflection was 23px too tall and the delivery form with its inline errors 6px too tall. The three columns are rebalanced toward the signals and the steps (this block sits after the narrow-kiosk tier on purpose) and the line height tightens a little. */ @media (min-width: 640px) and (max-height: 400px) { html body { --nv-kiosk-lh: 1.15; --nv-kiosk-title-fs: 19px; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-content:not([hidden]) { padding-top: 3px !important; padding-bottom: 3px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-content:not([hidden]) { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.43fr) minmax(0, 1.3fr) !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-content > header > span { display: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-next-steps ol { gap: 2px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] :is(.advice-signal-grid h3, .advice-next-steps h3, .advice-content > header > span) { letter-spacing: .06em !important; } /* the form's own heading repeats the stage title; with inline errors showing it no longer fits */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .send-details-header { display: none !important; } } /* 641-800px tall: the rail has room for 11px step numbers (after the rail section, which sets 10px) */ @media (min-width: 640px) and (min-height: 641px) and (max-height: 800px) and (orientation: landscape) { html body { --nv-rail-marker-fs: 11px; } } /* ============================================================================ STAGE TITLES, EYEBROWS AND STAGE BUTTONS — one system at every size (layout audit 2026-09-23, phase 4). Nahira: the six stage titles are Bayon at every size, at one size per screen class (they were Space Grotesk on phones, tablets and the band, and 28-103px Bayon on desktop depending on the stage); the second line is always the accent; stage buttons are in capitals (landing and hero keep Title Case); Start comes before Visit. ============================================================================ */ html body { --nv-stage-title-fs: clamp(40px, 4.6vh, 56px); --nv-stage-eyebrow-fs: 14px; } @media (min-width: 640px) and (max-width: 1099px) { html body { --nv-stage-title-fs: 40px; --nv-stage-eyebrow-fs: 13px; } } @media (min-width: 640px) and (max-width: 1099px) and (min-height: 801px) { html body { --nv-stage-title-fs: 46px; } } @media (max-width: 639px) { html body { --nv-stage-title-fs: min(32px, 7.8vw); --nv-stage-eyebrow-fs: 12px; } } @media (max-width: 639px) and (max-height: 720px) { html body { --nv-stage-title-fs: min(26px, 7.2vw); } } @media (min-width: 640px) and (max-height: 640px), (min-width: 640px) and (min-height: 641px) and (max-height: 800px) and (orientation: landscape) { html body { --nv-stage-title-fs: var(--nv-kiosk-title-fs); --nv-stage-eyebrow-fs: 11px; } } @media (min-width: 640px) and (min-height: 641px) and (max-height: 800px) and (orientation: landscape) { html body { --nv-stage-eyebrow-fs: 12.5px; } } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-screen .flow-title { font-family: var(--nv-font-display, "Bayon", sans-serif) !important; font-size: var(--nv-stage-title-fs) !important; font-weight: 400 !important; font-synthesis: none !important; line-height: 1.04 !important; letter-spacing: .01em !important; text-transform: uppercase !important; overflow: visible !important; text-wrap: wrap !important; /* a soft dark halo keeps the accent line readable where the video behind it is bright */ text-shadow: 0 2px 14px rgba(0, 0, 0, .5) !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-screen .flow-title > :is(span, strong) { font: inherit !important; font-synthesis: none !important; letter-spacing: inherit !important; line-height: inherit !important; text-transform: inherit !important; margin: 0 !important; text-shadow: inherit !important; } /* the desktop "title ladder" blew the first line of the accent up to hero size on some stages only */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-screen .flow-title > :is(span, strong)::first-line { font-size: inherit !important; color: inherit !important; font-weight: 400 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-screen .flow-title > span { color: #fff !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-screen .flow-title > strong { color: var(--nv-accent, #0ABAB5) !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-screen .experience-stage-eyebrow { font-size: var(--nv-stage-eyebrow-fs) !important; font-weight: 500 !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--nv-accent, #0ABAB5) !important; text-shadow: 0 1px 8px rgba(0, 0, 0, .65) !important; margin-bottom: 6px !important; } @media (min-width: 640px) and (max-height: 640px), (min-width: 640px) and (min-height: 641px) and (max-height: 800px) and (orientation: landscape) { html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-screen .experience-stage-eyebrow { margin-bottom: 4px !important; } /* the band's titles are mostly one line; Bayon capitals ink 0.78em, so 1.0 still leaves a clear gap */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-screen .flow-title { line-height: 1 !important; } } /* stage buttons in capitals (quiz answers, the inline privacy link, the rail and the preview buttons are not stage buttons) */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-screen :is(.primary-button, .secondary-button, .text-button, .nv-flow-button):not(.quiz-option):not(.inline-privacy-link):not(.portrait-preview-trigger):not(.experience-stepper-button) { text-transform: uppercase !important; letter-spacing: .04em !important; } /* the achievement share row on a phone: two small buttons side by side keep their label on one line */ @media (max-width: 639px) { html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-share-actions > :is(button, a) { white-space: nowrap !important; letter-spacing: .02em !important; padding-left: 6px !important; padding-right: 6px !important; } } /* landing: Start first, Visit second (the desktop row had them the other way round) */ html body #videoEntry#videoEntry#videoEntry #startBtn { order: 1 !important; } html body #videoEntry#videoEntry#videoEntry .video-entry-button-secondary { order: 2 !important; } /* tablet portrait: "Start Your Experience" broke in two inside a 280px button */ @media (min-width: 640px) and (max-width: 1099px) and (min-height: 801px) { html body #videoEntry#videoEntry#videoEntry .video-entry-button { width: min(360px, 100%) !important; max-width: min(360px, 100%) !important; white-space: nowrap !important; } } /* ---- Tablet portrait, 640-1099 wide and taller than 800 (layout audit, phase 4) ---- */ @media (min-width: 640px) and (max-width: 1099px) and (min-height: 801px) { /* Capture: the camera sat in the top-right corner at ~275x366 with the lower third empty. Title and instructions now run full width, the 3:4 camera takes the height that is left, and the two actions share one row under it. */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) auto auto !important; grid-template-areas: "header" "camera" "actions" "status" !important; align-content: stretch !important; row-gap: 16px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .camera-frame { grid-area: camera !important; justify-self: center !important; align-self: stretch !important; height: 100% !important; max-height: 100% !important; min-height: 0 !important; width: auto !important; max-width: 100% !important; aspect-ratio: 3 / 4 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .screen-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; align-self: end !important; width: 100% !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .screen-actions > :is(.primary-button, .secondary-button) { width: 100% !important; max-width: none !important; white-space: nowrap !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .capture-secondary-actions { grid-column: 1 / -1 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] .secure-processing-note { font-size: 14px !important; line-height: 1.45 !important; max-width: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="capture"] #captureSubtitle { font-size: 17px !important; max-width: 60ch !important; } /* Hero: the portrait-shaped picture sat in a wide black box; the frame now takes the picture's shape */ html body #heroLayer#heroLayer#heroLayer .lab-hero-visual { display: flex !important; justify-content: center !important; } html body #heroLayer#heroLayer#heroLayer .lab-hero-visual-frame { width: auto !important; max-width: 100% !important; height: 36vh !important; max-height: 100% !important; aspect-ratio: 941 / 1672 !important; margin-inline: auto !important; background: transparent !important; } html body #heroLayer#heroLayer#heroLayer .lab-hero-subject { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* Advice: the reflection column is ~370px wide here, so its two signal cards stack instead of running two or three words a line; "What you told us" matches the other section labels */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] .advice-signal-grid { grid-template-columns: minmax(0, 1fr) !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="personalized-advice"] #adviceRecapTitle { font-size: 12.5px !important; letter-spacing: .14em !important; text-transform: uppercase !important; line-height: 1.3 !important; } } /* ---- Desktop, 1100 wide and taller than 800 (layout audit, phase 4): the three portraits were 232px-wide columns 647px tall with the lower half empty; they are now three rows, each a 16:9 picture beside its title and bullets ---- */ @media (min-width: 1100px) and (min-height: 801px) and (orientation: landscape) { html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] #resultGrid { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: auto !important; gap: 10px !important; align-content: stretch !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] #resultGrid .result-card { display: grid !important; grid-template-columns: minmax(0, 42%) minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; align-items: center !important; gap: 18px !important; padding: 8px !important; height: auto !important; min-height: 0 !important; overflow: hidden !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] #resultGrid .result-card-img-wrapper { width: 100% !important; height: auto !important; max-height: 100% !important; aspect-ratio: 16 / 9 !important; align-self: center !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] #resultGrid .result-caption { display: grid !important; align-content: safe center !important; justify-items: start !important; text-align: left !important; gap: 6px !important; padding: 0 8px 0 0 !important; height: auto !important; min-height: 0 !important; background: none !important; border: 0 !important; } /* the title names the direction; its "Direction 0X" tag gave way to the bullets */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] #resultGrid .portrait-direction-label { display: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] #resultGrid .result-caption > strong { font-size: clamp(17px, 1.9vh, 22px) !important; line-height: 1.2 !important; text-align: left !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] #resultGrid .portrait-direction-points { display: grid !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] #resultGrid .portrait-direction-points li { display: block !important; position: relative !important; padding-left: 13px !important; font-size: clamp(14px, 1.55vh, 17px) !important; line-height: 1.36 !important; color: rgba(255, 255, 255, .82) !important; overflow: visible !important; -webkit-line-clamp: unset !important; white-space: normal !important; } } /* ≤400px tall (after the title system above, which sets the band eyebrow gap) */ @media (min-width: 640px) and (max-height: 400px) { html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog .flow-screen .experience-stage-eyebrow { margin-bottom: 2px !important; } } /* ============================================================================ TALL PORTRAIT KIOSK, 768-1099 wide and 16:10 or taller (layout audit 2026-09-23, phase 5). A 1080x1920 / 1440x2560 / 2160x3840 kiosk is laid out at 810x1440 by js/kiosk-viewport.js and scaled up by the browser; a desktop browser at 1080x1920 lands here directly. The tablet layout gave every stage its top third and left the rest empty: the quiz and the delivery form now sit in the middle, the answers and the form grow, the three portraits become rows with their bullets, and the services list on Achieved gets a card instead of raw text. ============================================================================ */ @media (min-width: 768px) and (max-width: 1099px) and (min-height: 1200px) and (max-aspect-ratio: 5/8) { /* Explore */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .generating-layout { grid-template-rows: auto !important; grid-auto-rows: auto !important; align-content: safe center !important; align-self: stretch !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizPanel { padding: 28px 30px !important; row-gap: 18px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizQuestion, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizQuestion > * { font-size: 30px !important; line-height: 1.15 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizOptions { gap: 14px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizOptions .quiz-option { min-height: 78px !important; padding: 14px 20px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizOptions .quiz-option-text { font-size: 20px !important; line-height: 1.3 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] #quizOptions .quiz-option-index { font-size: 14px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .generation-portrait-count { font-size: 18px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-progress-meta, html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="generating"] .quiz-progress-meta span { font-size: 15px !important; } /* Profile: title on top (at 1080 wide the stage had gone to header | portraits columns), then three rows, a 16:9 picture beside its title and bullets */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] .result-review-stage { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) auto auto !important; grid-template-areas: "profile-header" "portraits" "profile-status" "profile-actions" !important; row-gap: 18px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] .result-review-header { grid-area: profile-header !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] #resultGrid { grid-area: portraits !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] .portrait-discovery-status { grid-area: profile-status !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] .result-review-actions { grid-area: profile-actions !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] #resultGrid { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: auto !important; gap: 16px !important; align-content: stretch !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] #resultGrid .result-card { display: grid !important; grid-template-columns: minmax(0, 48%) minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; align-items: center !important; gap: 18px !important; padding: 10px !important; height: auto !important; min-height: 0 !important; overflow: hidden !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] #resultGrid .result-card-img-wrapper { width: 100% !important; height: auto !important; max-height: 100% !important; aspect-ratio: 16 / 9 !important; align-self: center !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] #resultGrid .result-caption { display: grid !important; align-content: safe center !important; justify-items: start !important; text-align: left !important; gap: 6px !important; padding: 0 8px 0 0 !important; height: auto !important; min-height: 0 !important; background: none !important; border: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] #resultGrid .portrait-direction-label { font-size: 13px !important; text-align: left !important; justify-self: start !important; margin: 0 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] #resultGrid .result-caption > strong { font-size: 19px !important; line-height: 1.2 !important; text-align: left !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] #resultGrid .portrait-direction-points { display: grid !important; gap: 5px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="portrait-discovery"] #resultGrid .portrait-direction-points li { display: block !important; position: relative !important; padding-left: 13px !important; font-size: 14.5px !important; line-height: 1.38 !important; color: rgba(255, 255, 255, .82) !important; overflow: visible !important; -webkit-line-clamp: unset !important; white-space: normal !important; } /* Delivery: larger fields, the block centred in the height */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] #sendDetailsModal { align-items: safe center !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] #sendDetailsModal > .send-details-panel { align-self: safe center !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .send-details-header h2 { font-size: 26px !important; line-height: 1.15 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .field-group label { font-size: 13px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .field-group input { height: 58px !important; min-height: 58px !important; font-size: 18px !important; padding: 0 16px !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .terms-row .terms-copy { font-size: 16px !important; line-height: 1.45 !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog [data-screen="delivery"] .terms-row .custom-checkbox { width: 22px !important; height: 22px !important; min-width: 22px !important; } /* Achieved: the services list as a card */ html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-services { display: grid !important; gap: 8px !important; margin: 0 !important; padding: 14px 18px !important; background: rgba(5, 10, 11, .55) !important; border: 1px solid rgba(255, 255, 255, .14) !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-services-label { font-size: 12.5px !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--nv-accent, #0ABAB5) !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-services ul { display: grid !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-services li { font-size: 16px !important; line-height: 1.4 !important; padding-left: 14px !important; position: relative !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-services li::before { content: "" !important; position: absolute !important; left: 0 !important; top: .6em !important; width: 5px !important; height: 5px !important; background: var(--nv-accent, #0ABAB5) !important; } html body #portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog#portraitDialog #successToast .achievement-services a { color: #fff !important; text-decoration: none !important; border-bottom: 1px solid rgba(10, 186, 181, .5) !important; } } /* Load sentinel: js/css-guard.js reloads this file when this last rule is missing (a truncated download). Keep it last. */ html { --nv-css-end-kiosk: 1; }