/*
 * Nanno AI public-flow layout contract.
 *
 * This file is intentionally loaded after the historical responsive styles.
 * It owns only shell geometry, scrolling and responsive composition. Product
 * behavior, visual tokens, landing/hero media and the portrait pipeline remain
 * owned by their existing modules.
 */

:root {
  --experience-header-height: clamp(88px, 11dvh, 112px);
  --experience-page-gutter: clamp(18px, 4vw, 64px);
  --experience-stage-gap: clamp(16px, 2.4vw, 30px);
}

body:is(
  [data-flow-state="capture"],
  [data-flow-state="generating"],
  [data-flow-state="profile"],
  [data-flow-state="portrait-discovery"],
  [data-flow-state="personalized-advice"],
  [data-flow-state="delivery"],
  [data-flow-state="achievement"]
) {
  width: 100%;
  height: 100dvh;
  min-height: 100svh;
  max-height: none;
  overflow: hidden;
}

body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="profile"],
    [data-flow-state="portrait-discovery"],
    [data-flow-state="personalized-advice"],
    [data-flow-state="delivery"],
    [data-flow-state="achievement"]
  )
  .portrait-dialog[open] {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  padding: 0;
  overflow: hidden !important;
}

body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="profile"],
    [data-flow-state="portrait-discovery"],
    [data-flow-state="personalized-advice"],
    [data-flow-state="delivery"],
    [data-flow-state="achievement"]
  )
  .modal-shell {
  position: relative;
  display: grid !important;
  grid-template-columns: clamp(190px, 21vw, 286px) minmax(0, 1fr);
  grid-template-rows: var(--experience-header-height) minmax(0, 1fr);
  width: min(100%, 1440px) !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  container-type: normal;
}

body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="profile"],
    [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;
  z-index: 20;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  width: auto;
  height: auto;
  min-width: 0;
  padding: 20px 18px 14px 32px;
}

body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="profile"],
    [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;
  display: block;
  width: clamp(150px, 16vw, 220px) !important;
  max-width: 100% !important;
  height: auto;
  margin: 0 !important;
}

body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="profile"],
    [data-flow-state="portrait-discovery"],
    [data-flow-state="personalized-advice"],
    [data-flow-state="delivery"],
    [data-flow-state="achievement"]
  )
  .experience-stepper {
  position: relative !important;
  inset: auto !important;
  z-index: 20;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  width: min(100%, 920px);
  min-width: 0;
  margin: 0 !important;
  padding: 0 clamp(14px, 2vw, 28px);
  transform: none !important;
  box-sizing: border-box;
}

body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="profile"],
    [data-flow-state="portrait-discovery"],
    [data-flow-state="personalized-advice"],
    [data-flow-state="delivery"],
    [data-flow-state="achievement"]
  )
  .experience-stepper
  > li:not(.experience-stepper-track) {
  min-width: 0;
}

body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="profile"],
    [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;
  z-index: 4;
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  padding: clamp(22px, 3.8dvh, 44px) var(--experience-page-gutter)
    calc(clamp(26px, 5dvh, 56px) + env(safe-area-inset-bottom)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  scrollbar-gutter: stable;
  box-sizing: border-box;
}

body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="profile"],
    [data-flow-state="portrait-discovery"],
    [data-flow-state="personalized-advice"],
    [data-flow-state="delivery"],
    [data-flow-state="achievement"]
  )
  .flow-screen[hidden] {
  display: none !important;
}

body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="profile"],
    [data-flow-state="portrait-discovery"],
    [data-flow-state="personalized-advice"],
    [data-flow-state="delivery"],
    [data-flow-state="achievement"]
  )
  .decorative-layer {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

/* Capture: two purposeful columns, never absolute positioning. */
body[data-flow-state="capture"] [data-screen="capture"].flow-screen.is-active {
  display: grid !important;
  grid-template-columns: minmax(300px, 0.82fr) minmax(340px, 1.18fr);
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "title camera"
    "subtitle camera"
    "status camera"
    "actions camera";
  align-content: center;
  align-items: center;
  justify-items: stretch;
  gap: clamp(14px, 2dvh, 22px) clamp(28px, 5vw, 84px);
}

body[data-flow-state="capture"] [data-screen="capture"] .flow-title,
body[data-flow-state="capture"] [data-screen="capture"] .flow-subtitle,
body[data-flow-state="capture"] [data-screen="capture"] .camera-status,
body[data-flow-state="capture"] [data-screen="capture"] .screen-actions {
  position: relative !important;
  inset: auto !important;
  width: min(100%, 520px) !important;
  max-width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  transform: none !important;
}

body[data-flow-state="capture"] [data-screen="capture"] .flow-title {
  grid-area: title;
  align-self: end;
  font-size: clamp(40px, 4.6vw, 64px) !important;
  line-height: 0.98 !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: normal;
  word-break: normal;
  text-align: left !important;
}

body[data-flow-state="capture"] [data-screen="capture"] .flow-title span {
  display: inline;
  margin-right: 0.18em;
}

body[data-flow-state="capture"] [data-screen="capture"] .flow-title strong {
  display: inline;
}

body[data-flow-state="capture"] [data-screen="capture"] .flow-subtitle {
  grid-area: subtitle;
  color: var(--nv-text-soft);
  font-size: clamp(14px, 1.35vw, 18px) !important;
  line-height: 1.5;
  text-align: left !important;
}

body[data-flow-state="capture"] [data-screen="capture"] .camera-status {
  grid-area: status;
}

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%, 440px, 46dvh) !important;
  height: auto !important;
  min-width: 0;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: 3 / 4;
  margin: 0 !important;
  transform: none !important;
}

/* Generating: retain the quiz/status composition and allow short screens to scroll. */
body[data-flow-state="generating"]
  [data-screen="generating"].flow-screen.is-active {
  display: grid !important;
  grid-template-rows: auto auto auto;
  align-content: start;
  justify-items: center;
  gap: clamp(10px, 1.8dvh, 18px);
}

body[data-flow-state="generating"] [data-screen="generating"] .flow-title,
body[data-flow-state="generating"] [data-screen="generating"] .flow-subtitle {
  position: relative !important;
  inset: auto !important;
  width: min(100%, 900px);
  margin: 0;
  white-space: normal;
  text-align: center;
}

body[data-flow-state="generating"] [data-screen="generating"] .flow-title {
  font-size: clamp(36px, 5vw, 66px) !important;
  line-height: 0.98;
}

body[data-flow-state="generating"] .generating-layout {
  width: min(100%, 1240px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

body[data-flow-state="generating"] .generation-status-panel,
body[data-flow-state="generating"] .quiz-panel {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Shared seven-stage content roots. */
body:is(
    [data-flow-state="profile"],
    [data-flow-state="portrait-discovery"],
    [data-flow-state="personalized-advice"],
    [data-flow-state="delivery"]
  )
  .flow-screen.is-active {
  align-content: start;
  gap: var(--experience-stage-gap);
}

body:is(
    [data-flow-state="profile"],
    [data-flow-state="portrait-discovery"],
    [data-flow-state="personalized-advice"],
    [data-flow-state="delivery"]
  )
  .experience-stage-header,
body[data-flow-state="portrait-discovery"] .result-review-stage,
body[data-flow-state="personalized-advice"] .advice-stage-layout,
body[data-flow-state="personalized-advice"] .advice-actions,
body[data-flow-state="delivery"] .delivery-stage-layout {
  min-width: 0;
  max-width: 100%;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"]
  .result-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"]
  .result-card,
body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"]
  .result-card-img-wrapper {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

body[data-flow-state="personalized-advice"] .advice-stage-layout,
body[data-flow-state="delivery"] .delivery-stage-layout {
  align-items: start;
}

body[data-flow-state="personalized-advice"] .advice-stage-main,
body[data-flow-state="delivery"] .send-details-panel,
body[data-flow-state="delivery"] .send-details-form {
  min-width: 0;
  max-width: 100%;
}

body[data-flow-state="achievement"]
  [data-screen="achievement"].flow-screen.is-active {
  display: grid !important;
  place-items: start center;
}

body[data-flow-state="achievement"] .achievement-stage-layout {
  position: relative !important;
  inset: auto !important;
  width: min(100%, 1120px) !important;
  height: auto !important;
  min-width: 0;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto;
  overflow: visible !important;
}

/* All primary actions remain comfortably tappable and reachable by natural scroll. */
body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="profile"],
    [data-flow-state="portrait-discovery"],
    [data-flow-state="personalized-advice"],
    [data-flow-state="delivery"],
    [data-flow-state="achievement"]
  )
  .flow-screen.is-active
  button,
body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="profile"],
    [data-flow-state="portrait-discovery"],
    [data-flow-state="personalized-advice"],
    [data-flow-state="delivery"],
    [data-flow-state="achievement"]
  )
  .flow-screen.is-active
  a.nv-flow-button {
  min-height: 44px;
}

@media (max-width: 1080px) {
  :root {
    --experience-page-gutter: clamp(16px, 3vw, 36px);
  }

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

@media (max-width: 900px), (orientation: portrait) {
  :root {
    --experience-header-height: clamp(78px, 9dvh, 94px);
  }

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

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

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

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

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

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

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

@media (max-width: 760px) {
  :root {
    --experience-header-height: 72px;
    --experience-page-gutter: 14px;
  }

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

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

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

  body:is(
      [data-flow-state="capture"],
      [data-flow-state="generating"],
      [data-flow-state="profile"],
      [data-flow-state="portrait-discovery"],
      [data-flow-state="personalized-advice"],
      [data-flow-state="delivery"],
      [data-flow-state="achievement"]
    )
    .experience-stepper {
    padding: 0 8px;
  }

  .experience-stepper-marker {
    width: 25px;
    height: 25px;
  }

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

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

  body[data-flow-state="capture"] [data-screen="capture"] .flow-title,
  body[data-flow-state="generating"] [data-screen="generating"] .flow-title {
    font-size: clamp(29px, 8.2vw, 36px) !important;
  }

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

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

  body[data-flow-state="delivery"] .delivery-summary,
  body[data-flow-state="personalized-advice"] .advice-portrait-panel {
    grid-template-columns: 100px minmax(0, 1fr);
  }

  body[data-flow-state="delivery"] .delivery-summary > img,
  body[data-flow-state="personalized-advice"] .advice-portrait-panel img {
    width: 100%;
    height: 100%;
    min-height: 138px;
    aspect-ratio: auto;
  }
}

/* Short landscape devices keep a compact two-column Capture, then scroll. */
@media (orientation: landscape) and (min-width: 640px) and (max-height: 700px) {
  :root {
    --experience-header-height: 68px;
    --experience-page-gutter: clamp(16px, 3vw, 28px);
  }

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

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

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

  body[data-flow-state="capture"]
    [data-screen="capture"].flow-screen.is-active {
    grid-template-columns: minmax(250px, 1fr) minmax(230px, 0.8fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "title camera"
      "subtitle camera"
      "status camera"
      "actions camera";
    align-content: start;
    justify-items: stretch;
    gap: 8px clamp(18px, 4vw, 36px);
  }

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

  body[data-flow-state="capture"] [data-screen="capture"] .flow-title {
    font-size: clamp(30px, 5vw, 42px) !important;
  }

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

@media (prefers-reduced-motion: reduce) {
  body:is(
      [data-flow-state="capture"],
      [data-flow-state="generating"],
      [data-flow-state="profile"],
      [data-flow-state="portrait-discovery"],
      [data-flow-state="personalized-advice"],
      [data-flow-state="delivery"],
      [data-flow-state="achievement"]
    )
    .flow-screen.is-active {
    scroll-behavior: auto;
  }
}

/*
 * Production-content contract.
 *
 * The historical result layout assigned named grid areas directly to the
 * seven-stage screens. Those areas survived the shell reset and collapsed the
 * real, long-form portrait cards into a few pixels. These rules deliberately
 * reset that legacy geometry and compose Profile and Portrait from their
 * semantic containers. Colors, typefaces, borders, shadows and motion continue
 * to come from the canonical Nannovative tokens and component styles.
 */

body[data-flow-state="profile"]
  [data-screen="profile"].flow-screen.is-active {
  display: grid !important;
  grid-template-columns: minmax(280px, 0.76fr) minmax(0, 1.24fr) !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "profile-header profile-report"
    "profile-actions profile-report" !important;
  align-content: start !important;
  align-items: start !important;
  column-gap: clamp(32px, 5vw, 76px) !important;
  row-gap: clamp(22px, 3dvh, 34px) !important;
}

body[data-flow-state="profile"] [data-screen="profile"]
  > .experience-stage-header,
body[data-flow-state="profile"] [data-screen="profile"]
  > .profile-report,
body[data-flow-state="profile"] [data-screen="profile"]
  > .experience-stage-actions {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  transform: none !important;
}

body[data-flow-state="profile"] [data-screen="profile"]
  > .experience-stage-header {
  grid-area: profile-header !important;
  justify-self: stretch !important;
  gap: clamp(10px, 1.4dvh, 16px) !important;
  text-align: left !important;
}

body[data-flow-state="profile"] [data-screen="profile"]
  .experience-stage-eyebrow {
  justify-content: flex-start !important;
}

body[data-flow-state="profile"] [data-screen="profile"] .flow-title {
  width: 100% !important;
  font-size: clamp(42px, 4.4vw, 64px) !important;
  line-height: 0.96 !important;
  text-align: left !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

body[data-flow-state="profile"] [data-screen="profile"] .flow-title span,
body[data-flow-state="profile"] [data-screen="profile"] .flow-title strong {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

body[data-flow-state="profile"] [data-screen="profile"] .flow-subtitle {
  width: min(100%, 520px) !important;
  font-size: clamp(14px, 1.3vw, 18px) !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

body[data-flow-state="profile"] [data-screen="profile"]
  > .profile-report {
  grid-area: profile-report !important;
  align-self: start !important;
  justify-self: stretch !important;
  overflow: visible !important;
}

body[data-flow-state="profile"] [data-screen="profile"]
  > .experience-stage-actions {
  grid-area: profile-actions !important;
  align-self: start !important;
  justify-self: stretch !important;
  justify-content: flex-start !important;
}

body[data-flow-state="profile"] [data-screen="profile"]
  > .experience-stage-actions .primary-button {
  width: min(100%, 380px) !important;
  height: auto !important;
  min-height: 56px !important;
  padding: 14px clamp(20px, 3vw, 34px) !important;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"].flow-screen.is-active {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-template-areas: none !important;
  align-content: initial !important;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .result-review-stage {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto !important;
  grid-template-areas:
    "header"
    "gallery"
    "status"
    "actions" !important;
  align-content: start !important;
  align-items: stretch !important;
  gap: clamp(18px, 2.5dvh, 30px) !important;
  width: min(100%, 1320px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .result-review-header {
  position: relative !important;
  inset: auto !important;
  grid-area: header !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(8px, 1.1dvh, 14px) !important;
  width: min(100%, 980px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .result-review-header > * {
  position: relative !important;
  inset: auto !important;
  grid-area: auto !important;
  align-self: auto !important;
  justify-self: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  transform: none !important;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .result-review-header .flow-title {
  display: block !important;
  width: min(100%, 980px) !important;
  max-width: 100% !important;
  font-size: clamp(42px, 5vw, 68px) !important;
  line-height: 0.94 !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .result-review-header .flow-title br {
  display: none !important;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .result-review-header .flow-title span,
body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .result-review-header .flow-title strong {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  line-height: inherit !important;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .result-review-header .flow-subtitle {
  width: min(100%, 680px) !important;
  font-size: clamp(14px, 1.3vw, 18px) !important;
  line-height: 1.5 !important;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .result-grid {
  position: relative !important;
  inset: auto !important;
  grid-area: gallery !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: auto !important;
  grid-auto-rows: auto !important;
  align-items: stretch !important;
  justify-self: stretch !important;
  gap: clamp(16px, 2vw, 24px) !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .portrait-discovery-card {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto 1fr auto !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  transform: none;
  overflow: hidden !important;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .portrait-discovery-card:hover,
body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .portrait-discovery-card:focus-within {
  transform: translateY(-3px);
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .result-card-img-wrapper {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 4 / 5 !important;
  overflow: hidden !important;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .portrait-discovery-caption {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  gap: 8px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 18px !important;
  overflow: visible !important;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .portrait-context-grid,
body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .portrait-profile-connection {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .portrait-discovery-status {
  position: relative !important;
  inset: auto !important;
  grid-area: status !important;
  justify-self: center !important;
  width: min(100%, 720px) !important;
  height: auto !important;
  min-height: 22px !important;
  margin: 0 !important;
  text-align: center !important;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .result-review-actions {
  position: relative !important;
  inset: auto !important;
  grid-area: actions !important;
  display: grid !important;
  grid-template-columns: minmax(180px, auto) minmax(280px, 440px) !important;
  grid-template-rows: auto !important;
  grid-template-areas: none !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 14px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .result-review-actions > button {
  position: relative !important;
  inset: auto !important;
  grid-area: auto !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  height: auto !important;
  min-height: 56px !important;
  margin: 0 !important;
  transform: none !important;
}

@media (max-width: 1080px) {
  body[data-flow-state="profile"]
    [data-screen="profile"].flow-screen.is-active {
    grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr) !important;
    column-gap: clamp(24px, 4vw, 48px) !important;
  }

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

@media (max-width: 760px), (orientation: portrait) and (max-width: 900px) {
  body[data-flow-state="profile"]
    [data-screen="profile"].flow-screen.is-active {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "profile-header"
      "profile-report"
      "profile-actions" !important;
    row-gap: 18px !important;
  }

  body[data-flow-state="profile"] [data-screen="profile"]
    > .experience-stage-header,
  body[data-flow-state="profile"] [data-screen="profile"] .flow-title,
  body[data-flow-state="profile"] [data-screen="profile"] .flow-subtitle {
    text-align: center !important;
  }

  body[data-flow-state="profile"] [data-screen="profile"]
    .experience-stage-eyebrow,
  body[data-flow-state="profile"] [data-screen="profile"]
    > .experience-stage-actions {
    justify-content: center !important;
  }

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

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

/*
 * Viewport-fit v4.
 *
 * The shell owns the browser viewport; dense product information scrolls only
 * inside its semantic panel. This keeps the document, modal and stage fixed,
 * makes kiosk installations use the full display, and avoids shrinking touch
 * targets merely to make long content appear to fit.
 */

:root {
  --experience-header-height: clamp(72px, 8.5dvh, 88px);
  --experience-page-gutter: clamp(14px, 2.4vw, 38px);
  --experience-stage-gap: clamp(10px, 1.6dvh, 18px);
  --experience-control-height: clamp(46px, 5.8dvh, 56px);
  --experience-icon-size: clamp(19px, 1.55vw, 24px);
}

html,
body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="profile"],
    [data-flow-state="portrait-discovery"],
    [data-flow-state="personalized-advice"],
    [data-flow-state="delivery"],
    [data-flow-state="achievement"]
  )
  .modal-shell {
  grid-template-columns: clamp(142px, 15vw, 214px) minmax(0, 1fr);
  grid-template-rows: var(--experience-header-height) minmax(0, 1fr);
  width: 100vw !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
}

body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="profile"],
    [data-flow-state="portrait-discovery"],
    [data-flow-state="personalized-advice"],
    [data-flow-state="delivery"],
    [data-flow-state="achievement"]
  )
  .modal-header {
  padding: clamp(12px, 1.8dvh, 18px) 10px clamp(9px, 1.2dvh, 13px)
    clamp(18px, 2.2vw, 34px);
}

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

body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="profile"],
    [data-flow-state="portrait-discovery"],
    [data-flow-state="personalized-advice"],
    [data-flow-state="delivery"],
    [data-flow-state="achievement"]
  )
  .experience-stepper {
  width: min(100%, 1040px);
  padding-inline: clamp(10px, 2vw, 30px);
}

.experience-stepper-marker {
  width: clamp(27px, 2.25vw, 32px);
  height: clamp(27px, 2.25vw, 32px);
  font-size: clamp(9px, .85vw, 11px);
}

.experience-stepper-track {
  top: clamp(13px, 1.1vw, 15px);
}

body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="profile"],
    [data-flow-state="portrait-discovery"],
    [data-flow-state="personalized-advice"],
    [data-flow-state="delivery"],
    [data-flow-state="achievement"]
  )
  .flow-screen.is-active {
  align-self: stretch !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
  padding: clamp(10px, 1.8dvh, 18px) var(--experience-page-gutter)
    calc(clamp(12px, 2dvh, 22px) + env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
  scrollbar-gutter: auto;
}

body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="profile"],
    [data-flow-state="portrait-discovery"],
    [data-flow-state="personalized-advice"],
    [data-flow-state="delivery"],
    [data-flow-state="achievement"]
  )
  .flow-screen.is-active
  :is(button, a.nv-flow-button) {
  min-height: var(--experience-control-height) !important;
  height: auto !important;
  padding: 10px clamp(14px, 2vw, 24px) !important;
  gap: clamp(8px, 1vw, 12px) !important;
  font-size: clamp(14px, 1.25vw, 18px) !important;
  line-height: 1.2 !important;
}

body:is(
    [data-flow-state="capture"],
    [data-flow-state="generating"],
    [data-flow-state="profile"],
    [data-flow-state="portrait-discovery"],
    [data-flow-state="personalized-advice"],
    [data-flow-state="delivery"],
    [data-flow-state="achievement"]
  )
  .flow-screen.is-active
  :is(button, a.nv-flow-button)
  > svg {
  flex: 0 0 var(--experience-icon-size) !important;
  width: var(--experience-icon-size) !important;
  height: var(--experience-icon-size) !important;
}

/* Landing controls keep the same visual weight as the in-experience actions. */
.video-entry-button {
  min-height: 50px;
  padding: 11px clamp(18px, 2.2vw, 30px);
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.2;
}

/* Capture */
body[data-flow-state="capture"] [data-screen="capture"].flow-screen.is-active {
  grid-template-columns: minmax(280px, .88fr) minmax(320px, 1.12fr);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  grid-template-areas:
    "title camera"
    "subtitle camera"
    "status camera"
    "actions camera";
  align-content: stretch;
  gap: clamp(8px, 1.5dvh, 16px) clamp(24px, 4vw, 68px);
}

body[data-flow-state="capture"] [data-screen="capture"] .flow-title {
  align-self: end;
  font-size: clamp(36px, 4.2vw, 60px) !important;
}

body[data-flow-state="capture"] [data-screen="capture"] .camera-frame {
  width: min(100%, 440px, calc((100dvh - var(--experience-header-height) - 38px) * .75)) !important;
  max-height: calc(100dvh - var(--experience-header-height) - 38px) !important;
}

body[data-flow-state="capture"] [data-screen="capture"] .screen-actions {
  align-self: start;
  display: grid;
  gap: clamp(7px, 1dvh, 10px);
  width: min(100%, 440px) !important;
}

body[data-flow-state="capture"] .capture-secondary-actions {
  display: grid;
  gap: 6px;
}

body[data-flow-state="capture"] .secure-processing-note {
  margin: 0;
  font-size: clamp(9px, .8vw, 11px);
  line-height: 1.35;
}

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

body[data-flow-state="generating"] [data-screen="generating"] .flow-title {
  font-size: clamp(32px, 4vw, 54px) !important;
}

body[data-flow-state="generating"] .generating-layout {
  align-self: stretch;
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: clamp(12px, 2vw, 24px);
  width: min(100%, 1380px) !important;
  height: 100% !important;
  overflow: hidden !important;
}

body[data-flow-state="generating"] :is(.quiz-panel, .generation-status-panel) {
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/* Profile */
body[data-flow-state="profile"]
  [data-screen="profile"].flow-screen.is-active {
  grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "profile-header profile-report"
    "profile-actions profile-report" !important;
  align-content: stretch !important;
  gap: var(--experience-stage-gap) clamp(24px, 4vw, 64px) !important;
}

body[data-flow-state="profile"] [data-screen="profile"] .flow-title {
  font-size: clamp(36px, 4vw, 58px) !important;
}

body[data-flow-state="profile"] [data-screen="profile"] > .profile-report {
  align-self: stretch !important;
  height: 100% !important;
  max-height: 100% !important;
  padding: clamp(14px, 2vw, 24px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

body[data-flow-state="profile"] .quiz-signal-mix {
  gap: clamp(8px, 1vw, 12px);
  margin-top: clamp(10px, 1.5dvh, 16px);
}

body[data-flow-state="profile"] .quiz-signal-mix article {
  padding: clamp(10px, 1.2vw, 14px);
}

/* Portrait selection */
body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"].flow-screen.is-active {
  display: block !important;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .result-review-stage {
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  align-content: stretch !important;
  gap: clamp(8px, 1.3dvh, 14px) !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  overflow: hidden !important;
}

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

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

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .result-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  align-items: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

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

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .result-card-img-wrapper {
  height: 100% !important;
  aspect-ratio: auto !important;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .portrait-discovery-caption {
  gap: 5px !important;
  padding: clamp(10px, 1.2vw, 15px) !important;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .portrait-discovery-caption strong {
  font-size: clamp(20px, 1.85vw, 29px);
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"]
  :is(.portrait-discovery-caption p, .portrait-context-grid p, .portrait-profile-connection) {
  font-size: clamp(11px, .92vw, 13px);
  line-height: 1.38;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .portrait-context-grid {
  min-height: 0 !important;
  padding-inline: clamp(10px, 1.2vw, 15px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .portrait-context-grid article {
  gap: 3px;
  padding: clamp(7px, .9dvh, 10px) 0;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .portrait-profile-connection {
  margin: clamp(7px, .8dvh, 10px) clamp(10px, 1.2vw, 15px)
    clamp(10px, 1.2dvh, 14px) !important;
  padding: clamp(8px, .9vw, 11px) !important;
}

body[data-flow-state="portrait-discovery"]
  [data-screen="portrait-discovery"] .result-review-actions {
  grid-template-columns: minmax(150px, 220px) minmax(250px, 420px) !important;
  gap: clamp(8px, 1vw, 12px) !important;
}

/* Advice */
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;
}

body[data-flow-state="personalized-advice"] .advice-stage-layout {
  grid-template-columns: minmax(210px, .58fr) minmax(0, 1.42fr) !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
}

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

body[data-flow-state="personalized-advice"] .advice-portrait-panel img {
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
  aspect-ratio: auto;
}

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

body[data-flow-state="personalized-advice"] :is(.advice-loading, .advice-error, .advice-content) {
  padding: clamp(14px, 2vw, 26px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body[data-flow-state="personalized-advice"] .advice-content {
  gap: clamp(10px, 1.2dvh, 16px);
}

body[data-flow-state="personalized-advice"] .advice-content h2 {
  font-size: clamp(30px, 3.5vw, 48px);
}

body[data-flow-state="personalized-advice"]
  :is(.advice-signal-grid section, .advice-list-grid section, .advice-next-steps, .advice-nannovative) {
  padding: clamp(10px, 1.2vw, 14px);
}

body[data-flow-state="personalized-advice"] .advice-actions {
  grid-template-columns: minmax(150px, 220px) minmax(250px, 420px) !important;
  justify-content: center;
  gap: clamp(8px, 1vw, 12px);
  width: 100%;
  max-width: none;
}

body[data-flow-state="personalized-advice"] .advice-actions #adviceContinue {
  grid-column: 2;
}

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

body[data-flow-state="delivery"] .delivery-stage-layout {
  grid-template-columns: minmax(240px, .7fr) minmax(380px, 1.3fr) !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
}

body[data-flow-state="delivery"] .delivery-summary,
body[data-flow-state="delivery"] .send-details-panel {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

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

body[data-flow-state="delivery"] .delivery-summary > img {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
}

body[data-flow-state="delivery"] .delivery-summary-copy,
body[data-flow-state="delivery"] .send-details-panel {
  padding: clamp(14px, 2vw, 24px);
}

body[data-flow-state="delivery"] .send-details-panel,
body[data-flow-state="delivery"] .send-details-form {
  gap: clamp(9px, 1.2dvh, 14px);
}

body[data-flow-state="delivery"] .field-group label {
  margin-bottom: 5px;
  font-size: clamp(12px, 1vw, 14px);
}

body[data-flow-state="delivery"] .field-group input {
  height: clamp(44px, 5.4dvh, 50px);
}

body[data-flow-state="delivery"] .send-details-form > .primary-button {
  align-self: start;
  min-height: clamp(46px, 5.8dvh, 56px) !important;
  height: clamp(46px, 5.8dvh, 56px) !important;
  max-height: 56px !important;
}

body[data-flow-state="delivery"] .send-details-back {
  align-self: start;
  justify-self: start;
  min-height: 46px !important;
  height: 46px !important;
  max-height: 56px !important;
  white-space: nowrap;
}

/* Achievement */
body[data-flow-state="achievement"]
  [data-screen="achievement"].flow-screen.is-active {
  place-items: stretch !important;
}

body[data-flow-state="achievement"] .achievement-stage-layout {
  grid-template-columns: minmax(240px, .68fr) minmax(0, 1.32fr) !important;
  align-items: stretch;
  gap: clamp(18px, 3vw, 42px);
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
}

body[data-flow-state="achievement"] .achievement-portrait-wrap {
  position: relative;
  height: 100%;
  min-height: 0;
}

body[data-flow-state="achievement"] .achievement-portrait-wrap img {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
}

body[data-flow-state="achievement"] .achievement-success-details {
  height: 100%;
  min-height: 0;
  padding-right: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body[data-flow-state="achievement"] .achievement-success h1 {
  font-size: clamp(42px, 6vw, 78px);
}

/* Phone and narrow tablet portrait: compact header, swipeable portraits. */
@media (max-width: 760px) {
  :root {
    --experience-header-height: 62px;
    --experience-page-gutter: 11px;
    --experience-stage-gap: 9px;
    --experience-control-height: 46px;
    --experience-icon-size: 20px;
  }

  .video-entry-button {
    min-height: 48px;
    padding: 10px 16px;
    font-size: 14px;
  }

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

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

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

  body:is(
      [data-flow-state="capture"],
      [data-flow-state="generating"],
      [data-flow-state="profile"],
      [data-flow-state="portrait-discovery"],
      [data-flow-state="personalized-advice"],
      [data-flow-state="delivery"],
      [data-flow-state="achievement"]
    )
    .experience-stepper {
    padding-inline: 5px;
  }

  .experience-stepper-marker {
    width: 24px;
    height: 24px;
    font-size: 9px;
  }

  .experience-stepper-track {
    top: 11px;
  }

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

  body[data-flow-state="capture"]
    [data-screen="capture"].flow-screen.is-active {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(150px, 1fr) auto auto;
    grid-template-areas:
      "title"
      "subtitle"
      "camera"
      "status"
      "actions";
    gap: 6px;
  }

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

  body[data-flow-state="capture"] [data-screen="capture"] .flow-subtitle {
    font-size: clamp(11px, 3.2vw, 14px) !important;
    line-height: 1.3;
  }

  body[data-flow-state="capture"] [data-screen="capture"] .camera-frame {
    width: auto !important;
    height: 100% !important;
    max-width: min(100%, 300px) !important;
    max-height: 100% !important;
  }

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

  body[data-flow-state="capture"] [data-screen="capture"] .screen-actions > :is(.primary-button, .secondary-button) {
    grid-row: 1;
  }

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

  body[data-flow-state="capture"] .secure-processing-note {
    font-size: 8.5px;
    line-height: 1.25;
  }

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

  body[data-flow-state="generating"] .generating-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.35fr) minmax(120px, .65fr);
  }

  body[data-flow-state="profile"]
    [data-screen="profile"].flow-screen.is-active {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    grid-template-areas:
      "profile-header"
      "profile-report"
      "profile-actions" !important;
    gap: 9px !important;
  }

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

  body[data-flow-state="profile"] [data-screen="profile"] .flow-subtitle {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  body[data-flow-state="profile"] .quiz-signal-mix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-flow-state="portrait-discovery"]
    [data-screen="portrait-discovery"] .result-review-header .flow-title {
    font-size: clamp(28px, 7.8vw, 34px) !important;
  }

  body[data-flow-state="portrait-discovery"]
    [data-screen="portrait-discovery"] .result-review-header .flow-subtitle {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  body[data-flow-state="portrait-discovery"]
    [data-screen="portrait-discovery"] .result-grid {
    grid-template-columns: none !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% - 22px);
    gap: 10px !important;
    padding-bottom: 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  body[data-flow-state="portrait-discovery"]
    [data-screen="portrait-discovery"] .result-grid::-webkit-scrollbar {
    display: none;
  }

  body[data-flow-state="portrait-discovery"]
    [data-screen="portrait-discovery"] .portrait-discovery-card {
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  body[data-flow-state="portrait-discovery"]
    [data-screen="portrait-discovery"] .portrait-discovery-caption {
    padding: 9px !important;
  }

  body[data-flow-state="portrait-discovery"]
    [data-screen="portrait-discovery"] .portrait-context-grid {
    padding-inline: 9px !important;
  }

  body[data-flow-state="portrait-discovery"]
    [data-screen="portrait-discovery"] .portrait-profile-connection {
    margin: 7px 9px 9px !important;
    padding: 8px !important;
  }

  body[data-flow-state="portrait-discovery"]
    [data-screen="portrait-discovery"] .result-review-actions,
  body[data-flow-state="personalized-advice"] .advice-actions {
    grid-template-columns: minmax(136px, .88fr) minmax(0, 1.12fr) !important;
    gap: 7px !important;
  }

  body[data-flow-state="portrait-discovery"]
    [data-screen="portrait-discovery"] .result-review-actions > button,
  body[data-flow-state="personalized-advice"] .advice-actions > button {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 56px !important;
    padding-inline: 8px !important;
    font-size: clamp(11px, 3vw, 13px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

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

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

  body[data-flow-state="personalized-advice"] .advice-portrait-panel {
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-rows: 84px;
    height: 84px;
  }

  body[data-flow-state="personalized-advice"] .advice-portrait-panel img {
    min-height: 0;
  }

  body[data-flow-state="personalized-advice"] .advice-portrait-panel > div {
    align-content: center;
    padding: 10px;
  }

  body[data-flow-state="personalized-advice"] .advice-content {
    padding: 12px;
  }

  body[data-flow-state="personalized-advice"] .advice-content h2 {
    font-size: clamp(27px, 7.6vw, 34px);
  }

  body[data-flow-state="delivery"] [data-screen="delivery"].flow-screen.is-active {
    gap: 8px;
  }

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

  body[data-flow-state="delivery"] .delivery-summary {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-rows: 92px;
    height: 92px;
    overflow: hidden;
  }

  body[data-flow-state="delivery"] .delivery-summary-copy {
    align-content: center;
    padding: 10px;
  }

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

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

  body[data-flow-state="delivery"] .send-details-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  body[data-flow-state="achievement"] .achievement-portrait-wrap {
    height: 112px;
  }

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

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

  body[data-flow-state="achievement"] .achievement-success-details {
    gap: 10px;
  }

  body[data-flow-state="achievement"] .achievement-success h1 {
    font-size: clamp(35px, 10vw, 46px);
  }
}

/* Portrait kiosk: keep the richer two-column composition and use its height. */
@media (min-width: 901px) and (orientation: portrait) {
  :root {
    --experience-header-height: clamp(86px, 6dvh, 104px);
    --experience-page-gutter: clamp(24px, 3vw, 42px);
  }

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

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

  body[data-flow-state="capture"]
    [data-screen="capture"].flow-screen.is-active {
    grid-template-columns: minmax(300px, .82fr) minmax(380px, 1.18fr);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas:
      "title camera"
      "subtitle camera"
      "status camera"
      "actions camera";
    justify-items: stretch;
  }

  body[data-flow-state="capture"] [data-screen="capture"] .camera-frame {
    width: min(100%, 620px, calc((100dvh - var(--experience-header-height) - 64px) * .75)) !important;
  }

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

  body[data-flow-state="personalized-advice"] .advice-stage-layout {
    grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr) !important;
  }

  body[data-flow-state="delivery"] .delivery-stage-layout {
    grid-template-columns: minmax(280px, .78fr) minmax(420px, 1.22fr) !important;
  }

  body[data-flow-state="achievement"] .achievement-stage-layout {
    grid-template-columns: minmax(280px, .76fr) minmax(0, 1.24fr) !important;
  }
}

/* Short landscape devices keep all navigation visible and scroll only panels. */
@media (orientation: landscape) and (max-height: 520px) {
  :root {
    --experience-header-height: 54px;
    --experience-page-gutter: 12px;
    --experience-stage-gap: 7px;
    --experience-control-height: 44px;
    --experience-icon-size: 18px;
  }

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

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

  .experience-stepper-marker {
    width: 22px;
    height: 22px;
    font-size: 8px;
  }

  .experience-stepper-track {
    top: 10px;
  }

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

  body[data-flow-state="capture"] [data-screen="capture"] .flow-title {
    font-size: clamp(28px, 4.5vw, 38px) !important;
  }

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

  body[data-flow-state="capture"]
    [data-screen="capture"].flow-screen.is-active {
    gap: 4px clamp(16px, 3vw, 28px);
  }

  body[data-flow-state="capture"] [data-screen="capture"] .flow-subtitle {
    font-size: clamp(10px, 1.45vw, 12px) !important;
    line-height: 1.25;
  }

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

  body[data-flow-state="capture"] [data-screen="capture"]
    .screen-actions > :is(.primary-button, .secondary-button) {
    grid-row: 1;
  }

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

  body[data-flow-state="capture"] .secure-processing-note {
    font-size: 8px;
    line-height: 1.2;
  }

  body[data-flow-state="portrait-discovery"]
    [data-screen="portrait-discovery"] .result-grid {
    grid-template-columns: none !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-auto-flow: column;
    grid-auto-columns: min(100%, 720px);
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  body[data-flow-state="portrait-discovery"]
    [data-screen="portrait-discovery"] .result-grid::-webkit-scrollbar {
    display: none;
  }

  body[data-flow-state="portrait-discovery"]
    [data-screen="portrait-discovery"] .portrait-discovery-card {
    grid-template-columns: minmax(150px, .68fr) minmax(0, 1.32fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  body[data-flow-state="portrait-discovery"]
    [data-screen="portrait-discovery"] .result-card-img-wrapper {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  body[data-flow-state="portrait-discovery"]
    [data-screen="portrait-discovery"] .portrait-discovery-caption {
    grid-column: 2;
    grid-row: 1;
    gap: 3px !important;
    padding: 7px 9px !important;
  }

  body[data-flow-state="portrait-discovery"]
    [data-screen="portrait-discovery"] .portrait-discovery-caption strong {
    font-size: clamp(18px, 2.6vw, 24px);
  }

  body[data-flow-state="portrait-discovery"]
    [data-screen="portrait-discovery"]
    :is(.portrait-discovery-caption p, .portrait-context-grid p, .portrait-profile-connection) {
    font-size: 10px;
    line-height: 1.25;
  }

  body[data-flow-state="portrait-discovery"]
    [data-screen="portrait-discovery"] .portrait-context-grid {
    grid-column: 2;
    grid-row: 2;
    padding-inline: 9px !important;
  }

  body[data-flow-state="portrait-discovery"]
    [data-screen="portrait-discovery"] .portrait-context-grid article {
    padding: 5px 0;
  }

  body[data-flow-state="portrait-discovery"]
    [data-screen="portrait-discovery"] .portrait-profile-connection {
    grid-column: 2;
    grid-row: 3;
    margin: 5px 9px 7px !important;
    padding: 6px 8px !important;
  }

  body[data-flow-state="profile"] [data-screen="profile"] .flow-title,
  body[data-flow-state="portrait-discovery"]
    [data-screen="portrait-discovery"] .result-review-header .flow-title,
  body[data-flow-state="personalized-advice"] .flow-title,
  body[data-flow-state="delivery"] .flow-title {
    font-size: clamp(26px, 4.5vw, 34px) !important;
  }
}