/*
 * Six-stage viewport contract.
 * Loaded last so every experience stage stays inside one viewport with no
 * page or nested scrollbars. Generated portraits are landscape assets and are
 * always presented with object-fit: contain.
 */

:root {
  --experience-header-height: clamp(78px, 10dvh, 104px);
  --experience-page-gutter: clamp(16px, 3vw, 44px);
  --experience-stage-gap: clamp(8px, 1.4dvh, 16px);
}

html,
body,
.portrait-dialog[open],
.portrait-dialog[open] .modal-shell {
  width: 100%;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  overflow: hidden !important;
  overscroll-behavior: none;
}

body:is(
  [data-flow-state="capture"],
  [data-flow-state="generating"],
  [data-flow-state="portrait-discovery"],
  [data-flow-state="personalized-advice"],
  [data-flow-state="delivery"],
  [data-flow-state="achievement"]
) .modal-shell {
  display: grid !important;
  grid-template-columns: clamp(190px, 20vw, 250px) minmax(0, 1fr) !important;
  grid-template-rows: var(--experience-header-height) minmax(0, 1fr) !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
}

body:is(
  [data-flow-state="capture"],
  [data-flow-state="generating"],
  [data-flow-state="portrait-discovery"],
  [data-flow-state="personalized-advice"],
  [data-flow-state="delivery"],
  [data-flow-state="achievement"]
) .modal-header {
  position: relative !important;
  inset: auto !important;
  grid-column: 1;
  grid-row: 1;
  display: grid;
  align-items: center;
  min-width: 0;
  padding: 12px 16px 10px 28px !important;
}

body:is(
  [data-flow-state="capture"],
  [data-flow-state="generating"],
  [data-flow-state="portrait-discovery"],
  [data-flow-state="personalized-advice"],
  [data-flow-state="delivery"],
  [data-flow-state="achievement"]
) .modal-logo {
  position: relative !important;
  inset: auto !important;
  width: min(var(--nanno-logo-size-desktop, 210px), 100%) !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: contain !important;
}

.experience-stepper {
  position: relative !important;
  inset: auto !important;
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  align-self: center;
  width: min(100%, 900px) !important;
  margin: 0 auto !important;
  padding: 0 clamp(12px, 2vw, 26px) !important;
  transform: none !important;
}

.experience-stepper-button {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.experience-stepper-button:disabled {
  cursor: default;
}

.experience-stepper li.is-complete .experience-stepper-button:not(:disabled):is(:hover, :focus-visible) {
  color: var(--nv-accent);
}

.experience-stepper-track {
  left: calc(100% / 12) !important;
  right: calc(100% / 12) !important;
}

body:is(
  [data-flow-state="capture"],
  [data-flow-state="generating"],
  [data-flow-state="portrait-discovery"],
  [data-flow-state="personalized-advice"],
  [data-flow-state="delivery"],
  [data-flow-state="achievement"]
) .flow-screen.is-active {
  position: relative !important;
  inset: auto !important;
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  padding: clamp(10px, 1.6dvh, 18px) var(--experience-page-gutter)
    calc(clamp(10px, 1.6dvh, 18px) + env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
  scrollbar-width: none;
  box-sizing: border-box;
}

.flow-screen.is-active :is(.flow-title, .flow-subtitle, .experience-stage-header) {
  position: relative !important;
  inset: auto !important;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  transform: none !important;
}

.flow-screen.is-active :is(img, video, canvas) {
  max-width: 100%;
}

/* Capture */
body[data-flow-state="capture"] [data-screen="capture"].flow-screen.is-active {
  display: grid !important;
  grid-template-columns: minmax(280px, .82fr) minmax(330px, 1.18fr) !important;
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "title camera"
    "subtitle camera"
    "status camera"
    "actions camera" !important;
  align-content: center !important;
  align-items: center;
  gap: clamp(6px, 1.1dvh, 12px) clamp(28px, 5vw, 76px) !important;
}

body[data-flow-state="capture"] [data-screen="capture"] :is(.flow-title, .flow-subtitle, .camera-status, .screen-actions) {
  width: min(100%, 520px) !important;
  text-align: left !important;
}

body[data-flow-state="capture"] [data-screen="capture"] .flow-title {
  grid-area: title;
  align-self: end;
  font-size: clamp(38px, 4.5vw, 62px) !important;
  line-height: .92 !important;
  white-space: normal !important;
}

body[data-flow-state="capture"] [data-screen="capture"] .flow-subtitle {
  grid-area: subtitle;
  font-size: clamp(13px, 1.2vw, 17px) !important;
  line-height: 1.4 !important;
}

body[data-flow-state="capture"] [data-screen="capture"] .camera-status {
  grid-area: status;
  max-height: 42px;
  overflow: hidden !important;
}

body[data-flow-state="capture"] [data-screen="capture"] .screen-actions {
  grid-area: actions;
  align-self: start;
}

body[data-flow-state="capture"] [data-screen="capture"] .camera-frame {
  position: relative !important;
  inset: auto !important;
  grid-area: camera;
  align-self: center;
  justify-self: center;
  width: min(100%, 420px, 48dvh) !important;
  height: auto !important;
  max-height: calc(100dvh - var(--experience-header-height) - 32px) !important;
  margin: 0 !important;
  aspect-ratio: 3 / 4 !important;
  transform: none !important;
  overflow: hidden !important;
}

body[data-flow-state="capture"] .camera-framing-assistant,
body[data-flow-state="capture"] .camera-guide,
body[data-flow-state="capture"] .camera-guide-silhouette-window {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body[data-flow-state="capture"] .camera-guide-silhouette {
  position: absolute !important;
  inset: 4% 4% 14% !important;
  width: 92% !important;
  height: 82% !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

body[data-flow-state="capture"] .camera-guide-instruction {
  right: 5% !important;
  bottom: 4% !important;
  left: 5% !important;
  width: auto !important;
  max-width: 90% !important;
  max-height: 30% !important;
  overflow: hidden !important;
}

/* Explore */
body[data-flow-state="generating"] [data-screen="generating"].flow-screen.is-active {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  align-content: stretch !important;
  gap: clamp(5px, 1dvh, 10px) !important;
}

body[data-flow-state="generating"] [data-screen="generating"] .flow-title {
  width: 100%;
  font-size: clamp(30px, 4vw, 54px) !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

body[data-flow-state="generating"] [data-screen="generating"] .flow-title br {
  display: none;
}

body[data-flow-state="generating"] [data-screen="generating"] .flow-title span::after {
  content: " ";
}

body[data-flow-state="generating"] [data-screen="generating"] .flow-subtitle {
  text-align: center !important;
}

body[data-flow-state="generating"] .generating-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .7fr) !important;
  width: min(100%, 1280px) !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  gap: clamp(12px, 2vw, 24px) !important;
  overflow: hidden !important;
}

body[data-flow-state="generating"] :is(.quiz-panel, .generation-status-panel) {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

body[data-flow-state="generating"] .quiz-panel {
  display: grid !important;
  grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr) auto auto !important;
  align-content: start;
  gap: clamp(4px, .7dvh, 8px) !important;
  padding: clamp(12px, 1.6vw, 22px) !important;
}

body[data-flow-state="generating"] .quiz-title {
  font-size: clamp(22px, 2.2vw, 34px) !important;
}

body[data-flow-state="generating"] .quiz-idle-fact {
  min-height: 0;
  padding: clamp(9px, 1vw, 14px) !important;
}

body[data-flow-state="generating"] .quiz-idle-fact strong {
  font-size: clamp(19px, 1.8vw, 28px) !important;
}

body[data-flow-state="generating"] .quiz-options {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start;
  gap: 6px !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

body[data-flow-state="generating"] .quiz-option {
  min-height: 42px !important;
  padding: 8px 12px !important;
}

body[data-flow-state="generating"] .generation-status-panel {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(90px, .9fr) auto auto auto !important;
  align-content: center !important;
  padding: clamp(12px, 2vw, 22px) !important;
}

body[data-flow-state="generating"] .generator-ring {
  width: clamp(110px, 14dvh, 165px) !important;
  height: clamp(110px, 14dvh, 165px) !important;
}

body[data-flow-state="generating"] .privacy-note {
  justify-self: stretch !important;
  text-align: left !important;
}

/* Merged Profile + Portrait */
body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"].flow-screen.is-active {
  display: grid !important;
  place-items: stretch !important;
}

body[data-flow-state="portrait-discovery"] .result-review-stage {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto !important;
  width: min(100%, 1360px) !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  gap: clamp(5px, .9dvh, 10px) !important;
  overflow: hidden !important;
}

body[data-flow-state="portrait-discovery"] .result-review-header {
  display: grid;
  gap: 3px !important;
}

body[data-flow-state="portrait-discovery"] .result-review-header .flow-title {
  font-size: clamp(27px, 3.6vw, 48px) !important;
  line-height: .94 !important;
}

body[data-flow-state="portrait-discovery"] .result-review-header .flow-subtitle {
  font-size: clamp(11px, 1.15vw, 15px) !important;
}

body[data-flow-state="portrait-discovery"] .result-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: clamp(10px, 1.4vw, 18px) !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body[data-flow-state="portrait-discovery"] .portrait-discovery-card {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

body[data-flow-state="portrait-discovery"] .result-card-img-wrapper {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  background: #071012;
  overflow: hidden !important;
}

body[data-flow-state="portrait-discovery"] .result-card-img-wrapper img {
  position: relative !important;
  inset: auto !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-caption {
  display: block !important;
  gap: 3px !important;
  min-height: 0 !important;
  max-width: 100% !important;
  padding: clamp(7px, 1vw, 12px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-caption strong {
  display: -webkit-box;
  max-width: 100% !important;
  overflow: hidden !important;
  font-size: clamp(18px, 1.75vw, 28px) !important;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-caption p {
  display: -webkit-box;
  overflow: hidden !important;
  font-size: clamp(10px, .85vw, 12px) !important;
  line-height: 1.3 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body[data-flow-state="portrait-discovery"] .profile-report {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center;
  gap: 8px 16px !important;
  min-height: 0 !important;
  max-height: 104px !important;
  padding: 8px 12px !important;
  overflow: hidden !important;
}

body[data-flow-state="portrait-discovery"] .profile-report[hidden] {
  display: none !important;
}

body[data-flow-state="portrait-discovery"] .profile-report :is(.quiz-report-header, .quiz-report-profile, .quiz-relative-profile) {
  padding: 0 !important;
  border: 0 !important;
}

body[data-flow-state="portrait-discovery"] .profile-report .quiz-report-profile strong {
  font-size: clamp(21px, 2vw, 30px) !important;
}

body[data-flow-state="portrait-discovery"] .profile-report :is(.quiz-report-summary, .quiz-report-secondary, .quiz-relative-summary, .quiz-report-disclaimer) {
  margin: 0 !important;
  font-size: clamp(9px, .85vw, 12px) !important;
  line-height: 1.3 !important;
}

body[data-flow-state="portrait-discovery"] .profile-report .quiz-report-disclaimer {
  grid-column: 1 / -1;
}

body[data-flow-state="portrait-discovery"] .portrait-discovery-status {
  min-height: 15px !important;
  font-size: 11px !important;
}

body[data-flow-state="portrait-discovery"] .result-review-actions {
  display: grid !important;
  grid-template-columns: minmax(140px, .4fr) minmax(230px, 1fr) !important;
  justify-content: center;
  gap: 10px !important;
}

body[data-flow-state="portrait-discovery"] #openSendDetails {
  grid-column: 2 !important;
}

/* Advice: landscape image first, concise text second. */
body[data-flow-state="personalized-advice"] [data-screen="personalized-advice"].flow-screen.is-active {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-content: stretch !important;
  gap: var(--experience-stage-gap) !important;
}

body[data-flow-state="personalized-advice"] .experience-stage-header {
  display: grid;
  gap: 2px !important;
}

body[data-flow-state="personalized-advice"] .experience-stage-header .flow-title {
  font-size: clamp(28px, 4vw, 50px) !important;
  line-height: .94 !important;
}

body[data-flow-state="personalized-advice"] .advice-stage-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(160px, 42%) minmax(0, 1fr) !important;
  width: min(100%, 1260px) !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  gap: 10px !important;
  overflow: hidden !important;
}

body[data-flow-state="personalized-advice"] .advice-portrait-panel {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

body[data-flow-state="personalized-advice"] .advice-portrait-panel img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #071012;
}

body[data-flow-state="personalized-advice"] :is(.advice-stage-main, .advice-content, .advice-loading, .advice-error) {
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body[data-flow-state="personalized-advice"] .advice-content {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-content: start;
  gap: 8px !important;
  padding: clamp(10px, 1.2vw, 16px) !important;
}

body[data-flow-state="personalized-advice"] .advice-content[hidden] {
  display: none !important;
}

body[data-flow-state="personalized-advice"] .advice-content > header,
body[data-flow-state="personalized-advice"] .advice-next-steps,
body[data-flow-state="personalized-advice"] .advice-disclaimer {
  grid-column: 1 / -1;
}

body[data-flow-state="personalized-advice"] .advice-signal-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-column: 1 / -1;
  gap: 8px !important;
}

body[data-flow-state="personalized-advice"] .advice-content :is(p, li) {
  font-size: clamp(10px, .9vw, 13px) !important;
  line-height: 1.3 !important;
}

body[data-flow-state="personalized-advice"] .advice-content h2 {
  font-size: clamp(24px, 2.6vw, 38px) !important;
}

body[data-flow-state="personalized-advice"] .advice-actions {
  display: grid !important;
  grid-template-columns: minmax(140px, .3fr) minmax(240px, 1fr) !important;
  gap: 10px !important;
  width: min(100%, 1260px) !important;
  margin: 0 auto !important;
}

/* Delivery */
body[data-flow-state="delivery"] [data-screen="delivery"].flow-screen.is-active {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: var(--experience-stage-gap) !important;
}

body[data-flow-state="delivery"] .delivery-stage-header {
  display: grid;
  gap: 2px;
}

body[data-flow-state="delivery"] .delivery-stage-header .flow-title {
  font-size: clamp(28px, 4vw, 50px) !important;
  line-height: .94 !important;
}

body[data-flow-state="delivery"] .delivery-stage-layout {
  display: grid !important;
  grid-template-columns: minmax(300px, .75fr) minmax(0, 1.4fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  width: min(100%, 1320px) !important;
  margin: 0 auto !important;
  gap: clamp(12px, 2vw, 24px) !important;
  overflow: hidden !important;
}

body[data-flow-state="delivery"] :is(.delivery-summary, .send-details-panel, .send-details-form, .delivery-summary-copy) {
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body[data-flow-state="delivery"] .delivery-summary {
  display: grid !important;
  grid-template-rows: minmax(120px, 46%) minmax(0, 1fr) !important;
}

body[data-flow-state="delivery"] .delivery-summary > img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #071012;
}

body[data-flow-state="delivery"] .delivery-summary-copy {
  padding: clamp(10px, 1.4vw, 18px) !important;
}

body[data-flow-state="delivery"] .delivery-summary-copy :is(p, section) {
  padding-block: 6px !important;
}

body[data-flow-state="delivery"] .delivery-summary-copy ol {
  font-size: clamp(10px, .85vw, 12px) !important;
  line-height: 1.3 !important;
}

body[data-flow-state="delivery"] .send-details-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  align-content: start;
  padding: clamp(12px, 1.7vw, 22px) !important;
}

body[data-flow-state="delivery"] .send-details-brand {
  display: none !important;
}

body[data-flow-state="delivery"] .send-details-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start;
  gap: clamp(7px, 1dvh, 12px) clamp(10px, 1vw, 14px) !important;
}

body[data-flow-state="delivery"] .send-details-form .field-group:nth-of-type(3) {
  grid-column: 1 / -1;
}

body[data-flow-state="delivery"] .send-details-form :is(.terms-row, .delivery-status, .primary-button) {
  grid-column: 1 / -1;
}

body[data-flow-state="delivery"] .field-group input {
  min-height: 44px !important;
  padding: 9px 12px !important;
}

body[data-flow-state="delivery"] .terms-row {
  min-height: 0 !important;
  padding: 8px 10px !important;
}

body[data-flow-state="delivery"] .terms-copy {
  font-size: clamp(10px, .85vw, 12px) !important;
  line-height: 1.3 !important;
}

/* Achievement: landscape portrait on top, concise result below. */
body[data-flow-state="achievement"] [data-screen="achievement"].flow-screen.is-active {
  display: grid !important;
  place-items: stretch center !important;
}

body[data-flow-state="achievement"] .achievement-stage-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(180px, 40%) minmax(0, 1fr) !important;
  width: min(100%, 1240px) !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  gap: 10px !important;
  overflow: hidden !important;
}

body[data-flow-state="achievement"] .achievement-portrait-wrap {
  position: relative !important;
  top: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}

body[data-flow-state="achievement"] .achievement-portrait-wrap img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #071012;
}

body[data-flow-state="achievement"] .achievement-success-details {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start;
  gap: 7px 10px !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body[data-flow-state="achievement"] .achievement-success-details[hidden],
body[data-flow-state="achievement"] .achievement-success-share[hidden],
body[data-flow-state="achievement"] .success-close-button[hidden] {
  display: none !important;
}

body[data-flow-state="achievement"] .achievement-success-details > :is(.achievement-success-eyebrow, .achievement-badge-label, h1, .achievement-success-description, .achievement-success-message, .achievement-delivery-state, .achievement-success-share, .success-close-button, .achievement-disclaimer) {
  grid-column: 1 / -1;
}

body[data-flow-state="achievement"] .achievement-success h1 {
  font-size: clamp(34px, 4vw, 54px) !important;
  line-height: .9 !important;
}

body[data-flow-state="achievement"] :is(.achievement-success-description, .achievement-success-message, .achievement-success-steps, .achievement-success-signals, .achievement-delivery-state, .achievement-success-share) {
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

body[data-flow-state="achievement"] :is(.achievement-success-description, .achievement-success-message, .achievement-success-steps li, .achievement-success-share p, .achievement-delivery-state p) {
  font-size: clamp(10px, .88vw, 13px) !important;
  line-height: 1.3 !important;
}

body[data-flow-state="achievement"] :is(.achievement-success-steps, .achievement-success-signals, .achievement-delivery-state, .achievement-success-share) {
  padding: 9px 11px !important;
}

body[data-flow-state="achievement"] .achievement-disclaimer {
  font-size: 9px !important;
}

/* Keep the hero hotspot in place; only align its surface to the core system. */
.lab-hero-phone-hotspot::before {
  border: 1px solid var(--nv-accent) !important;
  border-left-width: 4px !important;
  border-radius: 0 !important;
  background: rgba(5, 5, 5, .9) !important;
  color: var(--nv-accent) !important;
  clip-path: none !important;
  box-shadow: none !important;
}

@media (max-width: 760px), (orientation: portrait) {
  :root {
    --experience-header-height: clamp(72px, 9dvh, 82px);
    --experience-page-gutter: clamp(10px, 3vw, 14px);
    --experience-stage-gap: 7px;
  }

  body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="portrait-discovery"],
    [data-flow-state="personalized-advice"],
    [data-flow-state="delivery"],
    [data-flow-state="achievement"]
  ) .modal-shell {
    grid-template-columns: clamp(152px, 40vw, 170px) minmax(0, 1fr) !important;
  }

  body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="portrait-discovery"],
    [data-flow-state="personalized-advice"],
    [data-flow-state="delivery"],
    [data-flow-state="achievement"]
  ) .modal-header {
    padding: 10px 6px 8px 14px !important;
  }

  body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="portrait-discovery"],
    [data-flow-state="personalized-advice"],
    [data-flow-state="delivery"],
    [data-flow-state="achievement"]
  ) .modal-logo {
    width: min(var(--nanno-logo-size-mobile, 180px), 100%) !important;
  }

  .experience-stepper {
    padding: 0 5px !important;
  }

  .experience-stepper-button {
    gap: 2px;
    min-height: 40px;
    font-size: 0;
  }

  .experience-stepper-marker {
    width: 25px !important;
    height: 25px !important;
    font-size: 10px !important;
  }

  .experience-stepper-track {
    top: 12px !important;
  }

  body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="portrait-discovery"],
    [data-flow-state="personalized-advice"],
    [data-flow-state="delivery"],
    [data-flow-state="achievement"]
  ) .flow-screen.is-active {
    padding-block: 8px calc(8px + env(safe-area-inset-bottom)) !important;
  }

  body[data-flow-state="capture"] [data-screen="capture"].flow-screen.is-active {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "title"
      "subtitle"
      "camera"
      "actions" !important;
    align-content: stretch !important;
    justify-items: center;
    gap: 5px !important;
  }

  body[data-flow-state="capture"] [data-screen="capture"] :is(.flow-title, .flow-subtitle, .screen-actions) {
    width: min(100%, 520px) !important;
    text-align: center !important;
  }

  body[data-flow-state="capture"] [data-screen="capture"] .flow-title {
    font-size: clamp(27px, 8vw, 34px) !important;
    line-height: .94 !important;
  }

  body[data-flow-state="capture"] [data-screen="capture"] .flow-subtitle {
    display: -webkit-box;
    overflow: hidden !important;
    font-size: clamp(11px, 3vw, 14px) !important;
    line-height: 1.25 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-flow-state="capture"] [data-screen="capture"] .camera-frame {
    width: min(100%, 320px) !important;
    height: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 3 / 4 !important;
  }

  body[data-flow-state="capture"] [data-screen="capture"] .camera-status {
    display: none !important;
  }

  body[data-flow-state="capture"] [data-screen="capture"] .screen-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding-top: 7px !important;
  }

  body[data-flow-state="capture"] .screen-actions :is(.primary-button, .secondary-button) {
    min-height: 48px !important;
  }

  body[data-flow-state="capture"] .capture-secondary-actions {
    grid-column: 1 / -1;
  }

  body[data-flow-state="capture"] .secure-processing-note {
    display: none !important;
  }

  body[data-flow-state="capture"] .camera-guide-instruction {
    max-height: 25% !important;
    padding: 8px 10px !important;
  }

  body[data-flow-state="capture"] .camera-guide-instruction :is(.camera-guide-helper, .camera-guide-crop-label) {
    display: none !important;
  }

  body[data-flow-state="generating"] [data-screen="generating"].flow-screen.is-active {
    grid-template-rows: auto auto minmax(0, 1fr) !important;
  }

  body[data-flow-state="generating"] [data-screen="generating"] .flow-title {
    font-size: clamp(22px, 6vw, 29px) !important;
    white-space: normal !important;
  }

  body[data-flow-state="generating"] .generating-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 4fr) minmax(105px, 1fr) !important;
    gap: 7px !important;
  }

  body[data-flow-state="generating"] .quiz-panel {
    grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr) auto auto !important;
    gap: 3px !important;
    padding: 9px !important;
  }

  body[data-flow-state="generating"] .quiz-kicker,
  body[data-flow-state="generating"] .quiz-subtitle,
  body[data-flow-state="generating"] .quiz-privacy-note {
    display: none !important;
  }

  body[data-flow-state="generating"] .quiz-title {
    font-size: clamp(18px, 5.2vw, 24px) !important;
  }

  body[data-flow-state="generating"] .quiz-idle-fact {
    gap: 3px !important;
    padding: 7px 9px !important;
  }

  body[data-flow-state="generating"] .quiz-idle-fact strong {
    font-size: 18px !important;
  }

  body[data-flow-state="generating"] .quiz-idle-fact p {
    display: -webkit-box;
    overflow: hidden !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-flow-state="generating"] .quiz-question {
    font-size: clamp(16px, 4.5vw, 21px) !important;
    line-height: 1.05 !important;
  }

  body[data-flow-state="generating"] .quiz-options {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }

  body[data-flow-state="generating"] .quiz-option {
    min-height: 34px !important;
    padding: 5px 8px !important;
    font-size: 12px !important;
  }

  body[data-flow-state="generating"] .generation-status-panel {
    grid-template-columns: 70px minmax(0, 1fr) !important;
    grid-template-rows: 1fr auto !important;
    padding: 7px 9px !important;
  }

  body[data-flow-state="generating"] .generation-status-panel .generator-wrap {
    grid-column: 1;
    grid-row: 1;
  }

  body[data-flow-state="generating"] .generator-ring {
    width: 60px !important;
    height: 60px !important;
  }

  body[data-flow-state="generating"] .generation-list {
    grid-column: 2;
    grid-row: 1;
  }

  body[data-flow-state="generating"] .generation-item {
    min-height: 0 !important;
    padding: 3px 0 !important;
    font-size: 10px !important;
  }

  body[data-flow-state="generating"] .generation-status-panel :is(.privacy-note, .generation-ready-message) {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 4px !important;
    font-size: 9px !important;
    text-align: left !important;
  }

  body[data-flow-state="portrait-discovery"] .result-review-stage {
    grid-template-rows: auto minmax(0, 1fr) auto auto auto !important;
    gap: 4px !important;
  }

  body[data-flow-state="portrait-discovery"] .result-review-header .experience-stage-eyebrow,
  body[data-flow-state="portrait-discovery"] .result-review-header .flow-subtitle {
    display: none !important;
  }

  body[data-flow-state="portrait-discovery"] .result-review-header .flow-title {
    font-size: clamp(23px, 6.3vw, 29px) !important;
    text-align: center !important;
  }

  body[data-flow-state="portrait-discovery"] .result-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  body[data-flow-state="portrait-discovery"] .portrait-discovery-card {
    grid-template-columns: minmax(0, 64%) minmax(0, 36%) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  body[data-flow-state="portrait-discovery"] .result-card-img-wrapper {
    grid-column: 1;
    grid-row: 1;
    height: 100% !important;
    aspect-ratio: 16 / 9 !important;
  }

  body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-caption {
    grid-column: 2;
    grid-row: 1;
    align-content: center;
  }

  body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-caption strong {
    display: -webkit-box;
    overflow: hidden !important;
    font-size: clamp(13px, 3.8vw, 17px) !important;
    line-height: 1 !important;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-caption p {
    display: none !important;
  }

  body[data-flow-state="portrait-discovery"] .profile-report {
    grid-template-columns: 1fr 1fr !important;
    max-height: 76px !important;
    padding: 5px 7px !important;
  }

  body[data-flow-state="portrait-discovery"] .profile-report :is(.quiz-report-header, .quiz-report-secondary, .quiz-relative-profile) {
    display: none !important;
  }

  body[data-flow-state="portrait-discovery"] .profile-report .quiz-report-profile strong {
    font-size: 18px !important;
  }

  body[data-flow-state="portrait-discovery"] .profile-report .quiz-report-disclaimer {
    grid-column: 1 / -1;
  }

  body[data-flow-state="portrait-discovery"] .portrait-discovery-status {
    min-height: 12px !important;
    font-size: 9px !important;
  }

  body[data-flow-state="portrait-discovery"] .result-review-actions {
    grid-template-columns: minmax(105px, .42fr) minmax(0, 1fr) !important;
  }

  body[data-flow-state="portrait-discovery"] .result-review-actions button {
    min-height: 42px !important;
    padding-inline: 9px !important;
    font-size: 12px !important;
    white-space: nowrap;
    overflow: hidden !important;
  }

  body[data-flow-state="personalized-advice"] .experience-stage-header :is(.experience-stage-eyebrow, .flow-subtitle) {
    display: none !important;
  }

  body[data-flow-state="personalized-advice"] .experience-stage-header .flow-title {
    font-size: clamp(23px, 6.3vw, 29px) !important;
    text-align: center !important;
  }

  body[data-flow-state="personalized-advice"] .advice-stage-layout {
    grid-template-rows: minmax(170px, 38%) minmax(0, 1fr) !important;
  }

  body[data-flow-state="personalized-advice"] .advice-content {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 7px !important;
  }

  body[data-flow-state="personalized-advice"] .advice-content > * {
    grid-column: 1 !important;
  }

  body[data-flow-state="personalized-advice"] .advice-signal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-flow-state="personalized-advice"] .advice-content h2 {
    font-size: clamp(19px, 5vw, 24px) !important;
  }

  body[data-flow-state="personalized-advice"] .advice-next-steps {
    display: none !important;
  }

  body[data-flow-state="personalized-advice"] .advice-actions {
    grid-template-columns: minmax(105px, .4fr) minmax(0, 1fr) !important;
  }

  body[data-flow-state="personalized-advice"] .advice-actions button {
    min-height: 42px !important;
    padding-inline: 8px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }

  body[data-flow-state="delivery"] .delivery-stage-header :is(.experience-stage-eyebrow, .flow-subtitle) {
    display: none !important;
  }

  body[data-flow-state="delivery"] .delivery-stage-header .flow-title {
    font-size: clamp(23px, 6.3vw, 29px) !important;
    text-align: center !important;
  }

  body[data-flow-state="delivery"] .delivery-stage-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(105px, 25%) minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  body[data-flow-state="delivery"] .delivery-summary {
    grid-template-columns: minmax(0, 46%) minmax(0, 54%) !important;
    grid-template-rows: 1fr !important;
  }

  body[data-flow-state="delivery"] .delivery-summary-copy {
    padding: 7px 9px !important;
  }

  body[data-flow-state="delivery"] .delivery-summary-copy :is(p, section) {
    display: none !important;
  }

  body[data-flow-state="delivery"] .delivery-summary-copy > strong {
    font-size: clamp(18px, 5vw, 24px) !important;
  }

  body[data-flow-state="delivery"] .send-details-panel {
    padding: 8px 9px !important;
  }

  body[data-flow-state="delivery"] .send-details-header :is(.send-details-kicker) {
    display: none !important;
  }

  body[data-flow-state="delivery"] .send-details-header h2 {
    font-size: clamp(19px, 5.2vw, 24px) !important;
  }

  body[data-flow-state="delivery"] .send-details-form {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  body[data-flow-state="delivery"] .send-details-form > * {
    grid-column: 1 !important;
  }

  body[data-flow-state="delivery"] .field-group label {
    font-size: 10px !important;
  }

  body[data-flow-state="delivery"] .field-group input {
    min-height: 38px !important;
    padding: 6px 9px !important;
    font-size: 13px !important;
  }

  body[data-flow-state="delivery"] .terms-row {
    padding: 5px 7px !important;
  }

  body[data-flow-state="delivery"] .terms-copy {
    font-size: 9px !important;
    line-height: 1.2 !important;
  }

  body[data-flow-state="delivery"] .send-details-back {
    min-height: 38px !important;
    font-size: 11px !important;
  }

  body[data-flow-state="achievement"] .achievement-stage-layout {
    grid-template-rows: minmax(190px, 34%) minmax(0, 1fr) !important;
  }

  body[data-flow-state="achievement"] .achievement-portrait-wrap::after {
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    padding: 6px !important;
    font-size: 8px !important;
  }

  body[data-flow-state="achievement"] .achievement-seal {
    top: 8px !important;
    right: 8px !important;
    width: 38px !important;
    height: 38px !important;
    font-size: 20px !important;
  }

  body[data-flow-state="achievement"] .achievement-success-details {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  body[data-flow-state="achievement"] .achievement-success-details > * {
    grid-column: 1 !important;
  }

  body[data-flow-state="achievement"] .achievement-success-eyebrow,
  body[data-flow-state="achievement"] .achievement-badge-label,
  body[data-flow-state="achievement"] .achievement-success-steps,
  body[data-flow-state="achievement"] .achievement-disclaimer {
    display: none !important;
  }

  body[data-flow-state="achievement"] .achievement-success h1 {
    font-size: clamp(28px, 7vw, 36px) !important;
  }

  body[data-flow-state="achievement"] .achievement-success-signals {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-flow-state="achievement"] :is(.achievement-success-signals article, .achievement-success-message, .achievement-delivery-state, .achievement-success-share) {
    padding: 7px !important;
  }

  body[data-flow-state="achievement"] .achievement-share-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-flow-state="achievement"] .achievement-share-actions button {
    min-width: 0 !important;
    min-height: 42px !important;
    font-size: 11px !important;
  }
}

@media (orientation: landscape) and (max-height: 700px) {
  :root {
    --experience-header-height: 66px;
  }

  body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="portrait-discovery"],
    [data-flow-state="personalized-advice"],
    [data-flow-state="delivery"],
    [data-flow-state="achievement"]
  ) .modal-shell {
    grid-template-columns: 168px minmax(0, 1fr) !important;
  }

  body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="portrait-discovery"],
    [data-flow-state="personalized-advice"],
    [data-flow-state="delivery"],
    [data-flow-state="achievement"]
  ) .modal-logo {
    width: 152px !important;
  }

  .experience-stepper-button {
    min-height: 38px;
  }

  body[data-flow-state="capture"] [data-screen="capture"] .camera-frame {
    width: min(100%, 45dvh) !important;
  }

  body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-caption {
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 3px 5px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body[data-flow-state="portrait-discovery"] .portrait-direction-label,
  body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-caption p {
    display: none !important;
  }

  body[data-flow-state="portrait-discovery"] [data-screen="portrait-discovery"] .portrait-discovery-caption strong {
    display: -webkit-box;
    overflow: hidden !important;
    font-size: clamp(12px, 1.7vw, 17px) !important;
    line-height: 1 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-flow-state="personalized-advice"] .advice-stage-layout,
  body[data-flow-state="achievement"] .achievement-stage-layout {
    grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr) !important;
    grid-template-rows: 1fr !important;
  }

  body[data-flow-state="achievement"] .achievement-success-details {
    gap: 3px !important;
    padding: 5px !important;
  }

  body[data-flow-state="achievement"] .achievement-success h1 {
    font-size: clamp(22px, 4.1vw, 32px) !important;
  }

  body[data-flow-state="achievement"] .achievement-success-description,
  body[data-flow-state="achievement"] .achievement-success-steps,
  body[data-flow-state="achievement"] .achievement-disclaimer {
    display: none !important;
  }

  body[data-flow-state="achievement"] :is(.achievement-success-signals article, .achievement-success-message, .achievement-delivery-state, .achievement-success-share) {
    padding: 4px 6px !important;
  }

  body[data-flow-state="achievement"] :is(.success-close-button, .achievement-share-actions button) {
    min-height: 38px !important;
    height: 38px !important;
    padding-block: 4px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .experience-stepper-button,
  .lab-hero-phone-hotspot::before {
    transition: none !important;
  }
}