/* ============================================================================
   experience-layout.css — فاز ۷: چیدمان واحد شش مرحله‌ی experience
   ----------------------------------------------------------------------------
   جایگزین شش لایه‌ی انباشته: experience-layout-v2/v3/v4،
   experience-polish-v1، stage-rails-v1، nannovative-unify-v1.
   آن فایل‌ها از index.html جدا شده‌اند ولی روی دیسک مانده‌اند (تاریخچه و
   قراردادهای تست). این فایل فقط «چیدمان» مراحل را تعریف می‌کند؛ تایپوگرافی،
   دکمه، کارت، حرکت و نردبان ارتفاعِ بدون-اسکرول همچنان با
   nannovative-canonical.css است که بعد از این فایل بار می‌شود.
   مقادیر از DOM زنده‌ی نسخه‌ی تاییدشده استخراج شده‌اند (۲۰۲۶-۰۸-۳۰).
   ============================================================================ */

/* ---------- پوسته ---------- */
html body .modal-shell.modal-shell.modal-shell {
  position: relative !important;
  width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  display: grid !important;
  grid-template-rows: var(--nv-shell-header-h) 1fr !important;
  background: var(--nv-bg, #101010);
  overflow: hidden !important;
}

html body .flow-screen.flow-screen.flow-screen {
  position: absolute !important;
  inset: 78px 0 0 0 !important;
  z-index: 4 !important;
  display: grid !important;
  grid-auto-rows: auto !important;
  align-content: start !important;
  overflow: hidden !important;
  padding: 0 clamp(20px, 12.1vw, 232px) !important;
  /* فاز ۲ — قید ارتفاع: بدون این، min-height:auto (min-content) بر کشیدگیِ
     top/bottom غلبه می‌کرد و صحنه به‌جای بسته‌شدن به ویوپورت، تا اندازه‌ی
     محتوا بلند می‌شد و از پایین صفحه می‌زد بیرون. */
  min-height: 0 !important;
}

/* ---------- نوار مرحله (استپر) ---------- */
/* استپر داخل همان نوار بالایی: لوگو چپ (modal-header)، استپر وسط */
html body .experience-stepper.experience-stepper.experience-stepper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 76px !important;
  z-index: 7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 6px 24px 0 !important;
  background: transparent;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
  pointer-events: none;
}
html body .experience-stepper.experience-stepper.experience-stepper > * { pointer-events: auto; }
html body .experience-stepper-button.experience-stepper-button.experience-stepper-button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0 8px 10px !important;
  min-width: 118px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer;
  border-bottom: 2px solid #22302f;
  color: #6d7a79;
}
html body .experience-stepper-button .step-index.step-index.step-index,
html body .experience-stepper-button.experience-stepper-button.experience-stepper-button [data-step-index],
html body .experience-stepper-button.experience-stepper-button.experience-stepper-button b {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border: 1px solid #3a4443;
  background: #101010;
  color: inherit;
  font-family: var(--nv-font-body, "Space Grotesk", Arial, sans-serif);
  font-weight: 600;
}
html body .experience-stepper-button.experience-stepper-button.experience-stepper-button span {
  text-transform: uppercase;
  color: inherit;
}
html body .experience-stepper-button.is-active.is-active.is-active {
  color: var(--nv-accent, #0ABAB5);
  border-bottom-color: var(--nv-accent, #0ABAB5);
}
html body .experience-stepper-button.is-active .step-index.step-index.step-index,
html body .experience-stepper-button.is-active.is-active.is-active b {
  background: var(--nv-accent, #0ABAB5);
  border-color: var(--nv-accent, #0ABAB5);
  color: #001312;
}
html body .experience-stepper-button.is-complete.is-complete.is-complete {
  color: #b9c3c2;
  border-bottom-color: var(--nv-accent-dark, #089f9a);
}
html body .experience-stepper-button.is-complete .step-index.step-index.step-index,
html body .experience-stepper-button.is-complete.is-complete.is-complete b {
  border-color: var(--nv-accent-dark, #089f9a);
  color: var(--nv-accent, #0ABAB5);
}
html body .experience-stepper-button:disabled { cursor: default; }

/* ---------- سربرگ مشترک مرحله ---------- */
html body .experience-stage-header.experience-stage-header.experience-stage-header {
  grid-area: header !important;
  display: grid !important;
  grid-auto-rows: auto !important;
  align-content: start !important;
  row-gap: 6px !important;
  padding-top: 24px !important;
}

/* ---------- CAPTURE ---------- */
html body .flow-screen.flow-screen.flow-screen[data-screen="capture"] {
  grid-template-columns: minmax(360px, 5fr) minmax(320px, 7fr) !important;
  grid-template-areas:
    "header header"
    "actions camera"
    "status  camera";
  column-gap: clamp(24px, 4vw, 64px) !important;
  align-items: start !important;
}
html body .flow-screen[data-screen="capture"] .screen-actions.screen-actions.screen-actions {
  grid-area: actions !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding-top: 8px !important;
}
html body .flow-screen[data-screen="capture"] .camera-status { grid-area: status; }
html body .camera-frame.camera-frame.camera-frame {
  grid-area: camera !important;
  position: relative !important;
  justify-self: center !important;
  align-self: center !important;
  width: min(32vw, 460px) !important;
  aspect-ratio: 3 / 4 !important;
  border: 1px solid rgba(10, 186, 181, 0.55);
  background: #050505;
  padding: 16px !important;
  overflow: hidden !important;
}
/* ویدئو، عکس و بوم همگی روی هم می‌نشینند نه پشت سر هم. قبلاً هر دو
   position:relative بودند و بومِ پیش‌نمایشِ عکسِ آپلودشده زیر قاب می‌افتاد؛
   ضمناً display:block !important جلوی خاموش‌کردن ویدئو توسط JS را می‌گرفت
   (اپ روی ویدئو style.display="none" می‌گذارد) و ویدئوی مرده روی عکس می‌ماند. */
html body .camera-frame.camera-frame.camera-frame video,
html body .camera-frame.camera-frame.camera-frame img,
html body .camera-frame.camera-frame.camera-frame canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
html body .camera-frame.camera-frame.camera-frame canvas[hidden] { display: none !important; }
html body .camera-framing-assistant.camera-framing-assistant.camera-framing-assistant {
  position: absolute !important;
  inset: 16px !important;
  pointer-events: none;
}
/* هندسه‌ی راهنمای قاب‌بندی — پورت وفادار v4 (فیکس 2026-08-30):
   پورت قبلی، پنجره‌ی موبایل (92/86) را با سیلوئت دسکتاپ (132/200) قاطی کرده بود
   و قانون عمومی img دوربین (html body .camera-frame×3 img = 0,3,3) هم با
   width/height:100% هندسه را صاف می‌کرد؛ برای همین گاید دسکتاپ «دورتر» شده بود.
   تکرار ×۵ کلاس لازم است تا از آن قانون ببرد. اعداد عیناً از experience-layout-v4.css. */
html body .camera-guide { position: absolute; inset: 0; }
/* پایه = حالت موبایل: تمام‌قد، سر تا بالای کمر */
html body .camera-guide-silhouette-window.camera-guide-silhouette-window.camera-guide-silhouette-window.camera-guide-silhouette-window.camera-guide-silhouette-window {
  position: absolute !important;
  inset: auto !important;
  top: 44% !important;
  left: 50% !important;
  width: 92% !important;
  height: 86% !important;
  transform: translate(-50%, -50%) !important;
  overflow: hidden !important;
}
html body .camera-guide-silhouette.camera-guide-silhouette.camera-guide-silhouette.camera-guide-silhouette.camera-guide-silhouette {
  position: absolute !important;
  inset: auto !important;
  top: 0 !important;
  left: 50% !important;
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  transform: translateX(-50%) !important;
}
/* دسکتاپ: کراپ نزدیک‌تر، سر تا پایین سینه */
html body .camera-guide-desktop .camera-guide-silhouette-window.camera-guide-silhouette-window.camera-guide-silhouette-window.camera-guide-silhouette-window.camera-guide-silhouette-window {
  top: 48% !important;
  width: 132% !important;
  height: 92% !important;
}
html body .camera-guide-desktop .camera-guide-silhouette.camera-guide-silhouette.camera-guide-silhouette.camera-guide-silhouette.camera-guide-silhouette {
  top: -2% !important;
  height: 200% !important;
}
html body .camera-guide-desktop { display: block; }
html body .camera-guide-mobile { display: none; }
/* Same rule as camera-flow.js resolveCameraGuideMode(): the mobile guide (and
   its copy) is for a touch screen up to 900px wide, or any portrait viewport
   up to 768px. The old 767px cut-off showed the desktop silhouette under the
   mobile copy at exactly 768px portrait and on 768-900px touch screens. */
@media (max-width: 900px) and (not (pointer: fine)), (max-width: 768px) and (orientation: portrait) {
  html body .camera-guide-desktop { display: none; }
  html body .camera-guide-mobile { display: block; }
}

/* ---------- EXPLORE / GENERATING ---------- */
html body .flow-screen[data-screen="generating"] { grid-template-areas: "header" "layout"; }
html body .generating-layout.generating-layout.generating-layout {
  grid-area: layout !important;
  display: grid !important;
  justify-items: center !important;
  align-content: start !important;
  padding-bottom: 96px;
}
html body .quiz-panel.quiz-panel.quiz-panel {
  width: min(100%, 680px) !important;
  border: 1px solid #262d2c;
  background: rgba(10, 12, 12, 0.82);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  padding: 20px 26px 24px !important;
}
html body .explore-rail.explore-rail.explore-rail,
html body .generation-status-panel.generation-status-panel.generation-status-panel {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 6 !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 32px !important;
  padding: 14px clamp(20px, 6vw, 96px) !important;
  background: rgba(4, 16, 15, 0.92);
  border-top: 1px solid rgba(10, 186, 181, 0.5);
}

/* ---------- PORTRAIT DISCOVERY ---------- */
html body .flow-screen[data-screen="portrait-discovery"] { grid-template-areas: "header" "stage"; }
html body .result-review-stage.result-review-stage.result-review-stage {
  grid-area: stage !important;
  display: grid !important;
  grid-auto-rows: auto !important;
  align-content: start !important;
  row-gap: 14px !important;
}
html body .result-grid.result-grid.result-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
}
html body .result-card.result-card.result-card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid #262d2c;
  background: #0b0d0d;
  overflow: hidden !important;
}
html body .result-card.is-selected { border-color: var(--nv-accent, #0ABAB5); }
html body .portrait-discovery-status { text-align: center; }
html body .result-review-actions { display: grid; justify-items: center; }

/* ---------- ADVICE ---------- */
html body .flow-screen[data-screen="personalized-advice"] { grid-template-areas: "header" "layout" "actions"; }
html body .advice-stage-layout.advice-stage-layout.advice-stage-layout {
  grid-area: layout !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 16px !important;
}
html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel {
  flex: 0 1 345px !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid #262d2c;
  background: #0b0d0d;
  overflow: hidden !important;
}
html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel img {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
html body .advice-stage-main { display: block; flex: 1 1 480px; min-width: 0; }
html body .advice-content.advice-content.advice-content {
  border: 1px solid #262d2c;
  background: rgba(10, 12, 12, 0.82);
  padding: 18px 22px !important;
}
html body .advice-signal-grid.advice-signal-grid.advice-signal-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 14px !important;
}
html body .advice-signal-grid.advice-signal-grid.advice-signal-grid section {
  border: 1px solid #232a29;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 14px !important;
}
html body .advice-recap.advice-recap.advice-recap {
  flex: 1 1 100% !important;
  border: 1px solid #232a29;
  background: rgba(6, 20, 19, 0.55);
  padding: 14px 18px !important;
}
html body .advice-recap-list.advice-recap-list.advice-recap-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 10px 18px !important;
}

/* ---------- DELIVERY ---------- */
html body .flow-screen[data-screen="delivery"] { grid-template-areas: "header" "layout"; }
html body .delivery-stage-layout.delivery-stage-layout.delivery-stage-layout {
  grid-area: layout !important;
  display: grid !important;
  grid-template-columns: minmax(300px, 2fr) minmax(380px, 3fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
}
html body .delivery-summary.delivery-summary.delivery-summary {
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid #262d2c;
  background: #0b0d0d;
  padding: 0 0 16px !important;
}
html body .delivery-summary.delivery-summary.delivery-summary img {
  flex: 1 1 160px !important;
  min-height: 120px !important;
  width: 100% !important;
  object-fit: cover !important;
}
html body .delivery-summary > *:not(img) { padding-inline: 18px; }
html body .send-details-panel.send-details-panel.send-details-panel {
  border: 1px solid #262d2c;
  background: rgba(10, 12, 12, 0.82);
  padding: 20px 26px !important;
  display: grid !important;
  grid-auto-rows: auto !important;
  align-content: start !important;
  row-gap: 12px !important;
}
html body .send-details-form.send-details-form.send-details-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 16px !important;
}
html body .send-details-form .field-group.field-group.field-group input,
html body .send-details-form.send-details-form.send-details-form input[type="text"],
html body .send-details-form.send-details-form.send-details-form input[type="email"] {
  width: 100% !important;
  background: #0a0c0c;
  border: 1px solid #2f3838;
  color: var(--nv-text, #fff);
  padding: 12px 14px !important;
}
html body .send-details-form .terms-row.terms-row.terms-row,
html body .send-details-form .delivery-status.delivery-status.delivery-status,
html body .send-details-form .field-group.field-group-wide.field-group-wide.field-group-wide,
html body .send-details-form .primary-button { grid-column: 1 / -1; }
html body .send-details-form .primary-button { justify-self: center; }

/* ---------- ACHIEVEMENT ---------- */
html body .flow-screen.achievement-success { grid-template-areas: "header" "layout" "actions"; }
html body .achievement-stage-layout.achievement-stage-layout.achievement-stage-layout {
  grid-area: layout !important;
  display: grid !important;
  grid-template-columns: minmax(300px, 2fr) minmax(420px, 3fr) !important;
  grid-template-areas: "portrait details" "stub details" "share details" "services details" !important;
  gap: 14px 24px !important;
  align-items: start !important;
}
html body .achievement-services { grid-area: services; }
html body .achievement-portrait-wrap { grid-area: portrait; position: relative; }
html body .achievement-stub { grid-area: stub; }
html body .achievement-success-share.achievement-success-share.achievement-success-share {
  grid-area: share !important;
  border: 1px solid #232a29;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 14px !important;
}
html body .achievement-success-details.achievement-success-details.achievement-success-details {
  grid-area: details !important;
  display: grid !important;
  grid-auto-rows: auto !important;
  align-content: start !important;
  row-gap: 10px !important;
  border: 1px solid #262d2c;
  background: rgba(10, 12, 12, 0.82);
  padding: 18px 22px !important;
}

/* ---------- ردیف اکشن مشترک ---------- */
html body .experience-stage-actions.experience-stage-actions.experience-stage-actions {
  grid-area: actions !important;
  display: grid !important;
  justify-items: center !important;
  padding: 10px 0 16px !important;
}

/* ---------- موبایل: ستون‌ها تک‌ستونه ---------- */
@media (max-width: 767px) {
  html body .flow-screen { padding: 0 clamp(14px, 4vw, 28px); }
  html body .flow-screen.flow-screen.flow-screen[data-screen="capture"] {
    grid-template-columns: 1fr !important;
    grid-template-areas: "header" "camera" "actions" "status" !important;
  }
  html body .camera-frame { width: min(84vw, 46dvh); }
  html body .result-grid { grid-template-columns: 1fr; }
  html body .delivery-stage-layout.delivery-stage-layout.delivery-stage-layout,
  html body .achievement-stage-layout { grid-template-columns: 1fr; grid-template-areas: none; }
  html body .achievement-stage-layout > * { grid-area: auto; }
  html body .send-details-form { grid-template-columns: 1fr; }
  html body .experience-stepper { gap: 4px; }
  html body .experience-stepper-button { min-width: 0; flex: 1 1 0; padding-inline: 2px; }
}

/* سربرگ و فرزندانش در جریان عادی — جای‌گذاری absolute کهنه‌ی modal-flow لغو */
html body .experience-stage-header.experience-stage-header.experience-stage-header,
html body .experience-stage-header.experience-stage-header.experience-stage-header > *,
html body .experience-stage-header.experience-stage-header.experience-stage-header > * > * {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  max-width: none !important;
  text-align: left !important;
}

/* لغو قطعی جای‌گذاری کهنه‌ی اجزای سربرگ در همه‌ی مراحل */
html body .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle,
html body .flow-title.flow-title.flow-title.flow-title.flow-title,
html body .experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

/* سربرگ مرحله همیشه تک‌ستونه است؛ template چندستونه‌ی کهنه لغو */
html body .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: none !important;
  grid-auto-flow: row !important;
  justify-items: start !important;
}
html body .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header > * {
  grid-column: 1 !important;
  grid-row: auto !important;
}
/* چیپ استپر چهارگوش مطابق دیزاین سیستم */
html body .experience-stepper-button.experience-stepper-button.experience-stepper-button .step-index,
html body .experience-stepper-button.experience-stepper-button.experience-stepper-button b {
  border-radius: 0 !important;
}

/* صفحه‌های پنهان هرگز رندر نشوند — چند لایه‌ی کهنه در موبایل display را
   با !important روشن می‌کردند و صفحه‌ها روی هم می‌افتادند */
html body .flow-screen[hidden].flow-screen[hidden].flow-screen[hidden] { display: none !important; }
html body [data-screen][hidden] { display: none !important; }

@media (max-width: 767px) {
  html body .camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame,
  html body [data-screen="capture"] .camera-frame.camera-frame.camera-frame.camera-frame.camera-frame {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    inset: auto !important;
    margin: 8px auto 0 !important;
    z-index: 1 !important;
  }
  /* نوار بالا: لوگو چپ، چیپ‌ها راست */
  html body .experience-stepper.experience-stepper.experience-stepper {
    justify-content: flex-end !important;
    padding: 6px 10px 0 150px !important;
    gap: 2px !important;
  }
  html body .experience-stepper-button.experience-stepper-button span { display: none !important; }
  html body .experience-stepper-button.experience-stepper-button { border-bottom-width: 0 !important; min-width: 0 !important; }
}

/* صفحه‌ی ورود: شکستن دوخطی تیتر که با حذف لایه‌های کهنه تک‌خطی شده بود */
html body .video-entry-title.video-entry-title.video-entry-title {
  white-space: normal !important;
  max-width: min(92vw, 1240px) !important;
  margin-inline: auto !important;
  text-align: center !important;
  text-wrap: balance;
}

/* ============================================================================
   LANDING POLISH — 2026-08-30 (بازخورد صفحه‌به‌صفحه، صفحات ۱ و ۲)
   ۱) ورود ویدئویی: دکمه‌ها از لبه‌ها جدا، وسط‌چین با فاصله‌ی معقول و هم‌عرض
   ۲) کنسول هیرو: دو دکمه هم‌سایز، کنار هم، تراز با لبه‌ی چپ متن
   ۳) TAP TO START: روی صفحه‌ی گوشی (پایین اسکن‌لاین، روی ردیف مودهای دوربین)
   نکته: canonical با ×۷ کلاس width:max-content می‌دهد؛ اینجا ×۸ لازم است.
   ترفند هم‌عرضی: grid-auto-columns:1fr روی ظرفِ max-content ⇒ هر دو ستون
   به اندازه‌ی پهن‌ترین دکمه می‌شوند.
   ============================================================================ */

/* --- ۱) ورود ویدئویی: دو دکمه در دو سمت صفحه، هم‌عرض (تصمیم نهایی کاربر) --- */
html body .video-entry-actions.video-entry-actions.video-entry-actions.video-entry-actions {
  left: clamp(28px, 4vw, 64px) !important;
  right: clamp(28px, 4vw, 64px) !important;
  transform: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  width: auto !important;
  max-width: none !important;
  gap: clamp(24px, 3vw, 48px) !important;
}
html body .video-entry-actions .video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button {
  width: clamp(280px, 19vw, 420px) !important;
  min-width: 0 !important;
  max-width: 44vw !important;
  margin-inline: 0 !important;
  flex: 0 0 auto !important;
  align-self: stretch !important;
}

/* --- ۲) کنسول هیرو --- */
html body .lab-hero-actions.lab-hero-actions.lab-hero-actions.lab-hero-actions.lab-hero-actions.lab-hero-actions.lab-hero-actions.lab-hero-actions {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 1fr !important;
  grid-template-columns: none !important;
  width: max-content !important;
  max-width: 100% !important;
  justify-content: start !important;
  align-items: stretch !important;
  gap: 14px !important;
}
html body .lab-hero-actions .lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action.lab-hero-action {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-inline: 0 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  min-height: 56px !important;
}

/* --- ۳) TAP TO START — بازطراحی: قاب فوکوسِ دوربین ---
   امضاهای دیزاین‌سیستم: براکت‌های گوشه (مثل قاب هیرو)، شیشه‌ی تیره‌ی مات،
   لیبل بزرگِ فاصله‌دار سایان با گلو. استعاره: کادر فوکوسِ ویوفایندر که
   می‌گوید برای شروع همین‌جا را لمس کن. جای آن: مرکز پایینِ ویوفایندر،
   روی سینه‌ی سوژه (زیر ماسک، بالای ردیف مودها) — اسکن‌لاین هم از رویش رد می‌شود. */
html body .lab-hero-phone-hotspot.lab-hero-phone-hotspot.lab-hero-phone-hotspot.lab-hero-phone-hotspot::before {
  left: 50% !important;
  right: auto !important;
  top: 57% !important;
  transform: translate(-50%, -50%) !important;
  width: max-content !important;
  min-width: 0 !important;
  max-width: 94% !important;
  min-height: 50px !important;
  display: grid !important;
  place-items: center !important;
  padding: 15px 13px !important;
  border: 0 !important;
  border-left-width: 0 !important;
  clip-path: none !important;
  background:
    linear-gradient(var(--cyan), var(--cyan)) left 0 top 0 / 20px 2px,
    linear-gradient(var(--cyan), var(--cyan)) left 0 top 0 / 2px 20px,
    linear-gradient(var(--cyan), var(--cyan)) right 0 top 0 / 20px 2px,
    linear-gradient(var(--cyan), var(--cyan)) right 0 top 0 / 2px 20px,
    linear-gradient(var(--cyan), var(--cyan)) left 0 bottom 0 / 20px 2px,
    linear-gradient(var(--cyan), var(--cyan)) left 0 bottom 0 / 2px 20px,
    linear-gradient(var(--cyan), var(--cyan)) right 0 bottom 0 / 20px 2px,
    linear-gradient(var(--cyan), var(--cyan)) right 0 bottom 0 / 2px 20px,
    rgba(2, 14, 15, .58) !important;
  background-repeat: no-repeat !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  color: #eafffe !important;
  font-family: var(--nanno-font-body) !important;
  font-size: clamp(12.5px, 0.9vw, 14px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-indent: .14em !important;
  text-shadow: 0 0 10px rgba(10,186,181,.85), 0 0 26px rgba(10,186,181,.45) !important;
  white-space: nowrap !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.4), inset 0 0 26px rgba(10,186,181,.10) !important;
  animation: nvTapFocus 2.6s ease-in-out infinite !important;
  transition: filter .3s ease !important;
  pointer-events: none !important;
}
html body .lab-hero-phone-hotspot.lab-hero-phone-hotspot.lab-hero-phone-hotspot.lab-hero-phone-hotspot:hover::before,
html body .lab-hero-phone-hotspot.lab-hero-phone-hotspot.lab-hero-phone-hotspot.lab-hero-phone-hotspot:focus-visible::before {
  transform: translate(-50%, -50%) !important;
  filter: brightness(1.3) !important;
  animation-play-state: paused !important;
}
@keyframes nvTapFocus {
  0%, 100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
  50% { transform: translate(-50%, -50%) scale(1.04); filter: brightness(1.18); }
}

/* ============================================================================
   CAPTURE POLISH — 2026-08-30: هم‌راستا با الگوی هیرو
   دکمه‌های TAKE PHOTO / Upload Photo کنار هم، هم‌سایز (ترفند 1fr)،
   تراز با لبه‌ی چپ ستون؛ نوت حریم خصوصی هم چپ‌چین و هم‌تراز.
   ============================================================================ */
html body [data-screen="capture"] .screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions {
  display: grid !important;
  grid-template-columns: repeat(2, max-content) !important;
  grid-auto-flow: row !important;
  width: max-content !important;
  max-width: 100% !important;
  justify-content: start !important;
  align-items: start !important;
  align-self: start !important;
  justify-self: start !important;
  margin-inline: 0 !important;
  gap: 12px 24px !important;
}
html body [data-screen="capture"] .screen-actions > .secure-processing-note.secure-processing-note.secure-processing-note,
html body [data-screen="capture"] .screen-actions > .capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions {
  grid-column: 1 / -1 !important;
  justify-self: stretch !important;
}
html body [data-screen="capture"] .screen-actions .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button,
html body [data-screen="capture"] .screen-actions .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-inline: 0 !important;
  justify-self: start !important;
  align-self: stretch !important;
  min-height: 56px !important;
  height: auto !important;
  padding: 8px 26px !important;
  /* یکدست‌سازی تایپوگرافی دو دکمه (متن Take Photo در کانتنت تمام‌بزرگ است؛
     پس هر دو uppercase یکسان می‌شوند — Title Case نیازمند تغییر کانتنت/ادمین است) */
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
  gap: 12px !important;
}
html body [data-screen="capture"] .screen-actions .primary-button svg,
html body [data-screen="capture"] .screen-actions .secondary-button.secondary-button.secondary-button.secondary-button svg {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 auto !important;
}
html body [data-screen="capture"] .secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note {
  text-align: left !important;
  margin-inline: 0 !important;
  align-self: start !important;
  justify-self: start !important;
}

/* ============================================================================
   CAPTURE REDESIGN — 2026-08-30 (نقد سنیور: صفحه دوستونه‌ی واقعی نبود)
   مشکل‌ها: هدر تمام‌عرض، ربع پایین-چپ خالی، تیتر کوچک، پنل دوربین بی‌نشانه.
   راه‌حل: هدر فقط در ستون چپ ⇒ دوربین از بالای صفحه و بلندتر؛ نوت حریم
   خصوصی به‌صورت چیپ HUD به کف ستون چپ سنجاق می‌شود؛ تیتر بزرگ‌تر (فقط کپچر)؛
   براکت‌های گوشه روی حلقه‌ی پنل دوربین (امضای دیزاین‌سیستم).
   ============================================================================ */
@media (min-width: 1100px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="capture"] {
    grid-template-areas: "header camera" "actions camera" "status camera" !important;
    grid-template-columns: minmax(400px, 5fr) minmax(360px, 7fr) !important;
    /* دوربین خودش وسط‌چین عمودی است؛ ردیف 1fr باقی فضا را می‌گیرد و نوت را به کف می‌برد */
    grid-template-rows: auto auto 1fr !important;
    align-content: start !important;
    align-items: start !important;
    column-gap: clamp(28px, 4vw, 80px) !important;
  }
  /* دوربین: از بالا شروع شود و در ستونش وسط باشد */
  html body [data-screen="capture"] .camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame {
    /* دوربین وسط صفحه (درخواست کاربر)؛ max() نمی‌گذارد روی تیتر بیفتد */
    position: absolute !important;
    grid-area: auto !important;
    left: max(50vw, calc(min(4.9vw, 96px) * 7.4 + 84px + min(38vw, 56dvh, 560px) / 2)) !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    justify-self: auto !important;
    align-self: auto !important;
  }
  /* اکشن‌ها + نوت: دو ردیف باقی ستون چپ را بگیرند؛ نوت به کف سنجاق */
  /* دکمه‌ها پایین-چپ مثل Get Started!/About Us در هیروی مرجع؛ نوت بالای دکمه‌ها */
  html body [data-screen="capture"] .screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions {
    position: absolute !important;
    left: 48px !important;
    bottom: 26px !important;
    grid-row: auto !important;
    grid-column: auto !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
    width: auto !important;
    max-width: min(520px, calc(50vw - 48px - min(38vw, 56dvh, 560px) / 2 - 40px)) !important;
    align-content: start !important;
    border-top: 0 !important;
    padding-top: 0 !important;
    margin: 0 !important;
  }
  /* چیپ حریم خصوصی: ردیف بالای دکمه‌ها در خوشه‌ی پایین-چپ */
  html body [data-screen="capture"] .screen-actions > .capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions {
    position: static !important;
    grid-row: 1 !important;
    grid-column: 1 / -1 !important;
    margin: 0 0 16px !important;
    /* width:0 + min-width:100% : متن چیپ در سایز ستون‌ها (عرض دکمه‌ها) می‌شکند
       و ترک‌های max-content را منفجر نمی‌کند */
    width: 0 !important;
    min-width: 100% !important;
    max-width: none !important;
  }
  /* نوت حریم خصوصی: چیپ HUD با خط تأکید سایان */
  html body [data-screen="capture"] .secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note {
    border: 1px solid rgba(10, 186, 181, .22) !important;
    border-left: 3px solid rgba(10, 186, 181, .65) !important;
    background: rgba(6, 24, 25, .38) !important;
    padding: 14px 16px !important;
    width: 100% !important;
    max-width: none !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  /* براکت‌های گوشه در حلقه‌ی پنل دوربین */
  html body [data-screen="capture"] .camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame {
    background:
      linear-gradient(var(--cyan), var(--cyan)) left 0 top 0 / 26px 3px,
      linear-gradient(var(--cyan), var(--cyan)) left 0 top 0 / 3px 26px,
      linear-gradient(var(--cyan), var(--cyan)) right 0 top 0 / 26px 3px,
      linear-gradient(var(--cyan), var(--cyan)) right 0 top 0 / 3px 26px,
      linear-gradient(var(--cyan), var(--cyan)) left 0 bottom 0 / 26px 3px,
      linear-gradient(var(--cyan), var(--cyan)) left 0 bottom 0 / 3px 26px,
      linear-gradient(var(--cyan), var(--cyan)) right 0 bottom 0 / 26px 3px,
      linear-gradient(var(--cyan), var(--cyan)) right 0 bottom 0 / 3px 26px,
      rgba(4, 16, 17, .6) !important;
    background-repeat: no-repeat !important;
    border-color: rgba(10, 186, 181, .18) !important;
  }
}
/* تیتر کپچر بزرگ‌تر از سقف نردبان ۱۱۰۰ (فقط وقتی جا هست) */
@media (max-height: 1100px) and (min-height: 761px) and (min-width: 768px) {
  /* هدلاین مرجع 120px است ولی ستون ما (کنار دوربین) باریک‌تر از هیروی تمام‌عرض
     است؛ برای همان حسِ سه‌خطی بدون سرریز، مقیاس به عرض ستون گره می‌خورد */
  html body #dialogTitle#dialogTitle {
    font-size: clamp(60px, 4.9vw, 96px) !important;
    line-height: 1.0 !important;
  }
  /* الگوی رنگ مرجع: خط میانی سایان، بقیه سفید (Innovative At «Nanoscale») */
  html body #dialogTitle#dialogTitle br { display: none !important; }
  html body #dialogTitle#dialogTitle strong {
    display: block !important;
    color: #ffffff !important;   /* مرجع: rgb(255,255,255) دقیق */
  }
  html body #dialogTitle#dialogTitle strong::first-line {
    color: var(--cyan) !important;
  }
  /* دوربین بلندتر حالا که از بالای ستون شروع می‌شود */
  html body [data-screen="capture"] .camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame {
    width: min(38vw, 56dvh, 560px) !important;
  }
}

/* ============================================================================
   CAPTURE — فاز مرجع‌محور (تأیید کاربر): تایپ پلکانی + بافت تزئینی + لیبل LIVE
   تیتر در مدیای بالا ۵۸px شد و به‌طور طبیعی سه‌خطی می‌شکند (الگوی هدلاین مرجع).
   لایه‌ی تزئینی کراس/نقطه‌چین که در DOM خاموش بود، فقط با مختصات جدید برای
   چیدمان فعلی روشن می‌شود. cqwهای قدیمی بدون container بی‌معنا بودند.
   ============================================================================ */
@media (min-width: 768px) {
  html body .modal-shell .decorative-layer.decorative-layer.decorative-layer {
    display: none !important; /* بازخورد کاربر: این المان‌ها در دیزاین‌سیستم مرجع نیستند */
    z-index: 2 !important;
    opacity: .42 !important;
    pointer-events: none !important;
  }
  html body .modal-shell .decor-cross.decor-cross.decor-cross {
    display: none !important;
    position: absolute !important;
    width: auto !important;
    height: auto !important;
    color: var(--cyan) !important;
    font-family: var(--nanno-font-body) !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    opacity: .7 !important;
  }
  html body .modal-shell .decor-cross-top.decor-cross-top { right: 4vw !important; top: 130px !important; left: auto !important; bottom: auto !important; }
  html body .modal-shell .decor-cross-left.decor-cross-left { left: 5.5vw !important; top: 58% !important; right: auto !important; bottom: auto !important; }
  html body .modal-shell .decor-cross-bottom.decor-cross-bottom { left: 44vw !important; top: 72% !important; right: auto !important; bottom: auto !important; }
  html body .modal-shell .decor-dots.decor-dots.decor-dots {
    display: none !important;
    position: absolute !important;
    background-image: radial-gradient(circle, rgba(10,186,181,.62) 0 1.6px, transparent 2px) !important;
    background-size: 16px 16px !important;
    opacity: .5 !important;
  }
  html body .modal-shell .decor-dots-top.decor-dots-top { right: 2vw !important; top: 210px !important; left: auto !important; width: 130px !important; height: 170px !important; }
  html body .modal-shell .decor-dots-bottom.decor-dots-bottom { left: 13vw !important; top: auto !important; bottom: 150px !important; width: 190px !important; height: 76px !important; }

  /* لیبل LIVE روی فید فعال دوربین */
  html body [data-screen="capture"] .camera-frame.has-camera.camera-frame.camera-frame.camera-frame {
    position: relative !important;
  }
  html body [data-screen="capture"] .camera-frame.has-camera.camera-frame.camera-frame.camera-frame::before {
    content: "\25CF  LIVE";
    position: absolute;
    top: 28px;
    left: 28px;
    z-index: 21;
    font-family: var(--nanno-font-body);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .18em;
    color: var(--cyan);
    padding: 6px 10px;
    border: 1px solid rgba(10, 186, 181, .42);
    background: rgba(3, 16, 17, .72);
    pointer-events: none;
    animation: nvLivePulse 1.8s ease-in-out infinite;
  }
}
@keyframes nvLivePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* ============================================================================
   CAPTURE — پاس حرفه‌ای نهایی (چک دوباره‌ی مرجع، بخش‌های داخلی سایت)
   - نوار مراحل: زیرخط خاکستریِ شش‌تکه حذف؛ فقط مرحله‌ی فعال زیرخط سایان دارد
   - لید: اندازه/تنفس بدنه‌ی متن مرجع (18px / 1.6 / سنجه‌ی خوانا)
   - کپشن دوربین: سطر تکراری وسط حذف (@decision: hint با helper هم‌معنا بود)
   - هدر کمی از نوار بالا فاصله می‌گیرد (ریتم عمودی هیروی مرجع)
   ============================================================================ */
html body .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button {
  border-bottom-color: transparent !important;
}
html body li.is-active .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button,
html body .experience-stepper-button.is-active.is-active.is-active.is-active {
  border-bottom-color: var(--nv-accent, #0ABAB5) !important;
}
html body li.is-complete .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button,
html body .experience-stepper-button.is-complete.is-complete.is-complete.is-complete {
  border-bottom-color: rgba(8, 159, 154, .55) !important;
}
@media (min-width: 768px) {
  /* هدر باید از زیر لوگوی بزرگ (بالا-چپ، ~۱۷۰px) شروع شود */
  html body [data-screen="capture"] .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header {
    margin-top: max(clamp(76px, 8.6dvh, 104px), calc(clamp(280px, 22vw, 400px) * 0.374 - 44px)) !important;
  }
}
@media (min-width: 1100px) and (max-height: 900px) {
  html body #dialogTitle#dialogTitle { font-size: min(4.9vw, 80px) !important; }
  html body [data-screen="capture"] .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header {
    margin-top: 112px !important;
  }
}
@media (min-width: 1100px) {
  html body [data-screen="capture"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle {
    font-size: 25px !important;
    line-height: 35px !important;
    max-width: 46ch !important;
    color: #ffffff !important;
  }
  html body [data-screen="capture"] .camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint {
    display: none !important;
  }
}

/* ============================================================================
   HEADER PLAN A — 2026-08-30 (تأیید کاربر): ناوبری تایپی به سبک منوی مرجع
   دایره‌ها حذف؛ هر مرحله «۰۱ CAPTURE»: شماره‌ی دورقمی سایانِ کم‌رنگ + لیبل
   فاصله‌دار. فعال: لیبل سفید + زیرخط سایان (از قبل). گذشته: سایان محو.
   هیرلاین ظریف زیر کل بار.
   ============================================================================ */
html body .experience-stepper.experience-stepper.experience-stepper.experience-stepper {
  gap: 44px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
}
html body .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button {
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 0 2px 12px !important;
}
html body .experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  color: rgba(10, 186, 181, .5) !important;
}
html body .experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker::before {
  content: "0";
}
html body .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button span:last-child {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  color: #6d7a79 !important;
}
html body li.is-active .experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker,
html body .experience-stepper-button.is-active .experience-stepper-marker.experience-stepper-marker.experience-stepper-marker {
  color: var(--nv-accent, #0ABAB5) !important;
}
html body li.is-active .experience-stepper-button.experience-stepper-button.experience-stepper-button span:last-child,
html body .experience-stepper-button.is-active.is-active.is-active span:last-child {
  color: #f4f7f7 !important;
}
html body li.is-complete .experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker,
html body .experience-stepper-button.is-complete .experience-stepper-marker.experience-stepper-marker.experience-stepper-marker {
  color: rgba(10, 186, 181, .62) !important;
}
html body li.is-complete .experience-stepper-button.experience-stepper-button.experience-stepper-button span:last-child,
html body .experience-stepper-button.is-complete.is-complete.is-complete span:last-child {
  color: rgba(10, 186, 181, .62) !important;
}

/* ============================================================================
   NAV RAIL + BACKDROP — 2026-08-30 (درخواست کاربر وسط کار):
   ۱) شش مرحله مثل منوی عمودی راستِ مرجع: تایپ درشت راست‌چین، آیتم فعال سایان
      با نقطه، بدون شماره/زیرخط. فقط در عرض ≥1100 (پایین‌تر، نوار بالایی می‌ماند).
   ۲) پس‌زمینه‌ی کل مودال: عکس لابِ موجود (modal-lab-bg.jpg) با روکش تیره‌ی
      گرادیانی از چپ — هویت بصری سکشن‌های مرجع.
   ============================================================================ */
@media (min-width: 1100px) {
  /* ×۹ لازم است: canonical §17.8 با ×۸ position:relative می‌دهد (بعداً در ژنراتور یکدست شود) */
  html body .experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper {
    position: fixed !important;
    inset: auto !important;
    /* One shared top edge for the whole product (Nahira, 2026-09-01). Every
       stage now starts its content at the top of its content box instead of
       centring it, so the rail starts there too: left text, middle column and
       rail all begin on the same line. This replaces the centring formula from
       earlier today - centring the rail on the content still left it reading
       as a third staggered start. */
    /* The rail's box starts on the shared line, but its first label is text:
       half-leading and the font's ascender gap push the visible cap 15-20px
       below the panel edges beside it. Optical compensation so the letters,
       not the box, line up with the panels. */
    top: calc(var(--nv-shell-header-h) + var(--nv-stage-pad-top) - 6px) !important;
    bottom: auto !important;
    left: auto !important;
    right: 42px !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    z-index: 9 !important;
  }
  html body .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    min-width: 0 !important;
  }
  /* شماره‌ی مرحله با فونت خود پروژه، قبل از لیبل: «01 Capture» */
  html body .experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker {
    display: inline-block !important;
    order: 0 !important;
    width: auto !important;
    font-family: var(--nanno-font-body, "Space Grotesk", sans-serif) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    color: rgba(10, 186, 181, .55) !important;
  }
  html body li.is-active .experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker {
    color: var(--nv-accent, #0ABAB5) !important;
  }
  html body li.is-complete .experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker {
    color: rgba(10, 186, 181, .75) !important;
  }
  html body li.is-active .experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker {
    color: var(--nv-accent, #0ABAB5) !important;
  }
  html body li.is-complete .experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker {
    color: rgba(10, 186, 181, .7) !important;
  }
  html body .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button span:last-child {
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    line-height: 32px !important;
    color: rgba(255, 255, 255, .95) !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .55) !important;
  }
  html body li.is-complete .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button span:last-child,
  html body .experience-stepper-button.is-complete.is-complete.is-complete.is-complete.is-complete span:last-child {
    color: rgba(255, 255, 255, .95) !important;
  }
  html body li.is-active .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button span:last-child,
  html body .experience-stepper-button.is-active.is-active.is-active.is-active.is-active span:last-child {
    color: var(--nv-accent, #0ABAB5) !important;
  }
  html body li.is-active .experience-stepper-button.experience-stepper-button.experience-stepper-button::before,
  html body .experience-stepper-button.is-active.is-active.is-active::before {
    content: "" !important;
    display: inline-block !important;
    width: 11px !important;
    height: 11px !important;
    border-radius: 50% !important;
    background: var(--nv-accent, #0ABAB5) !important;
    box-shadow: 0 0 0 3px rgba(10, 186, 181, .22) !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    width: 9px !important;
    height: 9px !important;
    order: 0 !important;
  }
  /* نقطه‌چین بالا-راست از مسیر ریل ناوبری کنار می‌رود */
  html body .modal-shell .decor-dots-top.decor-dots-top { top: 84px !important; right: 6vw !important; }
}
/* پس‌زمینه‌ی یکپارچه‌ی مودال: عکس لاب + روکش تیره از چپ (الگوی سکشن‌های مرجع) */
html body .modal-shell.modal-shell.modal-shell {
  background:
    linear-gradient(270deg, rgba(3, 8, 8, .85) 0%, rgba(3, 8, 8, .35) 14%, transparent 26%),
    linear-gradient(90deg, rgba(3, 6, 6, .94) 0%, rgba(3, 6, 6, .74) 40%, rgba(4, 16, 16, .44) 100%),
    linear-gradient(rgba(6, 32, 31, .22), rgba(6, 32, 31, .22)),
    url("/static/images/background.jpg") center / cover no-repeat,
    #050505 !important;
}

/* ============================================================================
   LOGO آزاد — 2026-08-30 (درخواست کاربر): لوگو مثل صفحه‌ی ورود، بدون نوارِ
   منو، با تگ‌لاین، و ~۳۵٪ بزرگ‌تر. فقط در حالت ریل (≥1100)؛ پایین‌تر نوار
   بالایی لازم است. canonical §17.8 با ×۸ بار ۷۶px می‌سازد — ×۹ لازم است.
   ============================================================================ */
@media (min-width: 1100px) {
  html body .modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 28px 0 0 48px !important;
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 8 !important;
  }
  html body .modal-logo.modal-logo.modal-logo.modal-logo.modal-logo.modal-logo.modal-logo.modal-logo.modal-logo {
    width: clamp(280px, 22vw, 400px) !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: left top !important;
  }
}

/* ============================================================================
   AMBIENT VIDEO + ترازِ لبه‌ی چپ — 2026-08-30 (بازخورد کاربر):
   ۱) مثل مرجع، زیر صفحه ویدئو باشد نه عکس — ویدئوی محیطی (کلید ادمین
      media_ambient_video_1_path) با z:-1 داخل شل؛ روکش گرادیان روی ::before.
   ۲) همه‌چیز روی یک خط چپ: padding چپ کپچر = 48px هم‌تراز لوگو (مثل مرجع که
      لوگو و UNLOCK یک لبه دارند).
   پوستر/عکس پس‌زمینه به‌عنوان fallback زیر ویدئو می‌ماند.
   ============================================================================ */
html body .modal-shell.modal-shell.modal-shell.modal-shell {
  isolation: isolate !important;
}
html body .modal-ambient-video.modal-ambient-video.modal-ambient-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
html body .modal-shell.modal-shell.modal-shell.modal-shell::before {
  content: "" !important;
  display: block !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  /* استخراج عینی از مرجع: .header-overlay (باند تیره‌ی بالا + پایین) و
     .video-overlay (محوشدن قوی پایین). هیچ گرادیان چپ/ته‌رنگی در مرجع نیست. */
  background:
    linear-gradient(rgb(16, 16, 16) 0px, rgba(25, 25, 25, .4) 20%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to top, rgb(16, 16, 16) 0px, rgba(25, 25, 25, .4) 20%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(16, 16, 16, .9) 90%, rgb(16, 16, 16) 100%) !important;
}
/* مرجع خود ویدئو را هم تیره می‌کند: filter: brightness(0.8) روی .header-video */
html body .modal-ambient-video.modal-ambient-video.modal-ambient-video.modal-ambient-video {
  filter: brightness(0.8) !important;
}
html body .modal-shell.modal-shell.modal-shell.modal-shell::after { content: none !important; }
@media (min-width: 1100px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="capture"] {
    padding-left: 48px !important;
    padding-right: clamp(150px, 11vw, 210px) !important;
  }
}

/* ============================================================================
   REFERENCE PARITY — 2026-08-30: اعداد واقعیِ کامپیوتدشده از nannovative.com
   دکمه‌ها: 24px/500، padding 12/24، بوردر 2px، پرایمری گرادیان + متن مشکی +
   گلوی سایان؛ سکندری گلس‌مورفیسم واقعی مرجع (سفید ۱۰٪ + blur(10px) + گلوی سفید).
   eyebrow با مشخصات تگ‌لاین مرجع (ls 2.5px). چیپ حریم خصوصی هم گلس.
   ============================================================================ */
@media (min-width: 1100px) {
  html body [data-screen="capture"] .experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow {
    font-size: 22px !important;
    letter-spacing: 2.5px !important;
    color: #ffffff !important;
  }
  html body [data-screen="capture"] .screen-actions .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button,
  html body [data-screen="capture"] .screen-actions .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button {
    font-size: 24px !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    padding: 12px 24px !important;
    min-height: 62px !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-radius: 0 !important;
  }
  html body [data-screen="capture"] .screen-actions .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button {
    background: linear-gradient(135deg, #0ABAB5, #089F9A) !important;
    border-color: #0ABAB5 !important;
    color: #000 !important;
    box-shadow: 0 4px 15px rgba(10, 186, 181, .3) !important;
  }
  html body [data-screen="capture"] .screen-actions .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button {
    background: rgba(255, 255, 255, .1) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, .1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
  html body [data-screen="capture"] .screen-actions .primary-button svg,
  html body [data-screen="capture"] .screen-actions .secondary-button svg {
    width: 22px !important;
    height: 22px !important;
  }
  /* چیپ حریم خصوصی: گلس مرجع، بدون نوار تأکید */
  html body [data-screen="capture"] .secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note {
    border: 1px solid rgba(255, 255, 255, .25) !important;
    border-left-width: 1px !important;
    background: rgba(255, 255, 255, .08) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: #eef4f3 !important;
  }
}
@media (min-width: 1100px) and (max-height: 820px) {
  html body #dialogTitle#dialogTitle { font-size: min(4.9vw, 68px) !important; }
}

/* گارد ریسپانسیو — 2026-08-30 */
@media (min-width: 1100px) and (max-width: 1440px) {
  /* ستون چپ در این بازه ~400px است؛ تیتر نباید چهارخطی شود */
  html body #dialogTitle#dialogTitle { font-size: min(4.15vw, 60px) !important; }
  html body [data-screen="capture"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle {
    font-size: 20px !important;
    line-height: 1.45 !important;
  }
}
@media (min-width: 1100px) and (max-height: 760px) {
  html body #dialogTitle#dialogTitle { font-size: min(4vw, 52px) !important; }
  html body [data-screen="capture"] .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header {
    margin-top: max(60px, calc(clamp(280px, 22vw, 400px) * 0.374 - 46px)) !important;
  }
  /* دوربین در ارتفاع کوتاه آب نرود */
  html body [data-screen="capture"] .camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame {
    width: min(34vw, 54dvh, 460px) !important;
  }
  html body [data-screen="capture"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle {
    font-size: 17px !important;
    line-height: 1.4 !important;
  }
  html body [data-screen="capture"] .experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow {
    font-size: 16px !important;
  }
  html body [data-screen="capture"] .screen-actions .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button,
  html body [data-screen="capture"] .screen-actions .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button {
    font-size: 18px !important;
    min-height: 48px !important;
    padding: 8px 18px !important;
  }
}

/* نوار بالایی حالت میانه (۷۶۸–۱۰۹۹): جا برای لوگو + چیپ‌های فشرده‌تر */
@media (min-width: 768px) and (max-width: 1099px) {
  html body .experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper {
    padding: 6px 16px 0 200px !important;
    gap: clamp(10px, 2.2vw, 30px) !important;
    justify-content: center !important;
  }
  html body .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button span:last-child {
    font-size: 11px !important;
    letter-spacing: .12em !important;
  }
  html body .experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker {
    font-size: 10px !important;
  }
}

/* هم‌پوشانی متن/خط با قاب دوربین در نمایشگرهای عریض تأیید نشد — حذف شد؛
   فرمول «نزدیک‌ترین وسط بدون برخورد» در همه‌ی عرض‌ها برقرار است. */

/* ============================================================================
   HERO SCALE — 2026-08-30 (تأیید کاربر): تیتر در مقیاس واقعی مرجع، دوربین
   کنار منوی راست. اندازه‌ی تیتر با فرمول از عرضِ آزاد (تا لبه‌ی دوربین) و
   ارتفاع صفحه محاسبه می‌شود؛ در نمایشگر عریض به ~120px مرجع می‌رسد و هرگز
   نه به دوربین می‌خورد نه سرریز عمودی می‌سازد.
   ============================================================================ */
@media (min-width: 1100px) {
  html body [data-screen="capture"] .camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame {
    left: auto !important;
    right: clamp(190px, 12vw, 230px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  /* ریتم مرجع: خط سایان (CLEANROOM) بزرگ، خطوط سفید ~۶۸٪ آن — مثل
     UNLOCK / THE POTENTIAL OF / NANOTECHNOLOGY. فرمول همچنان از عرض آزاد و
     ارتفاع صفحه سقف می‌گیرد تا نه برخورد باشد نه سرریز. */
  html body #dialogTitle#dialogTitle {
    --nv-hero-fs: clamp(56px, min(calc((100vw - 292px - min(38vw, 56dvh, 560px)) / 5.5), calc((100dvh - 560px) / 2.4)), 120px);
    font-size: calc(var(--nv-hero-fs) * 0.7083) !important;   /* مرجع: 85/120 */
    /* فونت هدلاین مرجع Bayon وزن ۴۰۰ است — تیتر ما اشتباهاً Space Grotesk 700 می‌گرفت
       (تشخیص کاربر). Bayon فقط وزن ۴۰۰ دارد؛ بولد مصنوعی حروف را خراب می‌کند. */
    font-family: "Bayon", var(--nanno-font-display, sans-serif) !important;
    font-weight: 400 !important;
  }
  html body #dialogTitle#dialogTitle strong::first-line {
    font-size: var(--nv-hero-fs) !important;
  }
  html body [data-screen="capture"] .screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions {
    max-width: min(560px, calc(100vw - 292px - min(38vw, 56dvh, 560px))) !important;
  }
  /* هدر از قید ستون گرید آزاد می‌شود تا تیترِ بزرگ سه‌خطی بماند؛ سقفش لبه‌ی دوربین */
  html body [data-screen="capture"] .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: calc(100vw - 316px - min(38vw, 56dvh, 560px)) !important;
  }
}

/* سایه‌ی متنِ به‌جامانده از لایه‌های قدیمی روی تیتر و فرزندانش — مرجع سایه ندارد */
html body #dialogTitle#dialogTitle,
html body #dialogTitle#dialogTitle span,
html body #dialogTitle#dialogTitle strong {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* ============================================================================
   PIXEL PARITY — 2026-08-30. اعداد زیر همگی از nannovative.com در همین
   ویوپورت (1798×864) به‌صورت computed اندازه‌گیری شده‌اند، بدون حدس.
   مرجع: حاشیه‌ی چپ 37 | لوگو 407×130 @(37,25) | تگ‌لاین 24px/ls2.5/lh normal
   دکمه‌ها 66px ارتفاع، lh 38.4، فاصله 16 | ریل 20/700/lh32، gap 12، right 41،
   غیرفعال سفید خالص.
   ============================================================================ */
@media (min-width: 1100px) {
  /* حاشیه‌ی چپ دقیقاً 37px */
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="capture"] {
    padding-left: 37px !important;
  }
  html body .modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header {
    padding: 25px 0 0 37px !important;
  }
  html body .modal-logo.modal-logo.modal-logo.modal-logo.modal-logo.modal-logo.modal-logo.modal-logo.modal-logo.modal-logo {
    width: 407px !important;
  }
  html body [data-screen="capture"] .screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions {
    left: 37px !important;
  }
  /* eyebrow در جایگاه تگ‌لاین مرجع: 24px / ls 2.5px / lh normal */
  html body [data-screen="capture"] .experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow {
    font-size: 24px !important;
    line-height: normal !important;
    letter-spacing: 2.5px !important;
  }
  /* دکمه‌ها: ارتفاع 66 از lh 38.4 + pad 12 + border 2 ساخته می‌شود */
  html body [data-screen="capture"] .screen-actions .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button,
  html body [data-screen="capture"] .screen-actions .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button {
    line-height: 38.4px !important;
    min-height: 0 !important;
  }
  html body [data-screen="capture"] .screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions {
    column-gap: 16px !important;
  }
  /* ریل: سفید خالص مثل مرجع، فاصله‌ی راست 41 */
  html body .experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper {
    right: 41px !important;
    gap: 12px !important;
  }
  html body .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button span:last-child,
  html body li.is-complete .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button span:last-child {
    color: rgb(255, 255, 255) !important;
    line-height: 32px !important;
  }
}

/* ریلِ عمودی: نوار پیشرفتِ افقی (طراحی نوار بالایی) اینجا یک ردیف خالی می‌ساخت
   و مرکز عمودی را جابه‌جا می‌کرد — در حالت ریل حذف می‌شود. */
@media (min-width: 1100px) {
  html body .experience-stepper .experience-stepper-track.experience-stepper-track.experience-stepper-track {
    display: none !important;
  }
}

/* ============================================================================
   TEXT CRISPNESS — 2026-08-30 (تشخیص کاربر: گوشه‌ی حروف گردتر از مرجع بود)
   ریشه: انیمیشن nvFadeInUp با animation-fill-mode:both یک
   transform: matrix(1,0,0,1,0,0) دائمی روی .flow-screen باقی می‌گذاشت.
   هر transform (حتی همانی) لایه‌ی composited می‌سازد و آنتی‌آلیاسِ متن را از
   subpixel به grayscale می‌برد ⇒ لبه‌ها نرم/گرد دیده می‌شوند. مرجع transform
   ندارد. راه‌حل: همان ورودِ نرم، اما فقط با opacity — بدون transform.
   ============================================================================ */
@keyframes nvScreenFadeNoTransform {
  from { opacity: 0; }
  to   { opacity: 1; }
}
html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen {
  animation-name: nvScreenFadeNoTransform !important;
  transform: none !important;
}

/* ============================================================================
   FONT WEIGHT FIX — 2026-08-30 (تشخیص کاربر، تأیید با اندازه‌گیری)
   <strong> داخل تیتر font-weight:700 می‌گرفت (h1 و <span> روی 400 بودند).
   Bayon فقط وزن 400 دارد ⇒ کروم بولدِ مصنوعی می‌ساخت: ضخامت ساقه‌ها بیشتر و
   گوشه‌ها گردتر، دقیقاً همان تفاوتی که در N دیده شد. نکته‌ی مهم: بولد مصنوعی
   عرضِ گلیف را عوض نمی‌کند (هر سه پروب 488.6px) — برای همین تست عرض آن را
   نشان نداد و باید وزن را مستقیم چک می‌کردم.
   مرجع: هر دو خط وزن 400.
   ============================================================================ */
/* دامنه: فقط جایی که Bayon استفاده می‌شود (فعلاً تیتر Capture). تیترهای دیگر
   با Space Grotesk رندر می‌شوند که وزن ۷۰۰ واقعی دارد ⇒ آنجا بولد جعلی نیست
   و نباید ۴۰۰ شوند. font-synthesis برای همه خاموش می‌ماند (بندِ بعدی). */
html body #dialogTitle#dialogTitle,
html body #dialogTitle#dialogTitle span,
html body #dialogTitle#dialogTitle strong,
html body #dialogTitle#dialogTitle b,
html body #dialogTitle#dialogTitle em {
  font-weight: 400 !important;
  font-synthesis-weight: none !important;
  -webkit-font-synthesis: none !important;
}
html body #dialogTitle#dialogTitle strong::first-line {
  font-weight: 400 !important;
}
/* گاردِ عمومی: هر تیتری که در آینده Bayon بگیرد، بولد مصنوعی نسازد */
html body .flow-title.flow-title.flow-title,
html body .flow-title.flow-title.flow-title * {
  font-synthesis-weight: none !important;
  -webkit-font-synthesis: none !important;
}

/* ============================================================================
   MOBILE PASS — 2026-08-30 (بازخورد: «روی موبایل بهم‌ریختگی داشت»)
   اندازه‌گیری در 563×723 (کمینه‌ی پنجره‌ی کروم) نشان داد:
   ۱) نوار مراحل: لوگو روی «01» می‌افتاد
   ۲) کنسول هیرو: قاب تصویر 430×162 بود و عکس پرتره (941×1672) داخلش
      لِتِرباکس و ریز می‌شد
   ۳) ورود ویدئویی: دکمه‌ها با عرض دسکتاپ زیر هم و چسبیده به زیرنویس
   ۴) کپچر: نوت حریم خصوصی از پایین صفحه بریده می‌شد (چون overflow:hidden است
      اسکرول هم نداشت ⇒ محتوا حذف بصری می‌شد)
   ============================================================================ */
@media (max-width: 767px) {
  /* ۱) نوار مراحل: از بعد لوگو شروع شود، وسط‌چین عمودی */
  html body .experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper {
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 0 14px 0 172px !important;
    gap: clamp(8px, 3vw, 18px) !important;
    height: 56px !important;
  }
  html body .modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 0 0 14px !important;
    align-items: center !important;
  }
  html body .modal-logo.modal-logo.modal-logo.modal-logo.modal-logo.modal-logo.modal-logo.modal-logo.modal-logo {
    width: 132px !important;
    height: auto !important;
  }
  html body .experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker {
    display: inline-block !important;
    font-size: 12px !important;
    color: rgba(10, 186, 181, .5) !important;
  }
  html body li.is-active .experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker {
    color: var(--nv-accent, #0ABAB5) !important;
  }

  /* ۲) کنسول هیرو: قاب پرتره‌ی واقعی + پرشدنِ کامل کادر */
  html body .lab-hero-visual-frame.lab-hero-visual-frame.lab-hero-visual-frame.lab-hero-visual-frame {
    width: min(62vw, 260px) !important;
    max-width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    max-height: 100% !important;
    margin-inline: auto !important;
  }
  html body .lab-hero-subject.lab-hero-subject.lab-hero-subject.lab-hero-subject {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 22% !important;
  }

  /* ۳) ورود ویدئویی: ستون تمام‌عرض، فاصله‌ی درست از زیرنویس */
  html body .video-entry-actions.video-entry-actions.video-entry-actions.video-entry-actions.video-entry-actions {
    left: 20px !important;
    right: 20px !important;
    bottom: 24px !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: auto !important;
    max-width: none !important;
    gap: 12px !important;
  }
  html body .video-entry-actions .video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button.video-entry-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 56px !important;
    padding: 14px 18px !important;
    font-size: 18px !important;
    white-space: nowrap !important;
  }

  /* ۴) کپچر: همه‌چیز داخل ارتفاع جا شود (نوت دیگر بریده نشود) */
  html body #dialogTitle#dialogTitle {
    font-size: clamp(26px, 7.6vw, 34px) !important;
    line-height: 1.05 !important;
  }
  html body [data-screen="capture"] .experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow {
    font-size: 13px !important;
    letter-spacing: 1.6px !important;
  }
  html body [data-screen="capture"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle {
    font-size: 15px !important;
    line-height: 1.42 !important;
  }
  html body [data-screen="capture"] .camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame {
    width: min(64vw, 260px) !important;
    margin-inline: auto !important;
  }
  html body [data-screen="capture"] .camera-guide-helper.camera-guide-helper.camera-guide-helper.camera-guide-helper {
    display: none !important;
  }
  html body [data-screen="capture"] .camera-guide-instruction.camera-guide-instruction.camera-guide-instruction.camera-guide-instruction {
    padding: 6px 8px !important;
  }
  html body [data-screen="capture"] .screen-actions .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button,
  html body [data-screen="capture"] .screen-actions .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button {
    font-size: 15px !important;
    line-height: 1.2 !important;
    min-height: 48px !important;
    padding: 8px 12px !important;
  }
  html body [data-screen="capture"] .secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    padding: 8px 10px !important;
  }
}

/* موبایل — کپچر: قدِ ستون‌ها با ارتفاع صفحه بسته شود (اندازه‌گیری: مجموع
   198+347+288=833 در فضای 645 ⇒ هم‌پوشانی و بریدگی). دوربین به ردیف خودش
   محدود می‌شود و نوت تمام‌عرض و کوچک. */
@media (max-width: 767px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="capture"] {
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    grid-template-areas: "header" "camera" "status" "actions" !important;
    padding-inline: 20px !important;
    row-gap: 12px !important;
    align-content: stretch !important;
  }
  html body [data-screen="capture"] .camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame {
    grid-area: camera !important;
    height: 100% !important;
    width: auto !important;
    aspect-ratio: 3 / 4 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    align-self: center !important;
    justify-self: center !important;
  }
  html body [data-screen="capture"] .screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions {
    grid-area: actions !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
    align-content: end !important;
  }
  html body [data-screen="capture"] .screen-actions > *.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
  html body [data-screen="capture"] .screen-actions .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button,
  html body [data-screen="capture"] .screen-actions .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button {
    width: 100% !important;
    max-width: none !important;
  }
  html body [data-screen="capture"] .secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note {
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
  }
}

/* موبایل: کپشن دوربین دو سطری بماند تا کادر را نپوشاند (مثل دسکتاپ) */
@media (max-width: 767px) {
  html body [data-screen="capture"] .camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint {
    display: none !important;
  }
}

/* موبایل — کنسول هیرو: قاب با ارتفاعِ ردیف ساخته شود نه با عرض، وگرنه
   aspect-ratio بی‌اثر می‌ماند (اندازه‌گیری: 260×162 به‌جای پرتره). */
@media (max-width: 767px) {
  html body .lab-hero-console-shell.lab-hero-console-shell.lab-hero-console-shell {
    row-gap: 10px !important;
  }
  html body .lab-hero-visual.lab-hero-visual.lab-hero-visual.lab-hero-visual {
    min-height: 0 !important;
  }
  html body .lab-hero-visual-frame.lab-hero-visual-frame.lab-hero-visual-frame.lab-hero-visual-frame.lab-hero-visual-frame {
    height: 100% !important;
    width: auto !important;
    max-width: min(62vw, 260px) !important;
    max-height: 100% !important;
  }
  html body .lab-hero-title.lab-hero-title.lab-hero-title.lab-hero-title {
    font-size: clamp(30px, 8.4vw, 40px) !important;
    line-height: 1.02 !important;
  }
  html body .lab-hero-summary.lab-hero-summary.lab-hero-summary.lab-hero-summary {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
}

/* موبایل: چیپ TAP TO START از لبه‌ی قاب بیرون نزند */
@media (max-width: 767px) {
  html body .lab-hero-phone-hotspot.lab-hero-phone-hotspot.lab-hero-phone-hotspot.lab-hero-phone-hotspot.lab-hero-phone-hotspot::before {
    font-size: 11px !important;
    min-height: 34px !important;
    padding: 10px 10px !important;
    max-width: 90% !important;
    letter-spacing: .1em !important;
  }
}

/* ============================================================================
   TABLET BAND 768–1099 — 2026-08-30
   اندازه‌گیری در 820×723: چیدمان قدیمیِ دوستونه لید را تا x=828 می‌برد (بریده
   می‌شد) و پنل دوربین از لبه‌ی راست بیرون می‌زد. این بازه هم تک‌ستونی می‌شود
   (ریل کناری فقط از 1100 به بالاست)، ولی گاید دوربین همان «desktop framing»
   می‌ماند چون سوئیچ آن روی 767 است.
   ============================================================================ */
@media (min-width: 768px) and (max-width: 1099px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="capture"] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "header" "camera" "actions" !important;
    padding-inline: 32px !important;
    row-gap: 14px !important;
    align-content: stretch !important;
  }
  html body [data-screen="capture"] .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header {
    grid-area: header !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
  }
  html body #dialogTitle#dialogTitle {
    font-size: clamp(34px, 5.4vw, 48px) !important;
    line-height: 1.04 !important;
  }
  html body [data-screen="capture"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle {
    font-size: 17px !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
  }
  html body [data-screen="capture"] .camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame {
    position: relative !important;
    grid-area: camera !important;
    inset: auto !important;
    transform: none !important;
    height: 100% !important;
    width: auto !important;
    aspect-ratio: 3 / 4 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 auto !important;
  }
  html body [data-screen="capture"] .screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions {
    position: relative !important;
    grid-area: actions !important;
    inset: auto !important;
    left: auto !important;
    bottom: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  html body [data-screen="capture"] .screen-actions .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button,
  html body [data-screen="capture"] .screen-actions .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
  }
  html body [data-screen="capture"] .screen-actions > *.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions {
    position: static !important;
    flex: 1 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  html body [data-screen="capture"] .secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
}

/* بازه‌ی 768–1099: دکمه‌ها کنار هم (جا دارند) و کپشن دوربین دو سطری */
@media (min-width: 768px) and (max-width: 1099px) {
  html body [data-screen="capture"] .screen-actions .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button,
  html body [data-screen="capture"] .screen-actions .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button {
    width: max-content !important;
    flex: 0 0 auto !important;
    min-height: 52px !important;
    font-size: 18px !important;
  }
  html body [data-screen="capture"] .camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint.camera-guide-hint {
    display: none !important;
  }
  html body [data-screen="capture"] .camera-guide-helper.camera-guide-helper.camera-guide-helper.camera-guide-helper {
    display: none !important;
  }
}

/* بازه‌ی 768–1099: با ۸۲۰px عرض، تک‌ستونی دوربین را به 160×214 کوچک می‌کرد.
   دوستونه‌ی بدون ریل: متن چپ، دوربین راست با ارتفاع کامل. */
@media (min-width: 768px) and (max-width: 1099px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="capture"] {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.85fr) !important;
    grid-template-rows: auto 1fr auto !important;
    grid-template-areas: "header camera" "actions camera" "actions status" !important;
    column-gap: 24px !important;
    align-content: start !important;
  }
  html body [data-screen="capture"] .camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame {
    grid-area: camera !important;
    align-self: center !important;
    height: auto !important;
    width: 100% !important;
    max-height: 100% !important;
  }
  html body [data-screen="capture"] .screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions {
    align-content: start !important;
  }
}

/* کنسول هیرو (دسکتاپ): تیتر ۱۲۰px از y=149 شروع می‌شد در حالی که لوگو تا
   y=162 ادامه داشت ⇒ هم‌پوشانی روی تگ‌لاین. فاصله ساختاری شد. */
@media (min-width: 1100px) {
  html body .lab-hero-copy.lab-hero-copy.lab-hero-copy.lab-hero-copy {
    padding-top: 0 !important;
  }
  html body .lab-hero-title.lab-hero-title.lab-hero-title.lab-hero-title.lab-hero-title {
    margin-top: 26px !important;
  }
}

/* ============================================================================
   ERROR PLACEMENT + GLASS NAV — 2026-08-30 (بازخورد کاربر)
   ۱) پیام «Generation failed» باید زیر کادر دوربین بنشیند. قبلاً در بازه‌های
      موبایل/تبلت با display:none پنهانش کرده بودم (اشتباه: JS آن را با
      style.display=block نشان می‌دهد ولی !important من غالب می‌شد) و در
      دسکتاپ چون گرید-اریای «status» حذف شده بود، آزادانه کنار نوت می‌افتاد.
   ۲) نوار بالا: به‌جای نوار مشکیِ مات (#101010)، گلس‌مورفیسم هم‌زبان با
      دکمه‌ی ثانویه و چیپ حریم خصوصی؛ تایپوگرافی هم به دیزاین‌سیستم برگشت.
   ============================================================================ */

/* --- ۱) پیام خطا زیر دوربین --- */
html body [data-screen="capture"] .camera-status.camera-status.camera-status.camera-status {
  grid-area: status !important;
  justify-self: center !important;
  align-self: start !important;
  margin: 10px auto 0 !important;
  padding: 10px 16px !important;
  max-width: 100% !important;
  /* رنگ پیام را خود اپ به‌صورت inline ست می‌کند (سایان = موفق، قرمز = خطا).
     پس اینجا فقط قاب و بلار را می‌دهیم و لبه از currentColor می‌آید؛ قبلاً
     رنگ قرمز !important داشتیم و پیام‌های موفق هم قرمز دیده می‌شدند. */
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-left: 3px solid currentColor !important;
  background: rgba(2, 14, 15, .55) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  font-family: var(--nanno-font-body, "Space Grotesk", sans-serif) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  text-align: center !important;
}
@media (min-width: 1100px) {
  /* دوربین absolute است؛ پیام دقیقاً زیرش قفل می‌شود:
     نصفِ ارتفاع قاب = (2/3)×عرض، چون نسبت 3:4 است. */
  html body [data-screen="capture"] .camera-status.camera-status.camera-status.camera-status.camera-status {
    /* گرید-اریا باید آزاد شود: آیتمِ absolute داخل گرید، بلوکِ دربرگیرنده‌اش
       «ناحیه‌ی گرید» است نه کل صفحه ⇒ مختصات اشتباه محاسبه می‌شد. */
    grid-area: auto !important;
    position: absolute !important;
    right: clamp(190px, 12vw, 230px) !important;
    left: auto !important;
    top: auto !important;
    bottom: clamp(10px, 1.8dvh, 18px) !important;
    width: min(38vw, 56dvh, 560px) !important;
    margin: 0 !important;
  }
}

/* --- ۲) نوار بالا: گلس‌مورفیسم دیزاین‌سیستم --- */
@media (max-width: 1099px) {
  html body .modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header {
    background: rgba(255, 255, 255, .07) !important;
    backdrop-filter: blur(16px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.15) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .16) !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28) !important;
  }
  html body .experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper {
    border-bottom: 0 !important;
    background: transparent !important;
  }
  /* تایپوگرافی هم‌خانواده‌ی بقیه‌ی صفحه */
  html body .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button span:last-child {
    font-family: var(--nanno-font-body, "Space Grotesk", sans-serif) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, .55) !important;
  }
  html body li.is-active .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button span:last-child {
    color: #ffffff !important;
  }
  html body li.is-complete .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button span:last-child {
    color: rgba(255, 255, 255, .8) !important;
  }
  html body .experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker {
    font-family: var(--nanno-font-body, "Space Grotesk", sans-serif) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    color: rgba(10, 186, 181, .55) !important;
  }
  html body li.is-active .experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker {
    color: var(--nv-accent, #0ABAB5) !important;
  }
}

/* ============================================================================
   PHONE PASS — 2026-08-30، تست واقعی در 390×844 و 430×932 با مرورگر داخلی
   (Playwright/Chromium در کانتینر؛ پنجره‌ی کروم محلی زیر 563px نمی‌رفت).
   دو ایراد دیده شد: ۱) لایه‌ی تزئینی (کراس/نقطه‌چین) در موبایل هنوز روشن بود
   چون خاموش‌کردنش را داخل @media (min-width:768px) گذاشته بودم؛ ۲) نوت حریم
   خصوصی تا خط آخر می‌چسبید به کف صفحه.
   ============================================================================ */
html body .modal-shell .decorative-layer.decorative-layer.decorative-layer.decorative-layer,
html body .modal-shell .decor-cross.decor-cross.decor-cross.decor-cross,
html body .modal-shell .decor-dots.decor-dots.decor-dots.decor-dots {
  display: none !important;
}
@media (max-width: 767px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="capture"] {
    padding-bottom: 16px !important;
  }
  html body [data-screen="capture"] .secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note {
    font-size: 11px !important;
    line-height: 1.35 !important;
    padding: 7px 9px !important;
  }
}

/* موبایل — ورود ویدئویی: در 390 تیتر با فونت فالبک تا ۵ خط می‌شد و روی
   دکمه‌های سنجاق‌شده به کف می‌افتاد. تیتر سقف می‌گیرد و بلوک متن به اندازه‌ی
   ارتفاع دکمه‌ها فضا رزرو می‌کند. */
@media (max-width: 767px) {
  html body .video-entry-title.video-entry-title.video-entry-title.video-entry-title.video-entry-title {
    font-size: clamp(26px, 8.2vw, 42px) !important;
    line-height: 1.06 !important;
  }
  html body .video-entry-subtitle.video-entry-subtitle.video-entry-subtitle.video-entry-subtitle {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
  html body .video-entry-copy.video-entry-copy.video-entry-copy.video-entry-copy {
    padding-bottom: 170px !important;
  }
}

/* تیترها فقط بین کلمات بشکنند (در 390 کلمه‌ی CLEANROOM وسط کلمه می‌شکست) */
html body .lab-hero-title.lab-hero-title.lab-hero-title.lab-hero-title.lab-hero-title,
html body .video-entry-title.video-entry-title.video-entry-title.video-entry-title.video-entry-title.video-entry-title,
html body .flow-title.flow-title.flow-title.flow-title.flow-title {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* ============================================================================
   768–1099 پرتره (تست 768×1024 با مرورگر داخلی):
   ۱) در نوار بالا شماره‌ها روی لیبل‌ها می‌افتادند (فاصله کم بود)
   ۲) دوربین تا کف کشیده می‌شد و پیام خطا از آن جدا می‌افتاد
   ============================================================================ */
@media (min-width: 768px) and (max-width: 1099px) {
  html body .experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper {
    gap: clamp(14px, 2.4vw, 26px) !important;
    padding-left: 190px !important;
    padding-right: 16px !important;
  }
  html body .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button span:last-child {
    font-size: 12px !important;
    letter-spacing: .08em !important;
  }
  html body .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button {
    gap: 7px !important;
  }
  /* ردیف سوم فضای اضافی را می‌گیرد تا دوربین و خطا بالا و کنار هم بمانند */
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="capture"] {
    grid-template-rows: auto auto 1fr !important;
  }
  html body [data-screen="capture"] .camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame.camera-frame {
    grid-row: 1 / 3 !important;
    grid-column: 2 !important;
    align-self: start !important;
    max-height: min(100%, 62dvh) !important;
    height: auto !important;
  }
  html body [data-screen="capture"] .camera-status.camera-status.camera-status.camera-status.camera-status.camera-status {
    grid-row: 3 !important;
    grid-column: 2 !important;
    align-self: start !important;
    justify-self: stretch !important;
    margin: 12px 0 0 !important;
  }
}

/* 768–1099: محتوا در ارتفاع بلند (مثل 768×1024) وسط‌چین شود و لوگو با «01»
   تنه نزند. */
@media (min-width: 768px) and (max-width: 1099px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="capture"] {
    align-content: start !important;
    grid-template-rows: auto auto auto !important;
  }
  html body .experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper.experience-stepper {
    padding-left: 215px !important;
  }
}

/* موبایل: نوت با ×۷ کلاس هنوز 18px می‌گرفت (قاعده‌ی canonical قوی‌تر بود) و
   ۵ سطر می‌شد؛ ×۱۰ + کوچک‌کردن دکمه‌ها تا «UPLOAD PHOTO» دو خطی نشود. */
@media (max-width: 767px) {
  html body [data-screen="capture"] .secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  html body [data-screen="capture"] .screen-actions .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button,
  html body [data-screen="capture"] .screen-actions .secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button.secondary-button {
    font-size: 13.5px !important;
    letter-spacing: .02em !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }
}

/* ============================================================================
   EXPLORE (generating) — 2026-08-30: هم‌زبان‌کردن با Capture
   وضعیت قبل (اندازه‌گیری در 1800×865): هدر از x=687 شروع می‌شد (نه لبه‌ی 37)،
   تیتر 36px بود (نردبان 85/120 نبود)، پنل کوییز جعبه‌ی مشکیِ مات با بوردر 3px،
   و ریل پایین یک نوار تمام‌عرضِ مات. همه به الگوی Capture و گلس‌مورفیسم آمد.
   ============================================================================ */
@media (min-width: 1100px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="generating"] {
    grid-template-columns: minmax(0, 1fr) minmax(520px, 0.92fr) !important;
    grid-template-rows: 1fr auto !important;
    grid-template-areas: "header quiz" "status status" !important;
    align-content: start !important;
    padding-left: 37px !important;
    padding-right: clamp(150px, 11vw, 210px) !important;
    column-gap: clamp(28px, 4vw, 72px) !important;
  }
  html body [data-screen="generating"] .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header {
    grid-area: header !important;
    align-self: start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  /* نردبان تیتر مثل Capture: خط بزرگ سایان، خطوط سفید ۷۰٫۸٪ */
  html body #generatingTitle#generatingTitle {
    --nv-hero-fs: clamp(52px, min(calc((100vw - 292px - 520px) / 5.5), calc((100dvh - 470px) / 2.4)), 120px);
    font-size: calc(var(--nv-hero-fs) * 0.7083) !important;
    line-height: 1.0 !important;
    font-family: "Bayon", var(--nanno-font-display, sans-serif) !important;
    font-weight: 400 !important;
    text-shadow: none !important;
    letter-spacing: normal !important;
  }
  html body #generatingTitle#generatingTitle br { display: none !important; }
  html body #generatingTitle#generatingTitle strong {
    display: block !important;
    color: #ffffff !important;
  }
  html body #generatingTitle#generatingTitle strong::first-line {
    color: var(--cyan) !important;
    font-size: var(--nv-hero-fs) !important;
  }
  html body [data-screen="generating"] .experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow {
    font-size: 24px !important;
    letter-spacing: 2.5px !important;
    line-height: normal !important;
    color: #ffffff !important;
  }
  html body [data-screen="generating"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle {
    font-size: 25px !important;
    line-height: 35px !important;
    max-width: 46ch !important;
    color: #ffffff !important;
  }
  /* پنل کوییز: کارت گلس در جایگاه «مدیا»ی Capture */
  html body [data-screen="generating"] .generating-layout.generating-layout.generating-layout.generating-layout {
    grid-area: quiz !important;
    align-self: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media (min-width: 1100px) {
  html body #quizPanel#quizPanel {
    width: 100% !important;
    max-width: 100% !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .07) !important;
    backdrop-filter: blur(16px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.15) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .38) !important;
    padding: clamp(22px, 2.2vw, 34px) !important;
  }
  html body #quizPanel .quiz-option.quiz-option.quiz-option.quiz-option {
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .06) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    min-height: 56px !important;
    font-size: 17px !important;
    transition: background .2s ease, border-color .2s ease !important;
  }
  html body #quizPanel .quiz-option.quiz-option.quiz-option.quiz-option:hover {
    border-color: var(--cyan) !important;
    background: rgba(10, 186, 181, .14) !important;
  }
  /* ریل پایین: نوار گلس هم‌تراز با حاشیه‌ی چپ */
  html body [data-screen="generating"] .explore-loading-bar.explore-loading-bar.explore-loading-bar.explore-loading-bar {
    grid-area: status !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 14px 20px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    background: rgba(255, 255, 255, .06) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }
}

/* Explore — اصلاحات پس از اندازه‌گیری: هدر align-self:start می‌گرفت (روی لوگو
   می‌افتاد) و ریل پایین تمام‌عرض بود. */
@media (min-width: 1100px) {
  html body [data-screen="generating"] .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header {
    align-self: start !important;
    margin-top: clamp(60px, 7dvh, 96px) !important;
  }
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="generating"] {
    padding-top: clamp(150px, 17dvh, 190px) !important;
    padding-bottom: 18px !important;
  }
  html body [data-screen="generating"] .generating-layout.generating-layout.generating-layout.generating-layout.generating-layout {
    margin-top: clamp(40px, 5dvh, 70px) !important;
  }
  html body [data-screen="generating"] .explore-loading-bar.explore-loading-bar.explore-loading-bar.explore-loading-bar.explore-loading-bar.explore-loading-bar {
    background-color: rgba(255, 255, 255, .06) !important;
    background-image: none !important;
    box-shadow: none !important;
  }
}

/* ریل پایین Explore: margin:0 -72px تمام‌عرضش می‌کرد و یک گرادیانِ مات داشت */
@media (min-width: 1100px) {
  html body [data-screen="generating"] .explore-loading-bar.explore-loading-bar.explore-loading-bar.explore-loading-bar.explore-loading-bar.explore-loading-bar.explore-loading-bar {
    margin: 18px 0 0 !important;
    background-image: none !important;
    background-color: rgba(255, 255, 255, .06) !important;
  }
  html body [data-screen="generating"] .quiz-privacy-note.quiz-privacy-note.quiz-privacy-note {
    text-align: right !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    max-width: 30ch !important;
    margin-left: auto !important;
  }
}

/* ریل پایین Explore با #exploreLoadingBar استایل می‌گیرد (شناسه، پس از هر
   ترکیب کلاسی قوی‌تر است). margin:0 -72px آن را تمام‌عرض می‌کرد. */
@media (min-width: 1100px) {
  html body #exploreLoadingBar#exploreLoadingBar#exploreLoadingBar {
    margin: 18px 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 20px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    background-image: none !important;
    background-color: rgba(255, 255, 255, .06) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: none !important;
  }
}

/* ============================================================================
   EXPLORE — موبایل/تبلت (< 1100). قبلاً همه‌ی استایل گلس فقط ≥1100 بود، پس در
   موبایل کارت مشکیِ مات می‌ماند، ریل پایین تمام‌عرضِ مات بود و متنش بد می‌شکست.
   ============================================================================ */
@media (max-width: 1099px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="generating"] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "header" "quiz" "status" !important;
    align-content: start !important;
    padding-inline: 20px !important;
    padding-bottom: 14px !important;
    row-gap: 12px !important;
  }
  html body [data-screen="generating"] .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header {
    grid-area: header !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  html body #generatingTitle#generatingTitle {
    font-size: clamp(26px, 7.4vw, 34px) !important;
    line-height: 1.05 !important;
  }
  html body [data-screen="generating"] .experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow {
    font-size: 13px !important;
    letter-spacing: 1.6px !important;
  }
  html body [data-screen="generating"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
  html body [data-screen="generating"] .generating-layout.generating-layout.generating-layout.generating-layout {
    grid-area: quiz !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    min-height: 0 !important;
  }
  /* کارت گلس مثل دسکتاپ */
  html body #quizPanel#quizPanel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .07) !important;
    backdrop-filter: blur(16px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.15) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .34) !important;
  }
  html body #quizPanel .quiz-title.quiz-title.quiz-title { font-size: 22px !important; }
  html body #quizPanel .quiz-subtitle.quiz-subtitle.quiz-subtitle { font-size: 13px !important; line-height: 1.35 !important; }
  html body #quizPanel .quiz-option.quiz-option.quiz-option.quiz-option {
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .06) !important;
    min-height: 48px !important;
    font-size: 14.5px !important;
  }
  /* ریل پایین: گلس، دو ردیف مرتب، بدون تمام‌عرض شدن */
  html body #exploreLoadingBar#exploreLoadingBar#exploreLoadingBar {
    grid-area: status !important;
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 12px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 12px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    background-image: none !important;
    background-color: rgba(255, 255, 255, .06) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: none !important;
    font-size: 12px !important;
  }
  html body #exploreLoadingBar .explore-rail-progress.explore-rail-progress {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  html body #exploreLoadingBar .quiz-privacy-note.quiz-privacy-note {
    display: none !important;
  }
}

/* موبایل: لید Explore با یک قاعده‌ی قدیمی display:none می‌شد (پیام «داریم
   می‌بریمت داخل کلین‌روم» تنها توضیح این مرحله است و باید بماند). */
@media (max-width: 1099px) {
  html body [data-screen="generating"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle {
    display: block !important;
  }
}

/* ============================================================================
   PROFILE (portrait-discovery) — 2026-08-30: هم‌زبان‌کردن با Capture/Explore
   وضعیت قبل (1798×864): هدر از x≈773 و تیتر ~34px، کارت‌ها ۱۶۰px عرض و کپشن
   روی عکس می‌افتاد، عنوان‌ها وسط کلمه می‌شکستند و بولت‌ها از کف کارت بریده
   می‌شدند؛ کل بلوک وسط صفحه و نیمه‌ی چپ خالی.
   ============================================================================ */
@media (min-width: 1100px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="portrait-discovery"] {
    display: block !important;
    padding: clamp(150px, 17dvh, 190px) clamp(150px, 11vw, 210px) 22px 37px !important;
    align-content: stretch !important;
  }
  html body [data-screen="portrait-discovery"] .result-review-stage.result-review-stage.result-review-stage {
    display: grid !important;
    grid-template-columns: minmax(320px, 0.85fr) minmax(600px, 1.3fr) !important;
    grid-template-areas: "header cards" "header actions" !important;
    grid-template-rows: 1fr auto !important;
    align-content: start !important;
    column-gap: clamp(28px, 4vw, 72px) !important;
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  html body [data-screen="portrait-discovery"] .result-review-header.result-review-header.result-review-header {
    grid-area: header !important;
    align-self: start !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* نردبان تیتر مرجع */
  html body #resultsTitle#resultsTitle {
    --nv-hero-fs: clamp(48px, min(calc((100vw - 292px - 600px) / 6.2), calc((100dvh - 470px) / 2.6)), 110px);
    font-size: calc(var(--nv-hero-fs) * 0.7083) !important;
    line-height: 1.0 !important;
    font-family: "Bayon", var(--nanno-font-display, sans-serif) !important;
    font-weight: 400 !important;
    text-shadow: none !important;
    letter-spacing: normal !important;
    text-align: left !important;
  }
  html body #resultsTitle#resultsTitle br { display: none !important; }
  html body #resultsTitle#resultsTitle strong {
    display: block !important;
    color: var(--cyan) !important;
    font-size: var(--nv-hero-fs) !important;
  }
  html body [data-screen="portrait-discovery"] .experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow {
    font-size: 22px !important;
    letter-spacing: 2.5px !important;
    color: #ffffff !important;
    text-align: left !important;
  }
  html body [data-screen="portrait-discovery"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle {
    font-size: 20px !important;
    line-height: 1.5 !important;
    max-width: 40ch !important;
    color: #ffffff !important;
    text-align: left !important;
  }
  /* سه کارتِ گلس، عکس بالا و متن زیرش (نه روی عکس) */
  html body #resultGrid#resultGrid {
    grid-area: cards !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(12px, 1.2vw, 20px) !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  html body #resultGrid .result-card.result-card.result-card.result-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .07) !important;
    backdrop-filter: blur(14px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .32) !important;
    overflow: hidden !important;
    transition: border-color .2s ease, background .2s ease !important;
  }
  html body #resultGrid .result-card.result-card.result-card:hover {
    border-color: rgba(10, 186, 181, .6) !important;
    background: rgba(10, 186, 181, .1) !important;
  }
  html body #resultGrid .result-card:has(input:checked) {
    border-color: var(--cyan) !important;
    background: rgba(10, 186, 181, .14) !important;
    box-shadow: 0 0 0 1px var(--cyan), 0 16px 38px rgba(0, 0, 0, .36) !important;
  }
  html body #resultGrid .result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
  }
  html body #resultGrid .result-card-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  html body #resultGrid .result-caption.result-caption.result-caption {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    padding: 12px 14px 14px !important;
    background: transparent !important;
    text-align: left !important;
  }
  html body #resultGrid .portrait-direction-label.portrait-direction-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .14em !important;
    color: var(--cyan) !important;
    margin: 0 0 4px !important;
  }
  html body #resultGrid .result-caption strong {
    display: block !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
    color: #fff !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    margin: 0 0 8px !important;
  }
  html body #resultGrid .portrait-direction-points.portrait-direction-points {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  html body #resultGrid .portrait-direction-points li {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    color: rgba(255, 255, 255, .82) !important;
    margin: 0 0 4px !important;
    padding-left: 12px !important;
    position: relative !important;
  }
  html body #resultGrid .portrait-direction-points li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: .55em !important;
    width: 5px !important;
    height: 5px !important;
    background: var(--cyan) !important;
  }
  html body [data-screen="portrait-discovery"] .result-review-actions.result-review-actions.result-review-actions {
    grid-area: actions !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }
}

/* Profile — اصلاح پس از اندازه‌گیری: بولت سوم کارت اول بریده می‌شد (overflow
   روی کل کارت) و دکمه‌ی CTA به‌جای تراز با ستون کارت‌ها، وسط می‌افتاد. */
@media (min-width: 1100px) {
  html body #resultGrid .result-card.result-card.result-card.result-card.result-card {
    overflow: visible !important;
    align-self: stretch !important;
  }
  /* پرتره‌های تولیدی 2752×1536 هستند ⇒ نسبت 16:9 افقی، نه عمودی (تصحیح
     بازخورد کاربر؛ اندازه از فایل‌های واقعی uploads خوانده شد). */
  html body #resultGrid .result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper {
    aspect-ratio: 16 / 9 !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  html body #resultGrid .result-caption.result-caption.result-caption.result-caption {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  html body [data-screen="portrait-discovery"] .result-review-actions .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button {
    margin: 0 !important;
    justify-self: start !important;
  }
}

/* Profile: دکمه هنوز margin-inline:auto از canonical می‌گرفت (x=950 به‌جای 714) */
@media (min-width: 1100px) {
  html body [data-screen="portrait-discovery"] .result-review-actions.result-review-actions.result-review-actions > .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button {
    margin-inline: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Profile: justify-content:center روی .result-review-actions از لایه‌ی دیگری
   می‌آمد و دکمه را وسط می‌برد (x=950 در برابر ستون کارت‌ها 714). */
@media (min-width: 1100px) {
  html body [data-screen="portrait-discovery"] .result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions {
    justify-content: flex-start !important;
  }
}

/* پرتره‌ها افقی (16:9) هستند ⇒ سه کارت کنار هم بیش از حد پهن می‌شوند؛ در
   دسکتاپ ستون کارت‌ها بزرگ‌تر و کارت‌ها کشیده‌ی افقی می‌مانند. */
@media (min-width: 1100px) {
  html body [data-screen="portrait-discovery"] .result-review-stage.result-review-stage.result-review-stage.result-review-stage {
    grid-template-columns: minmax(300px, 0.7fr) minmax(680px, 1.55fr) !important;
  }
}

/* Profile: کپشن با flex:1 1 auto + min-height:0 فشرده می‌شد (ارتفاع 39 در
   برابر محتوای ~110) و متن از کارت بیرون می‌ریخت. */
@media (min-width: 1100px) {
  html body #resultGrid .result-caption.result-caption.result-caption.result-caption.result-caption {
    flex: 0 0 auto !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
  /* Reconciled 2026-09-01. Three rules from three rounds were fighting over
     this element - an x5 saying stretch, this x6 saying start, and a later x4
     saying stretch again - and the x6 won, so cards kept sizing to their own
     bullets: one line fewer meant a 14px shorter card. One rule now, and it
     says what was asked for - every card takes the height of the tallest. */
  html body #resultGrid .result-card.result-card.result-card.result-card.result-card.result-card {
    height: 100% !important;
    min-height: 0 !important;
    align-self: stretch !important;
  }
  html body #resultGrid .portrait-direction-points.portrait-direction-points.portrait-direction-points {
    display: block !important;
  }
}

/* ============================================================================
   PROFILE — هاور کارت‌ها و جای دکمه‌ی Continue (بازخورد کاربر)
   ریشه‌ی خرابی هاور: canonical با ×۸ کلاس روی :hover یک
   background: var(--nv-grad-card-hover) مات + blur(20px) می‌نشاند که کارت
   گلس را می‌پوشاند؛ ضمناً یک ::before براقِ عبوری هم روی کارت اجرا می‌شود.
   اینجا هاور به زبان خودمان تعریف می‌شود: قاب سایان، ته‌رنگ ملایم، عکس کمی
   روشن‌تر — بدون جابه‌جایی و بدون پوشاندن عکس.
   ============================================================================ */
html body #resultGrid .result-card.result-card.result-card.result-card.result-card.result-card.result-card.result-card.result-card:hover,
html body #resultGrid .result-card.result-card.result-card.result-card.result-card.result-card.result-card.result-card.result-card:focus-within {
  background: rgba(10, 186, 181, .12) !important;
  border-color: var(--cyan) !important;
  backdrop-filter: blur(14px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.1) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .38) !important;
  transform: none !important;
}
html body #resultGrid .result-card.result-card.result-card.result-card.result-card.result-card.result-card.result-card.result-card::before {
  content: none !important;
}
html body #resultGrid .result-card.result-card.result-card.result-card.result-card.result-card.result-card.result-card.result-card:hover img {
  transform: none !important;
  filter: brightness(1.06) !important;
}
html body #resultGrid .result-card.result-card.result-card.result-card.result-card.result-card.result-card.result-card.result-card img {
  transition: filter .2s ease !important;
}
/* دکمه‌ی ادامه به ستون متن می‌رود (الگوی Capture: اکشن زیر لید) */
@media (min-width: 1100px) {
  html body [data-screen="portrait-discovery"] .result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage {
    grid-template-areas: "header cards" "actions cards" !important;
    /* auto auto let the spanning media column split its height across both
       rows, so a top-aligned header and a top-aligned action row ended up
       half a screen apart. Row one is the header's own height and row two
       takes the remainder, so the action sits directly under the lede. */
    grid-template-rows: auto minmax(0, 1fr) !important;
  }
  html body [data-screen="portrait-discovery"] .result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions {
    grid-area: actions !important;
    align-self: start !important;
    margin: 26px 0 0 !important;
    width: auto !important;
  }
}

/* Profile: هدر تمام ارتفاع ستون را می‌گرفت (228→706) و دکمه به کف می‌افتاد و
   با لبه‌ی چپ هم‌تراز نبود (x=148 در برابر 109). */
@media (min-width: 1100px) {
  html body [data-screen="portrait-discovery"] .result-review-header.result-review-header.result-review-header.result-review-header.result-review-header {
    align-self: start !important;
    height: auto !important;
  }
  html body [data-screen="portrait-discovery"] .result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions {
    align-self: start !important;
    justify-self: start !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}

/* Profile: کارت‌ها کوچک بودند (≈296px). ستون کارت‌ها سهم غالب می‌گیرد و ستون
   متن جمع‌تر می‌شود ⇒ هر کارت ≈390px و عکسِ 16:9 خواناتر. */
@media (min-width: 1100px) {
  html body [data-screen="portrait-discovery"] .result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage {
    grid-template-columns: minmax(280px, 0.55fr) minmax(820px, 1.9fr) !important;
    column-gap: clamp(24px, 2.6vw, 48px) !important;
  }
  html body #resultsTitle#resultsTitle {
    --nv-hero-fs: clamp(42px, min(calc((100vw - 292px - 900px) / 5.4), calc((100dvh - 470px) / 2.8)), 96px);
  }
  html body [data-screen="portrait-discovery"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle {
    font-size: 18px !important;
    line-height: 1.5 !important;
    max-width: 34ch !important;
  }
  html body #resultGrid .result-caption strong.result-caption strong { font-size: 18px !important; }
  html body #resultGrid .portrait-direction-points li { font-size: 13px !important; }
}

/* Profile: با ستون کارت‌های پهن‌تر، ستون متن باریک شد و دکمه از کف بیرون زد.
   ارتفاع stage به صفحه قفل می‌شود و ردیف‌ها auto/1fr می‌گیرند. */
@media (min-width: 1100px) {
  html body [data-screen="portrait-discovery"] .result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage {
    align-content: start !important;
    max-height: 100% !important;
    overflow: visible !important;
  }
  /* فاز ۴ pin: canonical (max-height:1100px) ×8 sets grid-template-rows:none
     and used to win this tie by source order. experience-layout now loads
     last, so the row template is scoped to the heights where it applied. */
  @media (min-height: 1101px) {
    html body [data-screen="portrait-discovery"] .result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage {
      grid-template-rows: minmax(0, 1fr) auto !important;
    }
  }
  html body [data-screen="portrait-discovery"] .result-review-header.result-review-header.result-review-header.result-review-header.result-review-header.result-review-header {
    align-self: start !important;
  }
  html body [data-screen="portrait-discovery"] .result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions {
    margin: 14px 0 0 !important;
  }
  html body #resultGrid#resultGrid#resultGrid {
    align-self: stretch !important;
    max-height: 100% !important;
  }
}

/* Profile: خودِ stage تا b=920 می‌رفت (۵۶px بیرون از 864) چون ارتفاعش را از
   محتوا می‌گرفت؛ به ارتفاع صفحه قفل شد و padding بالای صفحه کم شد. */
@media (min-width: 1100px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="portrait-discovery"] {
    padding-top: clamp(120px, 14dvh, 165px) !important;
    padding-bottom: 16px !important;
    overflow: hidden !important;
  }
  html body [data-screen="portrait-discovery"] .result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
  }
  html body #resultGrid .result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper {
    max-height: 30dvh !important;
  }
}

/* Profile: تعادل دو ستون — ستون متن خیلی باریک شده بود (تیتر چهارخطی، لید
   سه‌خطی و دکمه دوخطی که روی لید می‌افتاد). */
@media (min-width: 1100px) {
  html body [data-screen="portrait-discovery"] .result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage {
    grid-template-columns: minmax(340px, 0.75fr) minmax(760px, 1.7fr) !important;
  }
  html body #resultsTitle#resultsTitle {
    --nv-hero-fs: clamp(40px, min(calc((100vw - 292px - 820px) / 5.2), calc((100dvh - 430px) / 3)), 86px);
  }
  html body [data-screen="portrait-discovery"] .result-review-actions .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button {
    white-space: nowrap !important;
    font-size: 15px !important;
    padding: 10px 20px !important;
    min-height: 52px !important;
  }
  html body [data-screen="portrait-discovery"] .result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions {
    margin: 20px 0 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }
}

/* ============================================================================
   DESIGN TOKENS — 2026-08-30 (پاس تثبیت سیستم)
   تا اینجا هر صفحه مقادیر خودش را دستی داشت (سه فرمول شیشه، سه مقیاس تیتر).
   از این‌جا همه از یک مجموعه توکن تغذیه می‌شوند تا صفحات بعدی فقط مصرف‌کننده
   باشند، نه بازنویسی دستی.
   مقادیر پایه از اندازه‌گیری nannovative.com در 1798×864 آمده‌اند.
   ============================================================================ */
:root {
  /* شیشه */
  --nv-glass-bg: rgba(255, 255, 255, .07);
  --nv-glass-bg-soft: rgba(255, 255, 255, .06);
  --nv-glass-bg-strong: rgba(255, 255, 255, .10);
  --nv-glass-blur: blur(16px) saturate(1.15);
  --nv-glass-blur-soft: blur(10px);
  --nv-glass-border: rgba(255, 255, 255, .18);
  --nv-glass-border-soft: rgba(255, 255, 255, .16);
  --nv-glass-shadow: 0 18px 48px rgba(0, 0, 0, .38);
  --nv-glass-hover-bg: rgba(10, 186, 181, .12);
  /* حاشیه‌های صحنه */
  /* ردیف اول گرید مودال. صحنه از زیر آن شروع می‌شود، پس هر چیزی که
     می‌خواهد با مرکزِ محتوا هم‌تراز باشد باید این را هم حساب کند. */
  --nv-shell-header-h: 78px;
  --nv-stage-pad-left: 37px;
  --nv-stage-pad-right: clamp(150px, 11vw, 210px);
  --nv-stage-pad-top: clamp(120px, 14dvh, 165px);
  --nv-stage-pad-bottom: 18px;
  /* تایپ — نردبان مرجع: خط بزرگ تا 120، خطوط کوچک 70.83٪ آن */
  --nv-hero-max: 120px;
  --nv-hero-small-ratio: .7083;
  --nv-eyebrow-fs: 24px;
  --nv-eyebrow-ls: 2.5px;
  --nv-lede-fs: 25px;
  --nv-lede-lh: 35px;
  /* عرض ستون مدیا در هر صحنه (پیش‌فرض؛ هر صحنه بازتعریف می‌کند) */
  --nv-media-w: 560px;
}

/* --- سطوح شیشه‌ای مشترک: یک نسخه، همه‌ی صفحات --- */
html body #quizPanel#quizPanel,
html body #resultGrid .result-card.result-card.result-card.result-card.result-card.result-card.result-card,
html body [data-screen] .info-panel.info-panel.info-panel.info-panel.info-panel.info-panel.info-panel {
  background: var(--nv-glass-bg) !important;
  backdrop-filter: var(--nv-glass-blur) !important;
  -webkit-backdrop-filter: var(--nv-glass-blur) !important;
  border: 1px solid var(--nv-glass-border) !important;
  border-radius: 0 !important;
  box-shadow: var(--nv-glass-shadow) !important;
}
html body #exploreLoadingBar#exploreLoadingBar,
html body [data-screen] .secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note,
html body #quizPanel .quiz-option.quiz-option.quiz-option.quiz-option.quiz-option {
  background-color: var(--nv-glass-bg-soft) !important;
  background-image: none !important;
  backdrop-filter: var(--nv-glass-blur-soft) !important;
  -webkit-backdrop-filter: var(--nv-glass-blur-soft) !important;
  border: 1px solid var(--nv-glass-border-soft) !important;
  border-radius: 0 !important;
}
/* نوار بالا (زیر 1100) از همان توکن‌ها */
@media (max-width: 1099px) {
  html body .modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header.modal-header {
    background: var(--nv-glass-bg) !important;
    backdrop-filter: var(--nv-glass-blur) !important;
    -webkit-backdrop-filter: var(--nv-glass-blur) !important;
    border-bottom: 1px solid var(--nv-glass-border) !important;
  }
}

/* --- نردبان تیتر واحد: یک فرمول، سه صحنه ---
   اندازه به عرضِ آزادِ ستون متن گره خورده است، پس در هر صحنه بزرگ‌ترین
   اندازه‌ی ممکنِ بدون برخورد را می‌دهد و نسبت خط بزرگ/کوچک همه‌جا ثابت است. */
@media (min-width: 1100px) {
  html body #dialogTitle#dialogTitle,
  html body #generatingTitle#generatingTitle,
  html body #resultsTitle#resultsTitle {
    --nv-hero-fs: clamp(40px, min(
      calc((100vw - 292px - var(--nv-media-w)) / 5.5),
      calc((100dvh - 470px) / 2.4)
    ), var(--nv-hero-max)) !important;
    font-family: "Bayon", var(--nanno-font-display, sans-serif) !important;
    font-weight: 400 !important;
    font-size: calc(var(--nv-hero-fs) * var(--nv-hero-small-ratio)) !important;
    line-height: 1.0 !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
  }
  html body #dialogTitle strong::first-line,
  html body #generatingTitle strong::first-line,
  html body #resultsTitle strong::first-line {
    font-size: var(--nv-hero-fs) !important;
  }
  /* عرض مدیای هر صحنه ⇒ ورودی فرمول بالا */
  html body .flow-screen[data-screen="capture"] { --nv-media-w: min(38vw, 56dvh, 560px); }
  html body .flow-screen[data-screen="generating"] { --nv-media-w: 520px; }
  html body .flow-screen[data-screen="portrait-discovery"] { --nv-media-w: 820px; }
  /* eyebrow و لید: یک مقدار برای همه */
  html body [data-screen] .experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow {
    font-size: var(--nv-eyebrow-fs) !important;
    letter-spacing: var(--nv-eyebrow-ls) !important;
    line-height: normal !important;
    color: #ffffff !important;
  }
  html body [data-screen="capture"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle,
  html body [data-screen="generating"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle,
  html body [data-screen="portrait-discovery"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle {
    font-size: var(--nv-lede-fs) !important;
    line-height: var(--nv-lede-lh) !important;
    color: #ffffff !important;
  }
}

/* Profile: با نردبان واحد، تیتر ۱۲۰ در ستون ~۳۴۰px پنج‌خطی می‌شد و از کف
   بیرون می‌زد. ورودی فرمول (عرض مدیا) اصلاح شد تا اندازه با ستون بخواند.
   ضمناً CTA به مشخصات دکمه‌ی اصلی مرجع برگشت (۲۴px/۵۰۰، pad 12/24، ارتفاع ۶۶)
   تا با TAKE PHOTO و بقیه‌ی دکمه‌های اصلی یکی باشد. */
@media (min-width: 1100px) {
  html body .flow-screen[data-screen="portrait-discovery"] { --nv-media-w: 1060px; }
  html body [data-screen="portrait-discovery"] .result-review-actions .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button {
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 38.4px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    padding: 12px 24px !important;
    min-height: 66px !important;
    width: max-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    border: 2px solid #0ABAB5 !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, #0ABAB5, #089F9A) !important;
    color: #000 !important;
    box-shadow: 0 4px 15px rgba(10, 186, 181, .3) !important;
  }
  html body [data-screen="portrait-discovery"] .result-review-actions .primary-button svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* Profile: .result-review-stage یک padding داخلی ۷۲px داشت، پس تیتر از x=109
   شروع می‌شد نه ۳۷ ⇒ لبه‌ی چپ با Capture/Explore یکی نبود. */
@media (min-width: 1100px) {
  html body [data-screen="portrait-discovery"] .result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage {
    padding: 0 !important;
  }
}

/* ============================================================================
   PROFILE — موبایل/تبلت (< 1100): سه ستون 94px غیرقابل استفاده بود.
   کارت‌ها تک‌ستونی می‌شوند و عکس 16:9 تمام‌عرض؛ CTA زیر کارت‌ها، تمام‌عرض.
   ============================================================================ */
@media (max-width: 1099px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="portrait-discovery"] {
    display: block !important;
    padding: 74px 20px 14px !important;
    overflow-y: auto !important;
  }
  html body [data-screen="portrait-discovery"] .result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html body #resultsTitle#resultsTitle {
    font-size: clamp(24px, 6.8vw, 32px) !important;
    line-height: 1.05 !important;
  }
  html body [data-screen="portrait-discovery"] .experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow {
    font-size: 13px !important;
    letter-spacing: 1.6px !important;
  }
  html body [data-screen="portrait-discovery"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
  html body #resultGrid#resultGrid#resultGrid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  html body #resultGrid .result-card.result-card.result-card.result-card.result-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  html body #resultGrid .result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
  }
  html body #resultGrid .result-card-img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  html body #resultGrid .result-caption.result-caption.result-caption.result-caption {
    position: static !important;
    inset: auto !important;
    display: block !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: auto !important;
    padding: 10px 12px 12px !important;
    background: transparent !important;
    text-align: left !important;
  }
  html body #resultGrid .portrait-direction-label.portrait-direction-label {
    display: block !important;
    font-size: 10.5px !important;
    letter-spacing: .14em !important;
    color: var(--cyan) !important;
    margin: 0 0 3px !important;
  }
  html body #resultGrid .result-caption strong {
    display: block !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    color: #fff !important;
    margin: 0 0 6px !important;
  }
  html body #resultGrid .portrait-direction-points.portrait-direction-points {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  html body #resultGrid .portrait-direction-points li {
    position: relative !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: rgba(255, 255, 255, .82) !important;
    margin: 0 0 3px !important;
    padding-left: 11px !important;
  }
  html body #resultGrid .portrait-direction-points li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: .5em !important;
    width: 5px !important;
    height: 5px !important;
    background: var(--cyan) !important;
  }
  html body [data-screen="portrait-discovery"] .result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions {
    display: flex !important;
    position: static !important;
    width: 100% !important;
    margin: 4px 0 0 !important;
  }
  html body [data-screen="portrait-discovery"] .result-review-actions .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button {
    width: 100% !important;
    max-width: none !important;
    min-height: 52px !important;
    font-size: 15px !important;
    padding: 10px 16px !important;
    white-space: nowrap !important;
  }
}

/* Profile موبایل: قانون «هیچ صفحه‌ای اسکرول نخورد» با سه کارت زیر هم نقض
   می‌شد. کارت‌ها نوار افقی با snap می‌شوند: هر بار یک کارت کامل در قاب،
   بدون اسکرول عمودی. */
@media (max-width: 1099px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="portrait-discovery"] {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
    row-gap: 10px !important;
  }
  html body [data-screen="portrait-discovery"] .result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    row-gap: 10px !important;
    min-height: 0 !important;
  }
  html body #resultGrid#resultGrid#resultGrid#resultGrid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 84% !important;
    grid-template-columns: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding-bottom: 4px !important;
  }
  html body #resultGrid#resultGrid#resultGrid#resultGrid::-webkit-scrollbar { display: none !important; }
  html body #resultGrid .result-card.result-card.result-card.result-card.result-card.result-card {
    scroll-snap-align: center !important;
    height: 100% !important;
    min-height: 0 !important;
  }
  html body #resultGrid .result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper {
    max-height: 46% !important;
  }
  html body #resultGrid .result-caption.result-caption.result-caption.result-caption.result-caption {
    overflow: hidden !important;
  }
}

/* Profile موبایل: هنوز ۱۵۶px سرریز عمودی داخل صحنه بود (هدر + نوار کارت +
   دکمه از ارتفاع بیشتر می‌شد). ردیف‌ها به ارتفاع صفحه قفل و هدر جمع‌تر شد. */
@media (max-width: 1099px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="portrait-discovery"] {
    padding-top: 66px !important;
    padding-bottom: 12px !important;
    align-content: stretch !important;
  }
  html body [data-screen="portrait-discovery"] .result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage {
    height: 100% !important;
    /* فاز ۴ pin: max-height:100% / overflow:hidden never applied here — the
       unconditional canonical ×8 rule (max-height:none, overflow:visible)
       won the tie by order at every width; dropped so the swap is a no-op. */
  }
  html body [data-screen="portrait-discovery"] .result-review-header.result-review-header.result-review-header.result-review-header {
    min-height: 0 !important;
  }
  html body #resultsTitle#resultsTitle {
    font-size: clamp(22px, 6vw, 28px) !important;
  }
  html body [data-screen="portrait-discovery"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle {
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
}

/* Profile موبایل: stage یک ردیف چهارم (۲۴px) از یک المان اضافه می‌گرفت و
   ارتفاعش ۶۱۱ در برابر ۴۹۷ فضای واقعی می‌شد. ردیف‌ها صریح تعریف می‌شوند و
   المان وضعیت خالی جمع می‌شود. */
@media (max-width: 1099px) {
  html body [data-screen="portrait-discovery"] .result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    grid-auto-rows: 0 !important;
  }
  html body #portraitDiscoveryStatus.portrait-discovery-status:empty {
    display: none !important;
  }
}

/* ============================================================================
   PROFILE موبایل/تبلت — بازطراحی به درخواست کاربر: نوار افقیِ snap کنار رفت.
   سه کارت زیر هم، هرکدام مستطیل افقی: عکس ۱۶:۹ سمت چپ، متن سمت راست.
   هر سه در یک قاب جا می‌شوند ⇒ نه اسکرول عمودی، نه افقی.
   ============================================================================ */
@media (max-width: 1099px) {
  html body #resultGrid#resultGrid#resultGrid#resultGrid#resultGrid {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-columns: auto !important;
    overflow: hidden !important;
    scroll-snap-type: none !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }
  html body #resultGrid .result-card.result-card.result-card.result-card.result-card.result-card.result-card {
    display: grid !important;
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr) !important;
    align-items: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    scroll-snap-align: none !important;
  }
  html body #resultGrid .result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper {
    aspect-ratio: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    align-self: stretch !important;
  }
  html body #resultGrid .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  html body #resultGrid .result-caption strong {
    font-size: 14.5px !important;
    line-height: 1.15 !important;
    margin: 0 0 5px !important;
  }
  html body #resultGrid .portrait-direction-label.portrait-direction-label {
    font-size: 10px !important;
    margin: 0 0 2px !important;
  }
  html body #resultGrid .portrait-direction-points li {
    font-size: 11.5px !important;
    line-height: 1.3 !important;
    margin: 0 0 2px !important;
  }
}
/* ارتفاع خیلی کم: بولت سوم حذف تا کارت‌ها فشرده نشوند */
@media (max-width: 1099px) and (max-height: 700px) {
  html body #resultGrid .portrait-direction-points li:nth-child(n+3) { display: none !important; }
}

/* Profile موبایل: صحنه ۸ فرزند دارد (اکثراً مخفی) و گرید ردیف‌ها را اشتباه
   می‌ساخت؛ stage تا ۹۳۰px بالا می‌رفت داخل قابِ ۴۹۷px. با فلکس ساده و
   min-height:0 ارتفاع واقعاً قفل می‌شود. */
@media (max-width: 1099px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="portrait-discovery"] {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  html body [data-screen="portrait-discovery"] .result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    gap: 10px !important;
  }
  html body [data-screen="portrait-discovery"] .result-review-header.result-review-header.result-review-header.result-review-header.result-review-header {
    flex: 0 0 auto !important;
  }
  html body #resultGrid#resultGrid#resultGrid#resultGrid#resultGrid#resultGrid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
  }
  html body [data-screen="portrait-discovery"] .result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions.result-review-actions {
    flex: 0 0 auto !important;
  }
}

/* Profile موبایل: کارت ۱۰۱px بود و ارتفاع عکس/کپشن صفر می‌شد (grid با
   align-items:stretch ولی ردیف‌های 1fr خیلی کوچک). هدر فشرده شد و هر کارت
   کف ارتفاع می‌گیرد؛ عکس و متن هر دو ارتفاع کامل کارت. */
@media (max-width: 1099px) {
  html body [data-screen="portrait-discovery"] .result-review-header.result-review-header.result-review-header.result-review-header.result-review-header.result-review-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  html body #resultsTitle#resultsTitle#resultsTitle {
    font-size: clamp(20px, 5.2vw, 26px) !important;
    line-height: 1.04 !important;
    margin: 0 !important;
  }
  html body [data-screen="portrait-discovery"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle {
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    max-width: 44ch !important;
  }
  html body #resultGrid#resultGrid#resultGrid#resultGrid#resultGrid#resultGrid#resultGrid {
    grid-template-rows: repeat(3, minmax(112px, 1fr)) !important;
    gap: 8px !important;
  }
  html body #resultGrid .result-card.result-card.result-card.result-card.result-card.result-card.result-card.result-card {
    min-height: 112px !important;
    align-items: stretch !important;
  }
  html body #resultGrid .result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper {
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
  html body #resultGrid .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption {
    height: 100% !important;
    padding: 8px 10px !important;
  }
}

/* Profile موبایل: کارت سه فرزند دارد (رادیوی مخفی + عکس + کپشن) و
   auto-placement گرید، رادیو را در ستون اول می‌نشاند و همه‌چیز جابه‌جا می‌شد. */
@media (max-width: 1099px) {
  html body #resultGrid .result-card.result-card.result-card > input[type="radio"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
  }
  html body #resultGrid .result-card.result-card.result-card {
    position: relative !important;
  }
  html body #resultGrid .result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  html body #resultGrid .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
}

/* Profile موبایل: min-height:100% روی آیتم گرید همان وابستگی دایره‌ای همیشگی
   را ساخت (ردیف ۲.۷px). کارت به فلکسِ ردیفی تغییر می‌کند و عکس با
   position:absolute کادر را پر می‌کند — بدون سایزینگ دایره‌ای. */
@media (max-width: 1099px) {
  html body #resultGrid .result-card.result-card.result-card.result-card.result-card.result-card.result-card.result-card.result-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    grid-template-columns: none !important;
  }
  html body #resultGrid .result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper {
    position: relative !important;
    flex: 0 0 42% !important;
    width: 42% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  html body #resultGrid .result-card-img-wrapper img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  html body #resultGrid .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption.result-caption {
    flex: 1 1 auto !important;
    width: auto !important;
    height: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
}


/* ============================================================================
   فاز A — ADVICE: انتقال کامل به دیزاین‌سیستم
   - تراز ۳۷px، پدینگ‌های توکنی، نردبان تیتر مشترک (Bayon 400)
   - پرتره ۱۶:۹ (قانون ثابت پروژه: همه‌ی تصاویر مستطیل افقی)
   - همه‌ی پنل‌ها گلس‌مورفیسم توکنی
   - زنجیره‌ها ×۱۰ چون canonical روی همین کلاس‌ها ×۸ + !important دارد
   ============================================================================ */
@media (min-width: 1100px) {
  html body .flow-screen[data-screen="personalized-advice"] { --nv-media-w: 935px; }

  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="personalized-advice"] {
    display: grid !important;
    grid-template-columns: minmax(340px, 0.92fr) minmax(660px, 1.5fr) !important;
    /* auto auto let the spanning media column split its height across both
       rows, so a top-aligned header and a top-aligned action row ended up
       half a screen apart. Row one is the header's own height and row two
       takes the remainder, so the action sits directly under the lede. */
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas: "header layout" "actions layout" !important;
    align-content: start !important;
    justify-items: stretch !important;
    padding: var(--nv-stage-pad-top) var(--nv-stage-pad-right) var(--nv-stage-pad-bottom) var(--nv-stage-pad-left) !important;
    column-gap: clamp(24px, 3vw, 56px) !important;
    row-gap: 0 !important;
    overflow: hidden !important;
  }

  /* ---------- ستون متن ---------- */
  html body [data-screen="personalized-advice"] .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header {
    grid-area: header !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: clamp(10px, 1.4dvh, 18px) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body #adviceStageTitle#adviceStageTitle#adviceStageTitle {
    --nv-hero-fs: clamp(40px, min(calc((100vw - 292px - var(--nv-media-w)) / 5.5), calc((100dvh - 470px) / 2.4)), var(--nv-hero-max)) !important;
    font-family: "Bayon", var(--nanno-font-display, sans-serif) !important;
    font-weight: 400 !important;
    font-synthesis-weight: none !important;
    font-size: calc(var(--nv-hero-fs) * var(--nv-hero-small-ratio)) !important;
    line-height: 1.0 !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }
  /* نردبان تیتر دقیقاً مثل Capture کار می‌کند: ::first-line فقط روی
     بلاک‌کانتینر اثر دارد، پس strong باید display:block شود و br حذف. */
  html body #adviceStageTitle#adviceStageTitle#adviceStageTitle br { display: none !important; }
  html body #adviceStageTitle#adviceStageTitle#adviceStageTitle strong,
  html body #adviceStageTitle#adviceStageTitle#adviceStageTitle span {
    display: block !important;
    font-weight: 400 !important;
    font-synthesis-weight: none !important;
    color: #ffffff !important;
  }
  html body #adviceStageTitle#adviceStageTitle#adviceStageTitle strong::first-line {
    font-size: var(--nv-hero-fs) !important;
    font-weight: 400 !important;
    color: var(--cyan) !important;
  }
  html body #adviceStageTitle#adviceStageTitle#adviceStageTitle::after { content: none !important; }

  html body [data-screen="personalized-advice"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle {
    font-size: var(--nv-lede-fs) !important;
    line-height: var(--nv-lede-lh) !important;
    color: #fff !important;
    max-width: 34ch !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  html body [data-screen="personalized-advice"] .experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions,
  html body [data-screen="personalized-advice"] .advice-actions.advice-actions.advice-actions.advice-actions.advice-actions.advice-actions.advice-actions.advice-actions.advice-actions.advice-actions {
    grid-area: actions !important;
    align-self: start !important;
    justify-self: start !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 14px !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: clamp(14px, 2.2dvh, 26px) 0 0 !important;
    padding: 0 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
  }
  html body [data-screen="personalized-advice"] .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button {
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 38.4px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 12px 24px !important;
    min-height: 66px !important;
    height: auto !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: 2px solid #0ABAB5 !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, #0ABAB5, #089F9A) !important;
    color: #000 !important;
    box-shadow: 0 4px 15px rgba(10, 186, 181, .3) !important;
  }
  html body [data-screen="personalized-advice"] .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button svg { stroke: #000 !important; }

  /* ---------- ستون رسانه ---------- */
  html body .advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout {
    grid-area: layout !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.42fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas: "portrait main" "recap main" !important;
    align-items: start !important;
    align-content: start !important;
    align-self: stretch !important;
    justify-items: stretch !important;
    gap: clamp(12px, 1.2vw, 20px) !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  html body .advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout > .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel { grid-area: portrait !important; }
  html body .advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout > .advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main { grid-area: main !important; }
  html body .advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout > .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap { grid-area: recap !important; }

  /* پرتره: همیشه ۱۶:۹ افقی */
  html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel {
    position: relative !important;
    display: block !important;
    flex: none !important;
    align-self: start !important;
    justify-self: stretch !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--nv-glass-bg) !important;
    -webkit-backdrop-filter: var(--nv-glass-blur) !important;
    backdrop-filter: var(--nv-glass-blur) !important;
    border: 1px solid var(--nv-glass-border) !important;
    border-radius: 0 !important;
    box-shadow: var(--nv-glass-shadow) !important;
  }
  html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    flex: none !important;
    border-radius: 0 !important;
  }
  html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel > div {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    height: auto !important;
    padding: 10px 14px !important;
    background: linear-gradient(to top, rgba(2, 14, 15, .82), rgba(2, 14, 15, 0)) !important;
  }
  html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel > div > span {
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 11px !important;
    line-height: 16px !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: #0ABAB5 !important;
  }
  html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel > div > strong {
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 16px !important;
    line-height: 22px !important;
    font-weight: 700 !important;
    color: #fff !important;
  }
  html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel .portrait-preview-trigger {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: 1px solid var(--nv-glass-border) !important;
    background: rgba(2, 14, 15, .5) !important;
    -webkit-backdrop-filter: var(--nv-glass-blur-soft) !important;
    backdrop-filter: var(--nv-glass-blur-soft) !important;
    color: #fff !important;
  }
  html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel .portrait-preview-trigger:hover {
    background: var(--nv-glass-hover-bg) !important;
    border-color: #0ABAB5 !important;
    color: #0ABAB5 !important;
  }

  /* ستون محتوا */
  html body .advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main {
    display: block !important;
    flex: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, .22) transparent !important;
  }
  html body .advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main::-webkit-scrollbar { width: 6px !important; }
  html body .advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22) !important; }

  html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content,
  html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: clamp(14px, 1.4vw, 22px) !important;
    background: var(--nv-glass-bg) !important;
    -webkit-backdrop-filter: var(--nv-glass-blur) !important;
    backdrop-filter: var(--nv-glass-blur) !important;
    border: 1px solid var(--nv-glass-border) !important;
    border-radius: 0 !important;
    box-shadow: var(--nv-glass-shadow) !important;
  }
  html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content > * + * { margin-top: clamp(8px, 1.1dvh, 14px) !important; }
  html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content > header > span {
    display: block !important;
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 12px !important;
    line-height: 18px !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    color: #0ABAB5 !important;
    margin: 0 0 6px !important;
  }
  html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content > header > h2 {
    font-family: "Space Grotesk", sans-serif !important;
    font-size: clamp(20px, 1.55vw, 28px) !important;
    line-height: 1.16 !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    color: #fff !important;
    margin: 0 !important;
  }
  html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content > header > p {
    font-size: 15px !important;
    line-height: 22px !important;
    color: rgba(255, 255, 255, .82) !important;
    margin: 8px 0 0 !important;
  }
  html body .advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(10px, .9vw, 14px) !important;
    height: auto !important;
    max-height: none !important;
  }
  html body .advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid > * {
    /* nannovative.com's section cards, as codified in nannovative-cards.css:
       flat and opaque, one hairline border, square, no shadow. These had been
       given the watered-down glass tokens instead - soft bg, soft blur, soft
       border, shadow removed - which is why they read as undesigned beside the
       panels around them. The reference ground is #141414; over the lab
       photograph it is carried at 88% so the panel behind still breathes.
       Heights are equalised so the pair never steps. */
    height: 100% !important;
    align-self: stretch !important;
    padding: clamp(12px, 1.1vw, 16px) !important;
    background: var(--nv-glass-bg-strong) !important;
    -webkit-backdrop-filter: var(--nv-glass-blur-soft) !important;
    backdrop-filter: var(--nv-glass-blur-soft) !important;
    border: 1px solid var(--nv-glass-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: border-color 400ms ease, background 400ms ease !important;
  }
  html body .advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid { align-items: stretch !important; }
  html body .advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid > *:hover {
    border-color: rgba(255, 255, 255, .28) !important;
    background: var(--nv-glass-hover-bg) !important;
  }
  html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content h3 {
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 12px !important;
    line-height: 18px !important;
    font-weight: 700 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: #0ABAB5 !important;
    margin: 0 0 6px !important;
  }
  html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content p,
  html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content li {
    font-size: 14px !important;
    line-height: 21px !important;
    color: rgba(255, 255, 255, .82) !important;
  }
  html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content .advice-next-steps {
    padding: clamp(10px, 1vw, 14px) !important;
    background: var(--nv-glass-bg-soft) !important;
    border: 1px solid var(--nv-glass-border-soft) !important;
    border-radius: 0 !important;
  }
  html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content .advice-next-steps ol { margin: 0 !important; padding-left: 18px !important; }
  html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content .advice-next-steps li + li { margin-top: 4px !important; }
  html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content .advice-disclaimer {
    font-size: 12px !important;
    line-height: 17px !important;
    color: rgba(255, 255, 255, .5) !important;
  }

  /* جمع‌بندی پاسخ‌ها زیر پرتره */
  html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap {
    align-self: start !important;
    padding: clamp(12px, 1.1vw, 16px) !important;
  }
  html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap .advice-recap-title::-webkit-details-marker { display: none !important; }
  html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap .advice-recap-title::marker { content: "" !important; }
  html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap .advice-recap-title {
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 12px !important;
    line-height: 18px !important;
    font-weight: 700 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: #0ABAB5 !important;
    margin: 0 !important;
    cursor: pointer !important;
  }
  html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap .advice-recap-list {
    margin: 10px 0 0 !important;
    display: grid !important;
    gap: 6px !important;
  }
  html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap dt {
    font-size: 11px !important;
    line-height: 16px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, .5) !important;
  }
  html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap dd {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    color: #fff !important;
  }

  /* حالت انتظار/خطا هم‌سطح گلس */
  html body [data-screen="personalized-advice"] .advice-loading,
  html body [data-screen="personalized-advice"] .advice-error {
    background: var(--nv-glass-bg) !important;
    -webkit-backdrop-filter: var(--nv-glass-blur) !important;
    backdrop-filter: var(--nv-glass-blur) !important;
    border: 1px solid var(--nv-glass-border) !important;
    border-radius: 0 !important;
    box-shadow: var(--nv-glass-shadow) !important;
    padding: clamp(16px, 1.6vw, 24px) !important;
  }
  html body [data-screen="personalized-advice"] .advice-error {
    border-left: 3px solid #ff5a5a !important;
    background: rgba(60, 12, 12, .55) !important;
  }
}

/* ============================================================================
   فاز A — ADVICE ریسپانسیو: تبلت 768–1099 و موبایل ≤767
   قاعده‌ی ثابت پروژه: پرتره همیشه ۱۶:۹ افقی است — در هیچ بریک‌پوینتی نسبت
   عوض نمی‌شود؛ فقط عرض ستون کم/زیاد می‌شود.
   ============================================================================ */
@media (max-width: 1099px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="personalized-advice"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "header" "layout" "actions" !important;
    align-content: stretch !important;
    justify-items: stretch !important;
    row-gap: 12px !important;
    column-gap: 0 !important;
    overflow: hidden !important;
  }
  html body [data-screen="personalized-advice"] .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header {
    grid-area: header !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  html body #adviceStageTitle#adviceStageTitle#adviceStageTitle {
    font-size: clamp(22px, 3.4vw, 32px) !important;
    line-height: 1.02 !important;
  }
  html body #adviceStageTitle#adviceStageTitle#adviceStageTitle br { display: none !important; }
  html body #adviceStageTitle#adviceStageTitle#adviceStageTitle strong,
  html body #adviceStageTitle#adviceStageTitle#adviceStageTitle span { display: block !important; color: #ffffff !important; font-weight: 400 !important; }
  html body #adviceStageTitle#adviceStageTitle#adviceStageTitle strong::first-line { font-size: 1.28em !important; color: var(--cyan) !important; }
  html body [data-screen="personalized-advice"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle {
    font-size: 15px !important;
    line-height: 1.4 !important;
    max-width: 62ch !important;
    color: rgba(255, 255, 255, .82) !important;
  }

  html body .advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout {
    grid-area: layout !important;
    display: grid !important;
    align-content: start !important;
    align-items: start !important;
    gap: 12px !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 2px 0 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, .22) transparent !important;
  }
  html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel {
    position: relative !important;
    display: block !important;
    align-self: start !important;
    justify-self: stretch !important;
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--nv-glass-bg) !important;
    -webkit-backdrop-filter: var(--nv-glass-blur) !important;
    backdrop-filter: var(--nv-glass-blur) !important;
    border: 1px solid var(--nv-glass-border) !important;
    border-radius: 0 !important;
    box-shadow: var(--nv-glass-shadow) !important;
  }
  html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
  }
  html body .advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content,
  html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 14px !important;
    background: var(--nv-glass-bg) !important;
    -webkit-backdrop-filter: var(--nv-glass-blur) !important;
    backdrop-filter: var(--nv-glass-blur) !important;
    border: 1px solid var(--nv-glass-border) !important;
    border-radius: 0 !important;
    box-shadow: var(--nv-glass-shadow) !important;
  }
  html body [data-screen="personalized-advice"] .experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions,
  html body [data-screen="personalized-advice"] .advice-actions.advice-actions.advice-actions.advice-actions.advice-actions.advice-actions.advice-actions.advice-actions.advice-actions.advice-actions {
    grid-area: actions !important;
    position: static !important;
    inset: auto !important;
    align-self: start !important;
    justify-self: stretch !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }
  html body [data-screen="personalized-advice"] .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button {
    font-size: 18px !important;
    line-height: 1.35 !important;
    min-height: 52px !important;
    height: auto !important;
    width: max-content !important;
    max-width: 100% !important;
    padding: 10px 20px !important;
    margin: 0 !important;
    border: 2px solid #0ABAB5 !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, #0ABAB5, #089F9A) !important;
    color: #000 !important;
    box-shadow: 0 4px 15px rgba(10, 186, 181, .3) !important;
  }
  html body [data-screen="personalized-advice"] .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button svg { stroke: #000 !important; }
}

/* تبلت: پرتره و جمع‌بندی کنار هم، محتوا زیرشان (عرض کافی هست) */
@media (min-width: 768px) and (max-width: 1099px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="personalized-advice"] { padding: clamp(72px, 10dvh, 112px) 32px 18px 32px !important; }
  html body .advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas: "portrait main" "recap main" !important;
  }
  html body .advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout > .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel { grid-area: portrait !important; }
  html body .advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout > .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap { grid-area: recap !important; }
  html body .advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout > .advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main { grid-area: main !important; }
  html body .advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* موبایل: تک‌ستونی؛ ترتیب پرتره → مشاوره → جمع‌بندی */
@media (max-width: 767px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="personalized-advice"] { padding: clamp(84px, 12dvh, 112px) clamp(14px, 4vw, 28px) 16px !important; }
  /* در موبایل به‌جای گرید از فلکس استفاده می‌کنیم؛ canonical روی این عنصر
     grid-template-rows: auto auto !important دارد و با سه‌ردیفی شدن تداخل
     می‌کرد (ردیف سوم صفر می‌شد و پنل‌ها روی هم می‌افتادند). */
  html body .advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }
  /* پرتره در موبایل کوچک‌تر می‌شود تا متن مشاوره زیرش دیده شود؛ نسبت ۱۶:۹
     دست‌نخورده می‌ماند (قانون ثابت پروژه). */
  html body .advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout > .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel {
    grid-area: auto !important;
    order: 1 !important;
    flex: 0 0 auto !important;
    width: min(100%, 330px) !important;
    max-width: min(100%, 330px) !important;
    align-self: flex-start !important;
  }
  html body .advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout > .advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main { grid-area: auto !important; order: 2 !important; flex: 0 0 auto !important; }
  html body .advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout > .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap { grid-area: auto !important; order: 3 !important; flex: 0 0 auto !important; }
  html body .advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid.advice-signal-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content > header > h2 { font-size: 20px !important; line-height: 1.18 !important; }
  html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content p,
  html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content li { font-size: 14px !important; line-height: 21px !important; }
  html body [data-screen="personalized-advice"] .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button { width: 100% !important; justify-content: center !important; }
}

/* اصلاح تبلت/موبایل: خط تزئینی زیر تیتر حذف (مثل دسکتاپ)، ریتم هدر فشرده،
   و اندازه‌ی تیتر کارت مشاوره در بازه‌ی میانی. */
html body #adviceStageTitle#adviceStageTitle#adviceStageTitle::after,
html body #adviceStageTitle#adviceStageTitle#adviceStageTitle::before { content: none !important; display: none !important; }

@media (max-width: 1099px) {
  html body [data-screen="personalized-advice"] .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header { gap: 6px !important; }
  html body #adviceStageTitle#adviceStageTitle#adviceStageTitle { margin: 0 !important; padding: 0 !important; }
  html body [data-screen="personalized-advice"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle { margin: 0 !important; padding: 0 !important; }
  html body [data-screen="personalized-advice"] .experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow { margin: 0 !important; padding: 0 !important; font-size: 13px !important; line-height: 18px !important; letter-spacing: .18em !important; }
  html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content { padding: 12px !important; }
  html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content > header > h2 { font-size: clamp(18px, 2.4vw, 24px) !important; line-height: 1.18 !important; }
  html body .advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content.advice-content > header > p { font-size: 14px !important; line-height: 21px !important; }
}

/* کپشن پرتره در همه‌ی بریک‌پوینت‌ها روی خود عکس می‌نشیند (پرتره ۱۶:۹ است و
   نباید با کپشنِ درون‌جریان قدش عوض شود). */
@media (max-width: 1099px) {
  html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel > div {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    height: auto !important;
    padding: 8px 12px !important;
    background: linear-gradient(to top, rgba(2, 14, 15, .82), rgba(2, 14, 15, 0)) !important;
  }
  html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel > div > span {
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 10px !important; line-height: 14px !important;
    letter-spacing: .16em !important; text-transform: uppercase !important;
    color: #0ABAB5 !important;
  }
  html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel > div > strong {
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 14px !important; line-height: 20px !important;
    font-weight: 700 !important; color: #fff !important;
  }
  html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel .portrait-preview-trigger {
    position: absolute !important;
    top: 8px !important; right: 8px !important; left: auto !important; bottom: auto !important;
    width: 30px !important; height: 30px !important;
    display: grid !important; place-items: center !important;
    padding: 0 !important; border-radius: 0 !important;
    border: 1px solid var(--nv-glass-border) !important;
    background: rgba(2, 14, 15, .5) !important;
    -webkit-backdrop-filter: var(--nv-glass-blur-soft) !important;
    backdrop-filter: var(--nv-glass-blur-soft) !important;
    color: #fff !important;
  }
}

/* ============================================================================
   فاز B — DELIVERY: انتقال به دیزاین‌سیستم
   ستون چپ متن (تراز ۳۷px + نردبان تیتر)، ستون راست: خلاصه‌ی پرتره (۱۶:۹) و
   فرم روی سطح گلس. زنجیره‌ها ×۱۰ (canonical روی همین کلاس‌ها ×۸ دارد).
   ============================================================================ */
@media (min-width: 1100px) {
  html body .flow-screen[data-screen="delivery"] { --nv-media-w: 980px; }
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="delivery"] {
    display: grid !important;
    grid-template-columns: minmax(340px, 0.86fr) minmax(680px, 1.55fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas: "header layout" !important;
    align-content: start !important;
    justify-items: stretch !important;
    padding: var(--nv-stage-pad-top) var(--nv-stage-pad-right) var(--nv-stage-pad-bottom) var(--nv-stage-pad-left) !important;
    column-gap: clamp(24px, 3vw, 56px) !important;
    row-gap: 0 !important;
    overflow: hidden !important;
  }
  html body [data-screen="delivery"] .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header {
    grid-area: header !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: clamp(10px, 1.4dvh, 18px) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body #sendDetailsTitle#sendDetailsTitle#sendDetailsTitle {
    --nv-hero-fs: clamp(40px, min(calc((100vw - 292px - var(--nv-media-w)) / 5.5), calc((100dvh - 470px) / 2.4)), var(--nv-hero-max)) !important;
    font-family: "Bayon", var(--nanno-font-display, sans-serif) !important;
    font-weight: 400 !important;
    font-synthesis-weight: none !important;
    font-size: calc(var(--nv-hero-fs) * var(--nv-hero-small-ratio)) !important;
    line-height: 1.0 !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body [data-screen="delivery"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle {
    font-size: var(--nv-lede-fs) !important;
    line-height: var(--nv-lede-lh) !important;
    color: #fff !important;
    max-width: 34ch !important;
    margin: 0 !important;
  }

  html body .delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout {
    grid-area: layout !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: stretch !important;
    align-self: stretch !important;
    gap: clamp(12px, 1.2vw, 20px) !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  html body .delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary,
  html body .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: clamp(10px, 1.1dvh, 16px) !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: clamp(14px, 1.4vw, 22px) !important;
    background: var(--nv-glass-bg) !important;
    -webkit-backdrop-filter: var(--nv-glass-blur) !important;
    backdrop-filter: var(--nv-glass-blur) !important;
    border: 1px solid var(--nv-glass-border) !important;
    border-radius: 0 !important;
    box-shadow: var(--nv-glass-shadow) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, .22) transparent !important;
  }
  html body .delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    flex: 0 0 auto !important;
    border-radius: 0 !important;
    border: 1px solid var(--nv-glass-border-soft) !important;
  }
  html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    height: auto !important;
    padding: 0 !important;
  }
  html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy > span {
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 11px !important; line-height: 16px !important;
    letter-spacing: .18em !important; text-transform: uppercase !important;
    color: #0ABAB5 !important;
  }
  html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy > strong {
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 18px !important; line-height: 24px !important;
    font-weight: 700 !important; color: #fff !important;
  }
  html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy b {
    display: block !important;
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 11px !important; line-height: 16px !important;
    letter-spacing: .16em !important; text-transform: uppercase !important;
    font-weight: 700 !important; color: #0ABAB5 !important;
    margin: 6px 0 4px !important;
  }
  html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy p,
  html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy li {
    font-size: 14px !important; line-height: 21px !important;
    color: rgba(255, 255, 255, .82) !important;
  }
  html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy ol { margin: 0 !important; padding-left: 18px !important; }

  /* پنل فرم */
  html body [data-screen="delivery"] .send-details-brand.send-details-brand.send-details-brand.send-details-brand { display: none !important; }
  html body [data-screen="delivery"] .send-details-kicker.send-details-kicker.send-details-kicker.send-details-kicker {
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 11px !important; line-height: 16px !important;
    letter-spacing: .18em !important; text-transform: uppercase !important;
    color: #0ABAB5 !important; margin: 0 0 6px !important;
  }
  html body [data-screen="delivery"] .send-details-header.send-details-header.send-details-header.send-details-header h2 {
    font-family: "Space Grotesk", sans-serif !important;
    font-size: clamp(20px, 1.55vw, 28px) !important;
    line-height: 1.16 !important; font-weight: 700 !important;
    letter-spacing: -.01em !important; color: #fff !important; margin: 0 !important;
  }
  html body .send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: clamp(8px, 1.1dvh, 14px) !important;
    height: auto !important;
    margin: 0 !important;
  }
  html body .field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group { display: flex !important; flex-direction: column !important; gap: 5px !important; height: auto !important; }
  html body .field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group > label {
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 11px !important; line-height: 16px !important;
    letter-spacing: .16em !important; text-transform: uppercase !important;
    font-weight: 700 !important; color: rgba(255, 255, 255, .62) !important;
  }
  html body .field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group > label sup { color: #0ABAB5 !important; }
  html body .field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group > input {
    width: 100% !important;
    height: auto !important;
    min-height: 46px !important;
    padding: 10px 14px !important;
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 15px !important; line-height: 22px !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .06) !important;
    -webkit-backdrop-filter: var(--nv-glass-blur-soft) !important;
    backdrop-filter: var(--nv-glass-blur-soft) !important;
    border: 1px solid var(--nv-glass-border-soft) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }
  html body .field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group > input::placeholder { color: rgba(255, 255, 255, .38) !important; }
  html body .field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group > input:focus {
    border-color: #0ABAB5 !important;
    box-shadow: 0 0 0 1px rgba(10, 186, 181, .45) !important;
    background: rgba(10, 186, 181, .08) !important;
  }
  html body .terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 8px !important;
    height: auto !important;
    margin: 0 !important;
    font-size: 12px !important; line-height: 18px !important;
    color: rgba(255, 255, 255, .68) !important;
  }
  html body .terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row .custom-checkbox {
    width: 18px !important; height: 18px !important;
    display: grid !important; place-items: center !important;
    border: 1px solid var(--nv-glass-border) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .06) !important;
    color: transparent !important;
    font-size: 12px !important;
  }
  html body .terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row input:checked + .custom-checkbox {
    background: linear-gradient(135deg, #0ABAB5, #089F9A) !important;
    border-color: #0ABAB5 !important;
    color: #000 !important;
  }
  html body [data-screen="delivery"] .delivery-status.delivery-status.delivery-status.delivery-status {
    margin: 0 !important;
    font-size: 13px !important; line-height: 19px !important;
    color: rgba(255, 255, 255, .72) !important;
  }
  html body [data-screen="delivery"] .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 30px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 12px 24px !important;
    min-height: 60px !important;
    height: auto !important;
    width: 100% !important;
    margin: 4px 0 0 !important;
    border: 2px solid #0ABAB5 !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, #0ABAB5, #089F9A) !important;
    color: #000 !important;
    box-shadow: 0 4px 15px rgba(10, 186, 181, .3) !important;
  }
  html body [data-screen="delivery"] .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button svg { stroke: #000 !important; width: 22px !important; height: 22px !important; }
  html body [data-screen="delivery"] .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button:disabled { opacity: .45 !important; }
  html body [data-screen="delivery"] .send-details-back.send-details-back.send-details-back.send-details-back {
    align-self: flex-start !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    background: none !important;
    border: 0 !important;
    color: rgba(255, 255, 255, .68) !important;
    font-size: 14px !important;
  }
}

/* اصلاحات فاز B پس از اندازه‌گیری: خط تزئینی تیتر، عرض فیلدها، ترتیب دکمه‌ها،
   و چپ‌چین شدن محتوای پنل فرم. */
html body #sendDetailsTitle#sendDetailsTitle#sendDetailsTitle::after,
html body #sendDetailsTitle#sendDetailsTitle#sendDetailsTitle::before { content: none !important; display: none !important; }

@media (min-width: 1100px) {
  html body .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel > *,
  html body .delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary > * { flex: 0 0 auto !important; }
  html body .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel { text-align: left !important; align-items: stretch !important; }
  html body [data-screen="delivery"] .send-details-header.send-details-header.send-details-header.send-details-header,
  html body [data-screen="delivery"] .send-details-header.send-details-header.send-details-header.send-details-header h2,
  html body [data-screen="delivery"] .send-details-kicker.send-details-kicker.send-details-kicker.send-details-kicker {
    text-align: left !important;
  }
  html body .send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form { align-items: stretch !important; width: 100% !important; }
  html body .field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group { width: 100% !important; align-self: stretch !important; }
  html body .field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group > input { max-width: 100% !important; flex: 0 0 auto !important; }
  html body [data-screen="delivery"] .send-details-back.send-details-back.send-details-back.send-details-back {
    position: static !important;
    inset: auto !important;
    order: 99 !important;
    margin-top: 6px !important;
  }
}

@media (min-width: 1100px) {
  html body .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel { padding: clamp(12px, 1.1vw, 18px) !important; gap: 10px !important; }
  html body .send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form { gap: 9px !important; }
  html body [data-screen="delivery"] .delivery-status.delivery-status.delivery-status.delivery-status:empty { display: none !important; }
  html body .delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary { gap: 8px !important; }
}

/* ============================================================================
   فاز B — DELIVERY ریسپانسیو (≤1099). پرتره همچنان ۱۶:۹.
   ============================================================================ */
@media (max-width: 1099px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="delivery"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas: "header" "layout" !important;
    align-content: stretch !important;
    row-gap: 12px !important;
    column-gap: 0 !important;
    overflow: hidden !important;
  }
  html body [data-screen="delivery"] .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header {
    grid-area: header !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  html body #sendDetailsTitle#sendDetailsTitle#sendDetailsTitle {
    font-size: clamp(22px, 3.4vw, 32px) !important;
    line-height: 1.02 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body #sendDetailsTitle#sendDetailsTitle#sendDetailsTitle br { display: none !important; }
  html body #sendDetailsTitle#sendDetailsTitle#sendDetailsTitle strong,
  html body #sendDetailsTitle#sendDetailsTitle#sendDetailsTitle span { display: block !important; color: #ffffff !important; font-weight: 400 !important; }
  html body #sendDetailsTitle#sendDetailsTitle#sendDetailsTitle strong::first-line { font-size: 1.28em !important; color: var(--cyan) !important; }
  html body [data-screen="delivery"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle { font-size: 15px !important; line-height: 1.4 !important; max-width: 62ch !important; margin: 0 !important; color: rgba(255, 255, 255, .82) !important; }
  html body [data-screen="delivery"] .experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow { margin: 0 !important; font-size: 13px !important; line-height: 18px !important; letter-spacing: .18em !important; }

  html body .delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout {
    grid-area: layout !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    gap: 12px !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body .delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary,
  html body .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px !important;
    background: var(--nv-glass-bg) !important;
    -webkit-backdrop-filter: var(--nv-glass-blur) !important;
    backdrop-filter: var(--nv-glass-blur) !important;
    border: 1px solid var(--nv-glass-border) !important;
    border-radius: 0 !important;
    box-shadow: var(--nv-glass-shadow) !important;
    text-align: left !important;
    align-items: stretch !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
  }
  html body .delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary > *,
  html body .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel > * { flex: 0 0 auto !important; }
  html body .delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    border: 1px solid var(--nv-glass-border-soft) !important;
  }
  html body [data-screen="delivery"] .send-details-brand.send-details-brand.send-details-brand.send-details-brand { display: none !important; }
  html body [data-screen="delivery"] .send-details-header.send-details-header.send-details-header.send-details-header,
  html body [data-screen="delivery"] .send-details-header.send-details-header.send-details-header.send-details-header h2,
  html body [data-screen="delivery"] .send-details-kicker.send-details-kicker.send-details-kicker.send-details-kicker { text-align: left !important; }
  html body [data-screen="delivery"] .send-details-header.send-details-header.send-details-header.send-details-header h2 {
    font-family: "Space Grotesk", sans-serif !important;
    font-size: clamp(17px, 2.3vw, 22px) !important;
    line-height: 1.18 !important; font-weight: 700 !important; color: #fff !important; margin: 0 !important;
  }
  html body [data-screen="delivery"] .send-details-kicker.send-details-kicker.send-details-kicker.send-details-kicker {
    font-size: 11px !important; line-height: 16px !important; letter-spacing: .18em !important;
    text-transform: uppercase !important; color: #0ABAB5 !important; margin: 0 0 4px !important;
  }
  html body .send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form.send-details-form { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 9px !important; width: 100% !important; }
  html body .field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group { display: flex !important; flex-direction: column !important; gap: 4px !important; width: 100% !important; align-self: stretch !important; }
  html body .field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group > label {
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 11px !important; line-height: 16px !important; letter-spacing: .16em !important;
    text-transform: uppercase !important; font-weight: 700 !important; color: rgba(255, 255, 255, .62) !important;
  }
  html body .field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group > input {
    width: 100% !important; max-width: 100% !important; min-height: 44px !important;
    padding: 9px 12px !important; font-size: 15px !important; color: #fff !important;
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid var(--nv-glass-border-soft) !important; border-radius: 0 !important; outline: none !important;
  }
  html body .field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group.field-group > input:focus { border-color: #0ABAB5 !important; box-shadow: 0 0 0 1px rgba(10, 186, 181, .45) !important; }
  html body .terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row {
    display: grid !important; grid-template-columns: 20px minmax(0, 1fr) !important;
    align-items: start !important; gap: 8px !important; margin: 0 !important;
    font-size: 12px !important; line-height: 18px !important; color: rgba(255, 255, 255, .68) !important;
  }
  html body .terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row .custom-checkbox {
    width: 18px !important; height: 18px !important; display: grid !important; place-items: center !important;
    border: 1px solid var(--nv-glass-border) !important; border-radius: 0 !important;
    background: rgba(255, 255, 255, .06) !important; color: transparent !important; font-size: 12px !important;
  }
  html body .terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row.terms-row input:checked + .custom-checkbox { background: linear-gradient(135deg, #0ABAB5, #089F9A) !important; border-color: #0ABAB5 !important; color: #000 !important; }
  html body [data-screen="delivery"] .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
    font-size: 17px !important; line-height: 1.3 !important; font-weight: 500 !important;
    text-transform: none !important; letter-spacing: normal !important;
    padding: 10px 20px !important; min-height: 52px !important; height: auto !important;
    width: 100% !important; margin: 2px 0 0 !important;
    border: 2px solid #0ABAB5 !important; border-radius: 0 !important;
    background: linear-gradient(135deg, #0ABAB5, #089F9A) !important; color: #000 !important;
    box-shadow: 0 4px 15px rgba(10, 186, 181, .3) !important;
  }
  html body [data-screen="delivery"] .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button svg { stroke: #000 !important; width: 20px !important; height: 20px !important; }
  html body [data-screen="delivery"] .send-details-back.send-details-back.send-details-back.send-details-back {
    position: static !important; inset: auto !important; order: 99 !important;
    align-self: flex-start !important; margin: 4px 0 0 !important; padding: 6px 0 !important;
    background: none !important; border: 0 !important; color: rgba(255, 255, 255, .68) !important; font-size: 13px !important;
  }
  html body [data-screen="delivery"] .delivery-status.delivery-status.delivery-status.delivery-status:empty { display: none !important; }
}

/* تبلت: خلاصه و فرم کنار هم */
@media (min-width: 768px) and (max-width: 1099px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="delivery"] { padding: clamp(72px, 10dvh, 112px) 32px 18px 32px !important; }
  html body .delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout { flex-direction: row !important; align-items: stretch !important; }
  html body .delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary { flex: 0 0 40% !important; max-width: 40% !important; height: 100% !important; max-height: 100% !important; }
  html body .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel { flex: 1 1 auto !important; height: 100% !important; max-height: 100% !important; }
}

/* موبایل: تک‌ستونی، اسکرول داخلی لایه */
@media (max-width: 767px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="delivery"] { padding: clamp(84px, 12dvh, 112px) clamp(14px, 4vw, 28px) 16px !important; }
  html body .delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout.delivery-stage-layout {
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
  }
  html body .delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary,
  html body .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel { flex: 0 0 auto !important; height: auto !important; max-height: none !important; overflow: visible !important; }
  html body .delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary > img { width: min(100%, 330px) !important; }
}

/* ============================================================================
   فاز C — ACHIEVEMENT: انتقال به دیزاین‌سیستم
   ستون چپ متن، ستون راست: پرتره ۱۶:۹ + رسید تکمیل + اشتراک‌گذاری، و جزئیات
   دستاورد روی سطح گلس. زنجیره‌ها ×۱۰.
   ============================================================================ */
html body #achievementStageTitle#achievementStageTitle#achievementStageTitle::after,
html body #achievementStageTitle#achievementStageTitle#achievementStageTitle::before { content: none !important; display: none !important; }

@media (min-width: 1100px) {
  html body .achievement-success[data-screen="achievement"] { --nv-media-w: 980px; }
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.achievement-success[data-screen="achievement"] {
    display: grid !important;
    grid-template-columns: minmax(340px, 0.86fr) minmax(680px, 1.55fr) !important;
    /* auto auto let the spanning media column split its height across both
       rows, so a top-aligned header and a top-aligned action row ended up
       half a screen apart. Row one is the header's own height and row two
       takes the remainder, so the action sits directly under the lede. */
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas: "header layout" "actions layout" !important;
    align-content: start !important;
    justify-items: stretch !important;
    padding: var(--nv-stage-pad-top) var(--nv-stage-pad-right) var(--nv-stage-pad-bottom) var(--nv-stage-pad-left) !important;
    column-gap: clamp(24px, 3vw, 56px) !important;
    row-gap: 0 !important;
    overflow: hidden !important;
  }
  html body .achievement-success[data-screen="achievement"] .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header {
    grid-area: header !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: clamp(10px, 1.4dvh, 18px) !important;
    width: 100% !important; max-width: 100% !important; height: auto !important;
    margin: 0 !important; padding: 0 !important;
  }
  html body #achievementStageTitle#achievementStageTitle#achievementStageTitle {
    --nv-hero-fs: clamp(40px, min(calc((100vw - 292px - var(--nv-media-w)) / 5.5), calc((100dvh - 470px) / 2.4)), var(--nv-hero-max)) !important;
    font-family: "Bayon", var(--nanno-font-display, sans-serif) !important;
    font-weight: 400 !important; font-synthesis-weight: none !important;
    font-size: calc(var(--nv-hero-fs) * var(--nv-hero-small-ratio)) !important;
    line-height: 1.0 !important; letter-spacing: normal !important; text-shadow: none !important;
    margin: 0 !important; padding: 0 !important;
  }
  html body #achievementStageTitle#achievementStageTitle#achievementStageTitle br { display: none !important; }
  html body #achievementStageTitle#achievementStageTitle#achievementStageTitle strong,
  html body #achievementStageTitle#achievementStageTitle#achievementStageTitle span { display: block !important; font-weight: 400 !important; font-synthesis-weight: none !important; color: #ffffff !important; }
  html body #achievementStageTitle#achievementStageTitle#achievementStageTitle strong::first-line { font-size: var(--nv-hero-fs) !important; font-weight: 400 !important; color: var(--cyan) !important; }
  html body .achievement-success[data-screen="achievement"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle {
    font-size: var(--nv-lede-fs) !important; line-height: var(--nv-lede-lh) !important;
    color: #fff !important; max-width: 34ch !important; margin: 0 !important;
  }
  html body .achievement-success[data-screen="achievement"] .experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions,
  html body .achievement-success[data-screen="achievement"] .achievement-actions.achievement-actions.achievement-actions.achievement-actions.achievement-actions.achievement-actions.achievement-actions.achievement-actions.achievement-actions.achievement-actions {
    grid-area: actions !important;
    align-self: start !important; justify-self: start !important;
    position: static !important; inset: auto !important; transform: none !important;
    display: flex !important; flex-wrap: wrap !important;
    align-items: center !important; justify-content: flex-start !important;
    gap: 14px !important; width: auto !important; max-width: 100% !important; height: auto !important;
    margin: clamp(14px, 2.2dvh, 26px) 0 0 !important; padding: 0 !important;
  }

  html body .achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout {
    grid-area: layout !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr) !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    grid-template-areas: "portrait details" "stub details" "share details" "services details" !important;
    align-items: start !important;
    align-content: start !important;
    align-self: stretch !important;
    gap: clamp(12px, 1.2vw, 20px) !important;
    width: 100% !important; height: 100% !important; max-height: 100% !important; min-height: 0 !important;
    margin: 0 !important; padding: 0 !important;
    overflow: hidden !important;
  }
  html body .achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout > .achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap { grid-area: portrait !important; }
  html body .achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout > .achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub { grid-area: stub !important; }
  html body .achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout > .achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share { grid-area: share !important; }
  html body .achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout > .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details { grid-area: details !important; }

  html body .achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap {
    position: relative !important;
    display: block !important;
    align-self: start !important; justify-self: stretch !important;
    width: 100% !important; height: auto !important; max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important; margin: 0 !important; padding: 0 !important;
    background: var(--nv-glass-bg) !important;
    -webkit-backdrop-filter: var(--nv-glass-blur) !important;
    backdrop-filter: var(--nv-glass-blur) !important;
    border: 1px solid var(--nv-glass-border) !important;
    border-radius: 0 !important;
    box-shadow: var(--nv-glass-shadow) !important;
  }
  html body .achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap > img {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important; max-height: none !important;
    object-fit: cover !important; border-radius: 0 !important;
  }
  html body .achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap .portrait-preview-trigger {
    position: absolute !important; top: 10px !important; right: 10px !important; left: auto !important; bottom: auto !important;
    width: 34px !important; height: 34px !important; display: grid !important; place-items: center !important;
    padding: 0 !important; border-radius: 0 !important;
    border: 1px solid var(--nv-glass-border) !important;
    background: rgba(2, 14, 15, .5) !important;
    -webkit-backdrop-filter: var(--nv-glass-blur-soft) !important;
    backdrop-filter: var(--nv-glass-blur-soft) !important;
    color: #fff !important;
  }
  html body .achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap .achievement-seal {
    position: absolute !important; left: 10px !important; top: 10px !important; bottom: auto !important; right: auto !important;
    width: 34px !important; height: 34px !important; display: grid !important; place-items: center !important;
    border-radius: 0 !important; border: 1px solid #0ABAB5 !important;
    background: linear-gradient(135deg, #0ABAB5, #089F9A) !important;
    color: #000 !important; font-size: 16px !important; font-weight: 700 !important;
  }

  html body .achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub,
  html body .achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share {
    display: block !important;
    align-self: start !important;
    height: auto !important; max-height: none !important; margin: 0 !important;
    padding: clamp(10px, 1vw, 14px) !important;
    background: var(--nv-glass-bg-soft) !important;
    -webkit-backdrop-filter: var(--nv-glass-blur-soft) !important;
    backdrop-filter: var(--nv-glass-blur-soft) !important;
    border: 1px solid var(--nv-glass-border-soft) !important;
    border-radius: 0 !important; box-shadow: none !important;
  }
  html body .achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub .achievement-stub-meta { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin: 0 !important; }
  html body .achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub dt { font-size: 10px !important; line-height: 15px !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: #0ABAB5 !important; }
  html body .achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub dd { margin: 0 !important; font-size: 13px !important; line-height: 19px !important; color: #fff !important; }
  html body .achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share h2 {
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 12px !important; line-height: 18px !important; font-weight: 700 !important;
    letter-spacing: .16em !important; text-transform: uppercase !important; color: #0ABAB5 !important; margin: 0 0 6px !important;
  }
  html body .achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share p { font-size: 13px !important; line-height: 19px !important; color: rgba(255, 255, 255, .72) !important; margin: 0 0 8px !important; }
  html body .achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 !important; }
  html body .achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions > button {
    flex: 0 0 auto !important; width: auto !important; height: auto !important;
    min-height: 40px !important; padding: 8px 14px !important;
    font-size: 13px !important; line-height: 20px !important; font-weight: 500 !important;
    text-transform: none !important; letter-spacing: normal !important;
    border-radius: 0 !important;
    border: 1px solid var(--nv-glass-border) !important;
    background: rgba(255, 255, 255, .1) !important;
    -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important;
    color: #fff !important; box-shadow: none !important;
  }
  html body .achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions > button:hover { background: var(--nv-glass-hover-bg) !important; border-color: #0ABAB5 !important; color: #0ABAB5 !important; }

  html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details {
    display: block !important;
    height: 100% !important; max-height: 100% !important; min-height: 0 !important;
    margin: 0 !important; padding: clamp(14px, 1.4vw, 22px) !important;
    background: var(--nv-glass-bg) !important;
    -webkit-backdrop-filter: var(--nv-glass-blur) !important;
    backdrop-filter: var(--nv-glass-blur) !important;
    border: 1px solid var(--nv-glass-border) !important;
    border-radius: 0 !important; box-shadow: var(--nv-glass-shadow) !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    scrollbar-width: thin !important; scrollbar-color: rgba(255, 255, 255, .22) transparent !important;
    text-align: left !important;
  }
  html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details > * + * { margin-top: clamp(8px, 1.1dvh, 14px) !important; }
  html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details .achievement-success-eyebrow,
  html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details .achievement-badge-label {
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 11px !important; line-height: 16px !important; letter-spacing: .18em !important;
    text-transform: uppercase !important; color: #0ABAB5 !important; margin: 0 !important;
  }
  html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details > h1 {
    font-family: "Space Grotesk", sans-serif !important;
    font-size: clamp(20px, 1.55vw, 28px) !important; line-height: 1.16 !important;
    font-weight: 700 !important; letter-spacing: -.01em !important; color: #fff !important; margin: 6px 0 0 !important;
  }
  html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details p { font-size: 14px !important; line-height: 21px !important; color: rgba(255, 255, 255, .82) !important; }
  html body .achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  html body .achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals > article {
    display: block !important; height: auto !important; padding: 10px 12px !important;
    background: var(--nv-glass-bg-soft) !important;
    border: 1px solid var(--nv-glass-border-soft) !important; border-radius: 0 !important; box-shadow: none !important;
  }
  html body .achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals > article > span {
    display: block !important; font-size: 10px !important; line-height: 15px !important;
    letter-spacing: .16em !important; text-transform: uppercase !important; color: #0ABAB5 !important; margin: 0 0 4px !important;
  }
  html body .achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals > article > strong { font-size: 14px !important; line-height: 20px !important; color: #fff !important; }
  html body .achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps {
    padding: 10px 12px !important;
    background: var(--nv-glass-bg-soft) !important;
    border: 1px solid var(--nv-glass-border-soft) !important; border-radius: 0 !important;
  }
  html body .achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps h2 {
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 11px !important; line-height: 16px !important; font-weight: 700 !important;
    letter-spacing: .16em !important; text-transform: uppercase !important; color: #0ABAB5 !important; margin: 0 0 6px !important;
  }
  html body .achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps ol { margin: 0 !important; padding-left: 18px !important; }
  html body .achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps li { font-size: 14px !important; line-height: 21px !important; color: rgba(255, 255, 255, .82) !important; }
  html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details .achievement-delivery-state {
    display: flex !important; align-items: center !important; gap: 8px !important;
    padding: 8px 10px !important; height: auto !important;
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid var(--nv-glass-border-soft) !important; border-radius: 0 !important;
  }
  html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details .achievement-delivery-state p { margin: 0 !important; font-size: 13px !important; }
  html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details .achievement-disclaimer { font-size: 11px !important; line-height: 16px !important; color: rgba(255, 255, 255, .5) !important; }
  html body .achievement-success[data-screen="achievement"] .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
    font-size: 20px !important; font-weight: 500 !important; line-height: 30px !important;
    text-transform: none !important; letter-spacing: normal !important;
    padding: 12px 24px !important; min-height: 60px !important; height: auto !important;
    width: max-content !important; max-width: 100% !important; margin: 0 !important;
    border: 2px solid #0ABAB5 !important; border-radius: 0 !important;
    background: linear-gradient(135deg, #0ABAB5, #089F9A) !important; color: #000 !important;
    box-shadow: 0 4px 15px rgba(10, 186, 181, .3) !important;
  }
  html body .achievement-success[data-screen="achievement"] .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button svg { stroke: #000 !important; }
  html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button { width: 100% !important; font-size: 17px !important; min-height: 52px !important; }
}

/* ---------- ACHIEVEMENT ≤1099 ---------- */
@media (max-width: 1099px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.achievement-success[data-screen="achievement"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "header" "layout" "actions" !important;
    align-content: stretch !important;
    row-gap: 12px !important; column-gap: 0 !important;
    overflow: hidden !important;
  }
  html body .achievement-success[data-screen="achievement"] .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header {
    grid-area: header !important; align-self: start !important;
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
    align-items: flex-start !important; gap: 6px !important;
    width: 100% !important; height: auto !important; margin: 0 !important;
  }
  html body #achievementStageTitle#achievementStageTitle#achievementStageTitle { font-size: clamp(22px, 3.4vw, 32px) !important; line-height: 1.02 !important; margin: 0 !important; }
  html body #achievementStageTitle#achievementStageTitle#achievementStageTitle br { display: none !important; }
  html body #achievementStageTitle#achievementStageTitle#achievementStageTitle strong,
  html body #achievementStageTitle#achievementStageTitle#achievementStageTitle span { display: block !important; color: #ffffff !important; font-weight: 400 !important; }
  html body #achievementStageTitle#achievementStageTitle#achievementStageTitle strong::first-line { font-size: 1.28em !important; color: var(--cyan) !important; }
  html body .achievement-success[data-screen="achievement"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle { font-size: 15px !important; line-height: 1.4 !important; max-width: 62ch !important; margin: 0 !important; color: rgba(255, 255, 255, .82) !important; }
  html body .achievement-success[data-screen="achievement"] .experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow { margin: 0 !important; font-size: 13px !important; line-height: 18px !important; letter-spacing: .18em !important; }

  html body .achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout {
    grid-area: layout !important;
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
    grid-template-columns: none !important; grid-template-rows: none !important; grid-template-areas: none !important;
    align-items: stretch !important; justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important; height: 100% !important; max-height: 100% !important; min-height: 0 !important;
    margin: 0 !important; padding: 0 2px 0 0 !important;
    overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: thin !important;
  }
  html body .achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout > * { grid-area: auto !important; flex: 0 0 auto !important; }
  html body .achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout > .achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap { order: 1 !important; width: min(100%, 330px) !important; max-width: min(100%, 330px) !important; align-self: flex-start !important; position: relative !important; display: block !important; height: auto !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; padding: 0 !important; background: var(--nv-glass-bg) !important; border: 1px solid var(--nv-glass-border) !important; border-radius: 0 !important; }
  html body .achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout > .achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap > img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
  html body .achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout > .achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub { order: 2 !important; }
  html body .achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout > .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details { order: 3 !important; height: auto !important; max-height: none !important; overflow: visible !important; }
  html body .achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout > .achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share { order: 4 !important; }
  html body .achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub,
  html body .achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share {
    display: block !important; height: auto !important; margin: 0 !important; padding: 12px !important;
    background: var(--nv-glass-bg-soft) !important;
    border: 1px solid var(--nv-glass-border-soft) !important; border-radius: 0 !important;
  }
  html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details {
    display: block !important; margin: 0 !important; padding: 14px !important;
    background: var(--nv-glass-bg) !important;
    -webkit-backdrop-filter: var(--nv-glass-blur) !important; backdrop-filter: var(--nv-glass-blur) !important;
    border: 1px solid var(--nv-glass-border) !important; border-radius: 0 !important;
    box-shadow: var(--nv-glass-shadow) !important; text-align: left !important;
  }
  html body .achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  html body .achievement-success[data-screen="achievement"] .experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions.experience-stage-actions,
  html body .achievement-success[data-screen="achievement"] .achievement-actions.achievement-actions.achievement-actions.achievement-actions.achievement-actions.achievement-actions.achievement-actions.achievement-actions.achievement-actions.achievement-actions {
    grid-area: actions !important; position: static !important; inset: auto !important;
    align-self: start !important; justify-self: stretch !important;
    display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important;
    gap: 10px !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important;
  }
  html body .achievement-success[data-screen="achievement"] .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
    font-size: 17px !important; line-height: 1.3 !important; min-height: 52px !important; height: auto !important;
    width: 100% !important; padding: 10px 20px !important; margin: 0 !important;
    border: 2px solid #0ABAB5 !important; border-radius: 0 !important;
    background: linear-gradient(135deg, #0ABAB5, #089F9A) !important; color: #000 !important;
  }
  html body .achievement-success[data-screen="achievement"] .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button svg { stroke: #000 !important; }
}

@media (min-width: 768px) and (max-width: 1099px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.achievement-success[data-screen="achievement"] { padding: clamp(72px, 10dvh, 112px) 32px 18px 32px !important; }
}
@media (max-width: 767px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.achievement-success[data-screen="achievement"] { padding: clamp(84px, 12dvh, 112px) clamp(14px, 4vw, 28px) 16px !important; }
  html body .achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ============================================================================
   حذف دکمه‌های بازگشت (بازخورد کاربر): ناوبری بین مراحل فقط از ریل کناری
   انجام می‌شود؛ کاربر می‌تواند به مرحله‌ی قبل برگردد و دوباره جلو برود.
   با display:none حذف می‌شوند تا منطق JS (که این دکمه‌ها را hidden/visible
   می‌کند) دست‌نخورده بماند.
   ============================================================================ */
html body #backToPortraits#backToPortraits,
html body #closeSendDetails#closeSendDetails,
html body .send-details-back.send-details-back.send-details-back.send-details-back.send-details-back.send-details-back.send-details-back.send-details-back.send-details-back.send-details-back {
  display: none !important;
}

/* ============================================================================
   قفل نسبت تصویر — قانون ثابت پروژه: همه‌ی پرتره‌های تولیدی ۱۶:۹ افقی هستند
   (فایل‌های واقعی 2752×1536). این بلوک با سلکتور ID نوشته شده تا از زنجیره‌های
   کلاسی canonical بالاتر باشد و در هیچ بریک‌پوینتی نسبت عوض نشود.
   ============================================================================ */
html body #advicePortraitImage#advicePortraitImage,
html body #achievementPortraitImage#achievementPortraitImage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
}
html body #deliveryPortraitImage#deliveryPortraitImage {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* آی‌بروی تکراری داخل پنل جزئیات (در هدر صفحه هم هست) حذف می‌شود */
html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details .achievement-success-eyebrow {
  display: none !important;
}

/* مقیاس تایپ فاز C در بازه‌ی ≤1099 (پیش‌فرض canonical دسکتاپ‌سایز بود) */
@media (max-width: 1099px) {
  html body .achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap .portrait-preview-trigger {
    position: absolute !important; top: 8px !important; right: 8px !important; left: auto !important; bottom: auto !important;
    width: 30px !important; height: 30px !important; display: grid !important; place-items: center !important;
    padding: 0 !important; border-radius: 0 !important; border: 1px solid var(--nv-glass-border) !important;
    background: rgba(2, 14, 15, .5) !important; color: #fff !important;
  }
  html body .achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap .achievement-seal {
    position: absolute !important; left: 8px !important; top: 8px !important; bottom: auto !important; right: auto !important;
    width: 30px !important; height: 30px !important; display: grid !important; place-items: center !important;
    padding: 0 !important; border-radius: 0 !important; border: 1px solid #0ABAB5 !important;
    background: linear-gradient(135deg, #0ABAB5, #089F9A) !important;
    color: #000 !important; font-size: 15px !important; font-weight: 700 !important;
  }
  html body .achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub .achievement-stub-meta { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin: 0 !important; }
  html body .achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub dt { font-size: 10px !important; line-height: 15px !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: #0ABAB5 !important; }
  html body .achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub.achievement-stub dd { margin: 0 !important; font-size: 13px !important; line-height: 19px !important; color: #fff !important; }
  html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details > * + * { margin-top: 10px !important; }
  html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details .achievement-badge-label {
    font-family: "Space Grotesk", sans-serif !important; font-size: 11px !important; line-height: 16px !important;
    letter-spacing: .18em !important; text-transform: uppercase !important; color: #0ABAB5 !important; margin: 0 !important;
  }
  html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details > h1 {
    font-family: "Space Grotesk", sans-serif !important; font-size: clamp(18px, 2.4vw, 24px) !important;
    line-height: 1.16 !important; font-weight: 700 !important; color: #fff !important; margin: 4px 0 0 !important;
  }
  html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details > h1::after, html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details > h1::before { content: none !important; display: none !important; }
  html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details p { font-size: 14px !important; line-height: 21px !important; color: rgba(255, 255, 255, .82) !important; }
  html body .achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals > article { display: block !important; height: auto !important; padding: 10px 12px !important;
    background: var(--nv-glass-bg-soft) !important; border: 1px solid var(--nv-glass-border-soft) !important; border-radius: 0 !important; box-shadow: none !important; }
  html body .achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals > article > span { display: block !important; font-size: 10px !important; line-height: 15px !important;
    letter-spacing: .16em !important; text-transform: uppercase !important; color: #0ABAB5 !important; margin: 0 0 4px !important; }
  html body .achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals > article > strong { font-size: 14px !important; line-height: 20px !important; color: #fff !important; }
  html body .achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps { padding: 10px 12px !important; background: var(--nv-glass-bg-soft) !important;
    border: 1px solid var(--nv-glass-border-soft) !important; border-radius: 0 !important; }
  html body .achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps h2 { font-family: "Space Grotesk", sans-serif !important; font-size: 11px !important; line-height: 16px !important;
    font-weight: 700 !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: #0ABAB5 !important; margin: 0 0 6px !important; }
  html body .achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps ol { margin: 0 !important; padding-left: 18px !important; }
  html body .achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps li { font-size: 14px !important; line-height: 21px !important; color: rgba(255, 255, 255, .82) !important; }
  html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details .achievement-delivery-state { display: flex !important; align-items: center !important; gap: 8px !important;
    padding: 8px 10px !important; height: auto !important; background: rgba(255, 255, 255, .05) !important;
    border: 1px solid var(--nv-glass-border-soft) !important; border-radius: 0 !important; }
  html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details .achievement-delivery-state p { margin: 0 !important; font-size: 13px !important; }
  html body .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details .achievement-disclaimer { font-size: 11px !important; line-height: 16px !important; color: rgba(255, 255, 255, .5) !important; }
  html body .achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share h2 { font-family: "Space Grotesk", sans-serif !important; font-size: 12px !important; line-height: 18px !important;
    font-weight: 700 !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: #0ABAB5 !important; margin: 0 0 6px !important; }
  html body .achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share p { font-size: 13px !important; line-height: 19px !important; color: rgba(255, 255, 255, .72) !important; margin: 0 0 8px !important; }
  html body .achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 0 !important; }
  html body .achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions > button { flex: 0 0 auto !important; width: auto !important; height: auto !important; min-height: 40px !important;
    padding: 8px 14px !important; font-size: 13px !important; line-height: 20px !important; font-weight: 500 !important;
    text-transform: none !important; letter-spacing: normal !important; border-radius: 0 !important;
    border: 1px solid var(--nv-glass-border) !important; background: rgba(255, 255, 255, .1) !important; color: #fff !important; box-shadow: none !important; }
}

/* صفحه‌ی Achievement در canonical با height:auto رها شده بود و از ویوپورت
   بلندتر می‌شد (محتوا بریده و غیرقابل‌دسترس). قاب صفحه را صریح می‌بندیم تا
   مثل بقیه‌ی صفحه‌ها دقیقاً اندازه‌ی ویوپورت باشد و لایه‌ی داخلی اسکرول کند. */
html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="achievement"],
html body .achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success[data-screen="achievement"],
html body #successToast#successToast#successToast {
  position: absolute !important;
  inset: 78px 0 0 0 !important;
  top: 78px !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  /* .modal-shell یک گرید است؛ برای فرزندِ absolute، بلوکِ دربرگیرنده «ناحیه‌ی
     گرید» است نه padding-box. با grid-area:auto دوباره به padding-box برمی‌گردد
     و ارتفاع صفحه دقیقاً به ویوپورت قفل می‌شود. */
  grid-area: auto !important;
}

/* تایپ خلاصه‌ی تحویل در ≤1099 و سقف عرض پرتره در موبایل */
@media (max-width: 1099px) {
  html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy { display: flex !important; flex-direction: column !important; gap: 5px !important; padding: 0 !important; }
  html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy > span {
    font-family: "Space Grotesk", sans-serif !important; font-size: 11px !important; line-height: 16px !important;
    letter-spacing: .18em !important; text-transform: uppercase !important; color: #0ABAB5 !important; margin: 0 !important;
  }
  html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy > strong {
    font-family: "Space Grotesk", sans-serif !important; font-size: 16px !important; line-height: 22px !important;
    font-weight: 700 !important; color: #fff !important;
  }
  html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy b {
    display: block !important; font-family: "Space Grotesk", sans-serif !important;
    font-size: 11px !important; line-height: 16px !important; letter-spacing: .16em !important;
    text-transform: uppercase !important; font-weight: 700 !important; color: #0ABAB5 !important; margin: 6px 0 4px !important;
  }
  html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy p,
  html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy li { font-size: 14px !important; line-height: 21px !important; color: rgba(255, 255, 255, .82) !important; }
  html body .delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy.delivery-summary-copy ol { margin: 0 !important; padding-left: 18px !important; }
}
@media (max-width: 767px) {
  html body #deliveryPortraitImage#deliveryPortraitImage#deliveryPortraitImage {
    width: min(100%, 330px) !important;
    max-width: min(100%, 330px) !important;
    align-self: flex-start !important;
  }
}

/* ============================================================================
   اصلاحات E2E لوکال — ۳۱ اوت
   ============================================================================ */

/* تنها ایراد واقعیِ «Take Photo»: دکمه وسط‌چین بود چون margin-inline:auto
   می‌گرفت. خوشه‌ی پایین-چپ و ترفند width:0+min-width:100% از قبل درست بودند —
   اورراید اولیه‌ی من آن‌ها را خراب کرد و برگردانده شد. */
html body [data-screen="capture"] #retakeCameraPhoto#retakeCameraPhoto#retakeCameraPhoto {
  align-self: center !important;
  justify-self: start !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  margin-inline: 0 !important;
  width: max-content !important;
}
/* دکمه و یادداشت کنار هم، نه روی هم: وقتی «Take Photo» ظاهر می‌شود خوشه‌ی
   پایین-چپ یک ردیف بلندتر می‌شد و بالا می‌آمد تا زیر خط دوم لید. کنار هم که
   باشند ارتفاع خوشه ~۶۰px کم می‌شود و برخورد از بین می‌رود. */
@media (min-width: 1100px) {
  html body [data-screen="capture"] .capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
  }
  html body [data-screen="capture"] .capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions.capture-secondary-actions > .secure-processing-note {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}

/* دکمه‌ی ارسال در Delivery: وقتی پیام وضعیت واقعی می‌آید، پنل فرم بلندتر از
   ارتفاعش می‌شود و دکمه زیر لبه می‌افتد. چسبناکش می‌کنیم تا همیشه در دسترس
   باشد، هر چقدر هم محتوای فرم بلند شود. */
/* بدون قید بریک‌پوینت: در تبلت و موبایل هم پنل فرم اسکرول داخلی دارد و دکمه
   زیر لبه می‌افتاد (اندازه‌گیری در 834×953: پنل تا 935 و دکمه در 963). */
html body [data-screen="delivery"] .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel {
  padding-bottom: 0 !important;
}
html body [data-screen="delivery"] #submitBtn#submitBtn#submitBtn {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 3 !important;
  margin-bottom: clamp(12px, 1.1vw, 18px) !important;
}

/* پیام تکراری زیر دوربین: #cameraHintText (داخل قاب) و #cameraStatus (زیر قاب)
   فقط روی یک پیام همپوشانی دارند — «Selected image is ready». همه‌ی خطاها
   (فایل نامعتبر، حجم زیاد، در دسترس نبودن سرویس تولید) فقط در #cameraStatus
   نوشته می‌شوند، پس آن دست‌نخورده می‌ماند. راهنمای کادربندی هم بعد از
   آپلود/عکس‌گرفتن بی‌معنی است، پس فقط در همان دو حالت خاموش می‌شود. */
html body .camera-frame[data-guide-state="uploaded"] #hintBox#hintBox,
html body .camera-frame[data-guide-state="captured"] #hintBox#hintBox {
  display: none !important;
}

/* ============================================================================
   اصلاحات دور دوم E2E (تبلت + موبایل) — ۳۱ اوت
   ============================================================================ */

/* B) دکمه‌ی «مشاهده‌ی کامل» داخل کارت‌ها مربع خاکستری تو‌پر رندر می‌شد (پس‌زمینه‌ی
   rgb(107,107,107) بدون سایز آیکن). همان اسپک شیشه‌ای Advice/Achievement. */
html body #resultGrid .portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  left: auto !important;
  bottom: auto !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: 1px solid var(--nv-glass-border, rgba(255, 255, 255, .18)) !important;
  background: rgba(2, 14, 15, .5) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  color: #fff !important;
  box-shadow: none !important;
  z-index: 4 !important;
}
html body #resultGrid .portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
}
html body #resultGrid .portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger:hover {
  background: rgba(10, 186, 181, .12) !important;
  border-color: #0ABAB5 !important;
  color: #0ABAB5 !important;
}

/* C) Capture در تبلت: دوستونه‌بودن تصمیم عمدی است (تک‌ستونی دوربین را در
   ۸۲۰px به ۱۶۰×۲۱۴ می‌رساند). ایراد واقعی align-content:start بود که ~۱۵۰px
   فضای مرده ته صفحه می‌گذاشت. ردیف‌ها ارتفاع را پر می‌کنند. */
@media (min-width: 768px) and (max-width: 1099px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="capture"] {
    align-content: stretch !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    row-gap: 12px !important;
  }
  html body [data-screen="capture"] .screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions.screen-actions {
    align-self: end !important;
  }
}


/* ============================================================
   فاز E — اصلاحات اندازه‌گیری‌شده‌ی ۲۰۲۶-۰۹-۰۱
   ============================================================ */

/* Delivery submit in its Sending state grew to ~137px against a 66px spec.
   modal-flow.css (protected) sizes .button-spinner in container-query units -
   `width: 5cqw; height: 5cqw` - so the spinner is 5% of the query container's
   width. Inside the delivery panel that container is the modal, and 5cqw lands
   near 75px: the button was being pushed open by its own spinner. The unit is
   fine on the narrow surfaces it was written for, so it is pinned here rather
   than changed at source. */
html body [data-screen="delivery"] #submitBtn#submitBtn#submitBtn .button-spinner {
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  border-width: 2px !important;
  margin-right: 10px !important;
}
html body [data-screen="delivery"] #submitBtn#submitBtn#submitBtn {
  max-height: 66px !important;
  overflow: hidden !important;
}

/* Recap answers carry a leading emoji from the quiz option text itself, so a
   wrapped answer put its second line to the LEFT of the words above it
   ("directly" starting before "Seeing"). The emoji cannot be split off in CSS,
   so the paragraph gets a hanging indent instead and every line after the
   first aligns with the words rather than the glyph. */
@media (min-width: 1100px) {
  html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap dd {
    padding-left: 1.6em !important;
    text-indent: -1.6em !important;
  }
}

/* The selected-direction caption sits over the bottom of the 16:9 portrait on a
   soft gradient, and where the photo is bright behind it the eyebrow read as if
   a rule had been drawn through it. A flat glass plate gives the caption its own
   ground instead of depending on what the photograph happens to show. */
@media (min-width: 1100px) {
  html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel > div {
    background: linear-gradient(to top, rgba(2, 14, 15, .92) 0%, rgba(2, 14, 15, .88) 62%, rgba(2, 14, 15, .55) 100%) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    border-top: 1px solid rgba(255, 255, 255, .12) !important;
  }
}

/* The email outcome is stated once, by .achievement-delivery-state.
   #achievementMessage is left empty by the renderer, so it is collapsed
   here instead of leaving its margin behind as a phantom row. */
html body #achievementMessage#achievementMessage#achievementMessage:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   فاز F — دور اصلاحات ۲۰۲۶-۰۹-۰۱ (بازخورد نهیرا)
   ============================================================ */

@media (min-width: 1100px) {

  /* ---- Profile: the selection tick and the preview control both lived in
     the image's top-right corner, 10px apart, so they overlapped as two
     offset squares. The tick marks the card's state and belongs where the eye
     checks it; the preview is a tool and moves to the opposite corner. ---- */
  html body #resultGrid .selection-mark.selection-mark.selection-mark.selection-mark.selection-mark.selection-mark.selection-mark.selection-mark.selection-mark.selection-mark {
    right: 0 !important; top: 0 !important; left: auto !important; bottom: auto !important;
    z-index: 4 !important;
  }
  html body #resultGrid .portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger {
    top: auto !important; bottom: 10px !important; right: 10px !important; left: auto !important;
    z-index: 4 !important;
  }

  /* ---- Profile: equal cards. The grid stretches its cards, but the caption
     inside each one was sized by its own text, so three different bullet
     lengths produced three different card bottoms. The caption grows to fill
     whatever height the row gives it and the bullet list takes the slack, so
     the bottoms line up whether the text is long or short. ---- */
  html body #resultGrid#resultGrid { align-items: stretch !important; }
  html body #resultGrid .result-caption.result-caption.result-caption.result-caption {
    flex: 1 1 auto !important;
    display: flex !important; flex-direction: column !important;
  }
  html body #resultGrid .portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points {
    flex: 1 1 auto !important; margin-bottom: 0 !important;
  }

  /* ---- Profile: the continue button carried the disabled attribute but none
     of the look, so it read as pressable while the note under it said to
     choose a portrait first. ---- */
  html body [data-screen="portrait-discovery"] #openSendDetails#openSendDetails#openSendDetails:disabled {
    border-color: rgba(255, 255, 255, .22) !important;
    background: var(--nv-glass-bg) !important;
    color: rgba(255, 255, 255, .45) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
  }
  html body [data-screen="portrait-discovery"] #openSendDetails#openSendDetails#openSendDetails:disabled svg {
    stroke: rgba(255, 255, 255, .45) !important;
  }

  /* ---- Explore: the signature gradient divider is drawn by
     .quiz-panel-header::after. In the quiz-complete state the header has no
     visible content, so the divider was left stranded at the panel's top edge
     and read as a cyan border that stops a fifth of the way across. ---- */
  html body [data-screen="generating"] .quiz-panel-header.quiz-panel-header.quiz-panel-header.quiz-panel-header.quiz-panel-header.quiz-panel-header:empty::after,
  html body [data-screen="generating"] .quiz-panel-header:not(:has(*:not([hidden])))::after {
    content: none !important;
    display: none !important;
  }

  /* ---- Explore: the panel repeated the bottom bar exactly - the answer count
     and the portrait count are both already down there, with more room. ---- */
  html body [data-screen="generating"] .quiz-complete-saved.quiz-complete-saved.quiz-complete-saved.quiz-complete-saved.quiz-complete-saved.quiz-complete-saved,
  html body [data-screen="generating"] .quiz-complete-progress.quiz-complete-progress.quiz-complete-progress.quiz-complete-progress.quiz-complete-progress.quiz-complete-progress {
    display: none !important;
  }

  /* ---- Advice: portrait 20% larger, ratio untouched. The panel is 16:9 with
     the image absolutely filling it, so widening the column is what grows the
     picture; the recap below it keeps the same column. ---- */
  html body .advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout {
    grid-template-columns: minmax(0, 0.888fr) minmax(0, 1.372fr) !important;
  }

  /* ---- Advice: both columns end on one line. The left column was sized by
     its own content, so a short recap left a step of empty panel beside the
     taller right-hand column. ---- */
  html body .advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout > * { align-self: stretch !important; }
  html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap {
    height: 100% !important; display: flex !important; flex-direction: column !important;
  }
  html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap .advice-recap-list { flex: 1 1 auto !important; }

  /* ---- Delivery: one direction for the whole form. Persian in the name and
     organisation fields flipped those two to the right while the email stayed
     left, so three fields in one form sat on two different edges. Latin and
     Persian both keep their own internal shaping; only the box agrees. ---- */
  html body [data-screen="delivery"] .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel :is(input, textarea) {
    direction: ltr !important;
    text-align: left !important;
  }

  /* ---- Delivery: the summary panel ended well above the form's bottom edge.
     Its blocks now share the slack instead of stacking at the top. ---- */
  html body [data-screen="delivery"] .delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary {
    display: flex !important; flex-direction: column !important;
    /* space-between put the whole 186px of slack into the widest gap, which
       landed directly under the portrait. The blocks pack from the top and
       the leftover falls after the last line instead. */
    justify-content: flex-start !important;
    gap: clamp(12px, 1.4vh, 22px) !important;
  }

  /* ---- Achievement: the left column stays. Only the button swaps, so the
     finale keeps the same three-column skeleton as every other screen and the
     way forward never disappears. ---- */
  html body .achievement-success[data-screen="achievement"] .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header,
  html body .achievement-success[data-screen="achievement"] .achievement-stage-header.achievement-stage-header.achievement-stage-header.achievement-stage-header.achievement-stage-header.achievement-stage-header.achievement-stage-header.achievement-stage-header.achievement-stage-header.achievement-stage-header {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* The restart control shares the header's column and must never be the
     thing that disappears: it is the only way off this screen. */
  html body .achievement-success[data-screen="achievement"] .achievement-actions.achievement-actions.achievement-actions.achievement-actions.achievement-actions.achievement-actions.achievement-actions.achievement-actions.achievement-actions.achievement-actions:not([hidden]) {
    display: flex !important;
    visibility: visible !important;
  }

  /* Share, Save and Copy were bare grey rectangles. Secondary reference spec:
     glass ground, cyan on hover, square, same height as the other controls. */
  html body .achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions > button {
    min-height: 44px !important;
    padding: 12px 18px !important;
    border: 1px solid var(--nv-glass-border) !important;
    border-radius: 0 !important;
    background: var(--nv-glass-bg) !important;
    color: rgba(255, 255, 255, .88) !important;
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 14px !important; font-weight: 500 !important;
    letter-spacing: .02em !important; line-height: 1 !important;
    box-shadow: none !important;
  }
  html body .achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions > button:hover {
    border-color: #0ABAB5 !important;
    color: #0ABAB5 !important;
    background: var(--nv-glass-hover-bg) !important;
  }
}

/* ---- Fullscreen preview: the close control was a bare glyph on a black band
   pinned to the top-left. It becomes a glass square in the top-right, the same
   shape and position as the preview and seal controls it was opened from. ---- */
html body dialog.portrait-lightbox .portrait-lightbox.portrait-lightbox.portrait-lightbox.portrait-lightbox.portrait-lightbox.portrait-lightbox.portrait-lightbox.portrait-lightbox.portrait-lightbox {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
html body .portrait-lightbox-header.portrait-lightbox-header.portrait-lightbox-header.portrait-lightbox-header.portrait-lightbox-header.portrait-lightbox-header.portrait-lightbox-header.portrait-lightbox-header.portrait-lightbox-header.portrait-lightbox-header {
  position: absolute !important;
  top: 14px !important; right: 14px !important; left: auto !important;
  z-index: 5 !important;
  margin: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important;
}
html body .portrait-lightbox-kicker.portrait-lightbox-kicker.portrait-lightbox-kicker.portrait-lightbox-kicker.portrait-lightbox-kicker.portrait-lightbox-kicker.portrait-lightbox-kicker.portrait-lightbox-kicker.portrait-lightbox-kicker.portrait-lightbox-kicker { display: none !important; }
html body .portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close {
  display: grid !important; place-items: center !important;
  width: 40px !important; height: 40px !important;
  min-height: 0 !important; padding: 0 !important;
  border: 1px solid var(--nv-glass-border) !important;
  border-radius: 0 !important;
  background: rgba(2, 14, 15, .58) !important;
  -webkit-backdrop-filter: var(--nv-glass-blur-soft) !important;
  backdrop-filter: var(--nv-glass-blur-soft) !important;
  color: #fff !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 0 !important;
  cursor: pointer !important;
}
html body .portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close::before {
  content: "\2715" !important;
  font-size: 17px !important;
  line-height: 1 !important;
  color: currentColor !important;
}
html body .portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close.portrait-lightbox-close:hover {
  border-color: #0ABAB5 !important;
  color: #0ABAB5 !important;
}

/* ============================================================
   فاز G — دور سوم بازخورد نهیرا، ۲۰۲۶-۰۹-۰۱
   ============================================================ */

@media (min-width: 1100px) {

  /* ---- Achievement: Share / Save / Copy stacked full width. Three buttons
     never fitted the column, so wrap broke them 2 + 1 with the third centred
     under the pair and all three at different widths. Stacked, they read in
     one order and every hit target is the same size. Secondary reference
     spec: square, glass ground, cyan on hover, black gradient reserved for
     the one primary action on the screen. ---- */
  html body .achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  html body .achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions > button {
    width: 100% !important;
    min-height: 46px !important;
    padding: 12px 18px !important;
    border: 1px solid var(--nv-glass-border) !important;
    border-radius: 0 !important;
    background: var(--nv-glass-bg) !important;
    color: rgba(255, 255, 255, .88) !important;
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 14px !important; font-weight: 500 !important;
    letter-spacing: .02em !important; line-height: 1 !important;
    box-shadow: none !important;
    transition: border-color .2s ease, color .2s ease, background .2s ease !important;
  }
  html body .achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions > button:hover {
    border-color: #0ABAB5 !important;
    color: #0ABAB5 !important;
    background: var(--nv-glass-hover-bg) !important;
  }

  /* ---- Achievement: the middle column stopped 60px above the details panel.
     Both columns end on one line now. ---- */
  html body .achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout.achievement-stage-layout > .achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share.achievement-success-share {
    align-self: stretch !important;
  }

  /* ---- Achievement: the services block. Reference section-card treatment
     from nannovative-cards.css - flat, opaque, hairline border, square, no
     shadow - and no controls, so it never competes with Start a New
     Experience. Every line comes from Admin content settings; an empty line
     is dropped by the template rather than rendered as a gap. ---- */
  html body .achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services {
    grid-area: services !important;
    align-self: start !important;
    display: block !important;
    margin: 0 !important;
    padding: clamp(12px, 1.1vw, 16px) !important;
    background: var(--nv-glass-bg-strong) !important;
    -webkit-backdrop-filter: var(--nv-glass-blur-soft) !important;
    backdrop-filter: var(--nv-glass-blur-soft) !important;
    border: 1px solid var(--nv-glass-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  html body .achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services .achievement-services-label.achievement-services-label.achievement-services-label.achievement-services-label {
    display: block !important;
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 11px !important;
    line-height: 16px !important;
    font-weight: 700 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: #0ABAB5 !important;
    margin: 0 0 10px !important;
  }
  html body .achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    gap: 6px !important;
  }
  html body .achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services li {
    position: relative !important;
    margin: 0 !important;
    padding-left: 14px !important;
    font-family: "Space Grotesk", sans-serif !important;
    font-size: 13px !important;
    line-height: 19px !important;
    color: rgba(255, 255, 255, .82) !important;
  }
  html body .achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services li::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important; top: .55em !important;
    width: 5px !important; height: 5px !important;
    background: #0ABAB5 !important;
  }
}

/* Tablet and phone: the services block simply follows the column it sits in. */
@media (max-width: 1099px) {
  html body .achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services {
    grid-area: auto !important;
    padding: 12px !important;
    background: var(--nv-glass-bg-strong) !important;
    border: 1px solid var(--nv-glass-border) !important;
    border-radius: 0 !important;
  }
  html body .achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  html body .achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions > button { width: 100% !important; }
}

/* ============================================================
   فاز H — دور چهارم بازخورد نهیرا، ۲۰۲۶-۰۹-۰۲
   ============================================================ */

/* The mystery black bar on the Achieved portrait: achievement-success.css:43
   paints `content: "EXPERIENCE COMPLETE"` as a ::after on the frame. It never
   showed up in a DOM search because pseudo-elements are not elements. The
   frame already carries the completion tick in its corner and the panel beside
   it says the same thing in words, so the plate is redundant as well as
   uninvited. That stylesheet is referenced by the Phase 10 gate, so the rule
   is neutralised here rather than deleted there. */
html body .achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap.achievement-portrait-wrap::after {
  content: none !important;
  display: none !important;
}

/* The services lines link out; they must still read as text, not as blue
   browser links, and must keep the cyan lift the rest of the product uses. */
html body .achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color .2s ease !important;
}
html body .achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services a:hover,
html body .achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services a:focus-visible {
  color: #0ABAB5 !important;
  text-decoration: none !important;
}

/* ---------- Landing console on the product's own language ----------
   The console sat on flat black while every other surface stands on the
   laboratory ground, and its frame carried the bracket corners that appear
   nowhere else (they have just been taken off the share card for the same
   reason). Its secondary button was solid black where every other secondary
   in the product is glass with a hairline border. landing.css is a protected
   blob, so the alignment is applied from this layer. */
html body .lab-hero-console.lab-hero-console.lab-hero-console.lab-hero-console.lab-hero-console.lab-hero-console.lab-hero-console.lab-hero-console {
  background:
    linear-gradient(90deg, rgba(3, 6, 6, .94) 0%, rgba(3, 6, 6, .74) 40%, rgba(4, 16, 16, .44) 100%),
    url("/static/images/background.jpg") center / cover no-repeat,
    #050B0C !important;
}
html body .lab-hero-visual-frame.lab-hero-visual-frame.lab-hero-visual-frame.lab-hero-visual-frame.lab-hero-visual-frame.lab-hero-visual-frame.lab-hero-visual-frame.lab-hero-visual-frame::before,
html body .lab-hero-visual-frame.lab-hero-visual-frame.lab-hero-visual-frame.lab-hero-visual-frame.lab-hero-visual-frame.lab-hero-visual-frame.lab-hero-visual-frame.lab-hero-visual-frame::after { content: none !important; display: none !important; }
/* فاز ۴ pin: the glass treatment for .lab-hero-visual-frame (1px border,
   radius 0, glass bg/shadow) never rendered — canonical's ×8 gradient-border
   panel rule on .lab-hero-visual-panel (same element) won the tie by source
   order. Removed so the load-order swap changes nothing on the landing. */
html body .video-entry-button-secondary.video-entry-button-secondary.video-entry-button-secondary.video-entry-button-secondary.video-entry-button-secondary.video-entry-button-secondary.video-entry-button-secondary.video-entry-button-secondary,
html body .lab-hero-actions.lab-hero-actions.lab-hero-actions.lab-hero-actions.lab-hero-actions.lab-hero-actions a:not(.nv-btn-primary):not([data-start-experience]),
html body .lab-hero-actions.lab-hero-actions.lab-hero-actions.lab-hero-actions.lab-hero-actions.lab-hero-actions button:not([data-start-experience]) {
  border: 1px solid var(--nv-glass-border) !important;
  border-radius: 0 !important;
  background: var(--nv-glass-bg) !important;
  color: #fff !important;
  box-shadow: none !important;
}
html body .video-entry-button-secondary.video-entry-button-secondary.video-entry-button-secondary.video-entry-button-secondary.video-entry-button-secondary.video-entry-button-secondary.video-entry-button-secondary.video-entry-button-secondary:hover,
html body .lab-hero-actions.lab-hero-actions.lab-hero-actions.lab-hero-actions.lab-hero-actions.lab-hero-actions a:not(.nv-btn-primary):not([data-start-experience]):hover {
  border-color: #0ABAB5 !important;
  color: #0ABAB5 !important;
}

/* ============================================================
   فاز H — موبایل / کیوسک
   ------------------------------------------------------------
   Mobile and the kiosk are the same surface, and nothing on it may
   scroll. Type comes down a step, the stage starts directly under the
   header, and where a screen still cannot fit, the element the visitor
   has already seen is the one that goes.
   ============================================================ */
@media (max-width: 767px) {

  /* ---- The stage begins under the header. The top pad was sized for a
     desktop hero and left a third of a phone screen empty. ---- */
  html body {
    --nv-stage-pad-top: 76px;
    --nv-stage-pad-bottom: 12px;
    --nv-stage-pad-left: 16px;
    --nv-stage-pad-right: 16px;
  }
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen {
    padding: var(--nv-stage-pad-top) var(--nv-stage-pad-right) var(--nv-stage-pad-bottom) var(--nv-stage-pad-left) !important;
    overflow: hidden !important;
  }

  /* ---- One step down on type, everywhere. ---- */
  html body .flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title { font-size: 30px !important; line-height: 32px !important; }
  html body .flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title.flow-title strong::first-line { font-size: 34px !important; }
  html body .experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow.experience-stage-eyebrow { font-size: 13px !important; letter-spacing: .16em !important; }
  html body .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle { font-size: 14px !important; line-height: 20px !important; }
  /* فاز ۴ pin: canonical (max-height:1100px) ×8 sets 18px / min-height:0 and
     won this tie by order; keep that by scoping ours to taller viewports. */
  @media (min-height: 1101px) {
    html body .primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button.primary-button { font-size: 15px !important; min-height: 48px !important; }
  }

  /* ---- The rail: numbers only is fine for space, but the active step has
     to be findable. It keeps its label; the rest stay as quiet digits. ---- */
  html body .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button { opacity: .45 !important; }
  html body li.is-active .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button,
  html body li.is-complete .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button { opacity: 1 !important; }
  html body li.is-active .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button span {
    display: inline !important;
    font-size: 12px !important;
    letter-spacing: .1em !important;
    color: #0ABAB5 !important;
  }
  html body li.is-active .experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker.experience-stepper-marker { color: #0ABAB5 !important; }

  /* ---- Profile cards: the frame is 16:9 like every other portrait in the
     product, the bullets are allowed to finish instead of spilling past the
     card, and the tick and the preview take opposite corners. ---- */
  html body #resultGrid .result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
  }
  html body #resultGrid .result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper.result-card-img-wrapper img {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
  }
  html body #resultGrid .result-card.result-card.result-card.result-card.result-card.result-card {
    overflow: hidden !important;
    height: auto !important;
    align-self: stretch !important;
  }
  html body #resultGrid .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption {
    overflow: hidden !important;
    padding: 10px 12px 12px !important;
  }
  html body #resultGrid .portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points li {
    font-size: 11px !important;
    line-height: 15px !important;
  }
  html body #resultGrid .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption strong { font-size: 14px !important; }
  html body #resultGrid .selection-mark.selection-mark.selection-mark.selection-mark.selection-mark.selection-mark {
    right: 0 !important; top: 0 !important; left: auto !important; bottom: auto !important;
    width: 30px !important; height: 30px !important; z-index: 4 !important;
  }
  html body #resultGrid .portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger.portrait-preview-trigger {
    top: auto !important; bottom: 8px !important; right: 8px !important; left: auto !important;
    width: 30px !important; height: 30px !important; z-index: 4 !important;
  }

  /* ---- Advice: the portrait takes the same width as the reflection panel
     under it, keeps 16:9, and is neither cropped nor stretched. ---- */
  html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }
  html body .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel > img {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
  }

  /* ---- Delivery has one job on a phone: take the email. The summary panel
     repeats the portrait, the reflection and the three steps the visitor read
     on the previous screen, and it is what pushed the form below the fold. ---- */
  html body [data-screen="delivery"] .delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary.delivery-summary { display: none !important; }
  html body [data-screen="delivery"] .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel {
    width: 100% !important; max-width: 100% !important;
    height: auto !important; max-height: 100% !important;
    overflow: hidden !important;
  }
  html body [data-screen="delivery"] .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel :is(input, textarea) {
    min-height: 42px !important; font-size: 15px !important;
  }
  html body [data-screen="delivery"] .field-group.field-group.field-group.field-group.field-group.field-group { margin-bottom: 8px !important; }

  /* ---- Achieved: the stage fits, so the bottom of the panel is no longer
     cut off. The two blocks the visitor has already read on Advice make room
     for the ones that are new here. ---- */
  html body .achievement-success[data-screen="achievement"] .achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps.achievement-success-steps,
  html body .achievement-success[data-screen="achievement"] .achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer.achievement-disclaimer {
    display: none !important;
  }
  html body .achievement-success[data-screen="achievement"] .achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details.achievement-success-details {
    overflow: hidden !important;
    height: auto !important;
  }
  html body .achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services li { font-size: 12px !important; line-height: 17px !important; }
  html body .achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions > button { min-height: 42px !important; font-size: 13px !important; }
}

/* ============================================================
   فاز I — اصلاح دو ایراد اندازه‌گیری‌شده در مرورگر کاربر
   ============================================================ */

/* Explore was the one stage that still overflowed on a short desktop: 279px
   past the viewport at 1512x767, with its header 20px below the panel beside
   it. The other four titles come down to 36px under canonical's
   `@media (max-height: 1100px)` rule, but #generatingTitle sets an absolute
   hero clamp with two ID selectors, so it outranks that rule and stayed at
   120px - three lines of Bayon, 405px of header, in a row that had 334.
   It now follows its four siblings at short heights. */
@media (max-height: 1100px) {
  html body #generatingTitle#generatingTitle#generatingTitle {
    font-size: 36px !important;
    line-height: 1.05 !important;
  }
  html body #generatingTitle#generatingTitle#generatingTitle strong::first-line {
    font-size: 1.28em !important;
  }
}

/* Delivery on a phone: the form ran 165px past the bottom of the stage, so the
   second consent line and the submit button were simply not on screen. The
   lede is the element that goes - it describes a summary panel that is hidden
   at this width anyway - and the form's own rhythm tightens. Authorised by
   Nahira: "اگر جا نشد می‌توانی از المان‌های غیراساسی صفحه کم کنی". */
@media (max-width: 767px) {
  html body [data-screen="delivery"] .flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle.flow-subtitle { display: none !important; }
  html body [data-screen="delivery"] .field-group.field-group.field-group.field-group.field-group.field-group {
    margin-bottom: 6px !important;
  }
  html body [data-screen="delivery"] .field-group.field-group.field-group.field-group.field-group.field-group label,
  html body [data-screen="delivery"] .field-group.field-group.field-group.field-group.field-group.field-group > span {
    font-size: 10px !important;
    line-height: 14px !important;
    margin-bottom: 3px !important;
  }
  html body [data-screen="delivery"] .terms-row.terms-row.terms-row.terms-row.terms-row.terms-row {
    gap: 8px !important;
    margin-bottom: 6px !important;
  }
  html body [data-screen="delivery"] .terms-copy.terms-copy.terms-copy.terms-copy.terms-copy.terms-copy {
    font-size: 12px !important;
    line-height: 16px !important;
  }
  html body [data-screen="delivery"] .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel {
    padding: 12px !important;
  }
}

/* ============================================================
   فاز D — FEEDBACK DIALOG
   ============================================================
   The dialog's chrome lived in stage-rails-v1.css, which this layer
   replaced and index.html no longer links. result-actions.css is still
   linked and keeps the stars, the textarea and the status line, so only
   the shell was missing - and a <dialog> with no box styling renders as
   the UA default: an unstyled black rectangle pinned to the top-left,
   over the logo, with no backdrop. The shell is restated here on the
   glass system so the dialog reads as part of the Achieved stage.

   Chains are x10 because nannovative-canonical.css claims
   .feedback-dialog-shell and .feedback-dialog-header h2 at x8. */

html body dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog {
  position: fixed !important;
  inset: 0 !important;
  width: min(92vw, 470px) !important;
  max-width: 92vw !important;
  height: max-content !important;
  max-height: 86dvh !important;
  margin: auto !important;
  padding: 0 !important;
  border: 1px solid var(--nv-glass-border, rgba(255, 255, 255, .18)) !important;
  border-top: 3px solid #0ABAB5 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(9, 20, 22, .94), rgba(4, 9, 10, .97)) !important;
  -webkit-backdrop-filter: var(--nv-glass-blur, blur(16px) saturate(1.15)) !important;
  backdrop-filter: var(--nv-glass-blur, blur(16px) saturate(1.15)) !important;
  box-shadow: var(--nv-glass-shadow, 0 18px 48px rgba(0, 0, 0, .38)) !important;
  color: #fff !important;
  overflow: auto !important;
  outline: none !important;
}

html body dialog.feedback-dialog::backdrop {
  background: rgba(0, 4, 6, .78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

html body .feedback-dialog-shell.feedback-dialog-shell.feedback-dialog-shell.feedback-dialog-shell.feedback-dialog-shell.feedback-dialog-shell.feedback-dialog-shell.feedback-dialog-shell.feedback-dialog-shell.feedback-dialog-shell {
  display: grid !important;
  gap: 14px !important;
  padding: 26px 26px 24px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Title left, dismiss right. Without this the two stacked and "Close"
   landed between the title and the line that explains the dialog. */
html body .feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 !important;
}

html body .feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header h2 {
  margin: 0 !important;
  font-family: "Bayon", "Arial Narrow", sans-serif !important;
  font-weight: 400 !important;
  font-size: 30px !important;
  line-height: 32px !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  color: #fff !important;
}

/* There are two ways out of this dialog - the header control and "Not
   now" in the action row. Making the header one compact and quiet reads
   it as dialog chrome instead of a third thing to choose between. */
html body .feedback-dialog-close.feedback-dialog-close.feedback-dialog-close.feedback-dialog-close.feedback-dialog-close.feedback-dialog-close.feedback-dialog-close.feedback-dialog-close.feedback-dialog-close.feedback-dialog-close {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, .62) !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: color .2s ease, border-color .2s ease !important;
}

html body .feedback-dialog-close.feedback-dialog-close.feedback-dialog-close.feedback-dialog-close.feedback-dialog-close.feedback-dialog-close.feedback-dialog-close.feedback-dialog-close.feedback-dialog-close.feedback-dialog-close:hover {
  color: #0ABAB5 !important;
  border-color: #0ABAB5 !important;
}

html body .achievement-feedback-subtitle.achievement-feedback-subtitle.achievement-feedback-subtitle.achievement-feedback-subtitle.achievement-feedback-subtitle.achievement-feedback-subtitle.achievement-feedback-subtitle.achievement-feedback-subtitle.achievement-feedback-subtitle.achievement-feedback-subtitle {
  margin: 0 !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 14px !important;
  line-height: 21px !important;
  color: rgba(255, 255, 255, .68) !important;
}

html body .achievement-feedback-form.achievement-feedback-form.achievement-feedback-form.achievement-feedback-form.achievement-feedback-form.achievement-feedback-form.achievement-feedback-form.achievement-feedback-form.achievement-feedback-form.achievement-feedback-form {
  display: grid !important;
  gap: 14px !important;
  margin: 0 !important;
}

html body .feedback-comment-field.feedback-comment-field.feedback-comment-field.feedback-comment-field.feedback-comment-field.feedback-comment-field.feedback-comment-field.feedback-comment-field.feedback-comment-field.feedback-comment-field textarea {
  border: 1px solid var(--nv-glass-border-soft, rgba(255, 255, 255, .16)) !important;
  background: var(--nv-glass-bg, rgba(255, 255, 255, .07)) !important;
  color: #fff !important;
  resize: none !important;
}

html body .feedback-comment-field.feedback-comment-field.feedback-comment-field.feedback-comment-field.feedback-comment-field.feedback-comment-field.feedback-comment-field.feedback-comment-field.feedback-comment-field.feedback-comment-field textarea:focus-visible {
  border-color: #0ABAB5 !important;
  outline: none !important;
  box-shadow: 0 0 0 1px #0ABAB5 !important;
}

html body .feedback-form-actions.feedback-form-actions.feedback-form-actions.feedback-form-actions.feedback-form-actions.feedback-form-actions.feedback-form-actions.feedback-form-actions.feedback-form-actions.feedback-form-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin: 4px 0 0 !important;
}

/* The stage button shapes are scoped under .flow-screen and the dialog is
   a sibling of the stages, so both actions came out as bare UA buttons. */
html body .feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog .feedback-form-actions > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 12px 22px !important;
  border-radius: 0 !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease !important;
}

html body .feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog #feedbackSubmit {
  border: 2px solid #0ABAB5 !important;
  background: linear-gradient(135deg, #0ABAB5, #089F9A) !important;
  color: #000 !important;
  box-shadow: 0 4px 15px rgba(10, 186, 181, .3) !important;
}

html body .feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog #feedbackSkip {
  border: 1px solid var(--nv-glass-border, rgba(255, 255, 255, .18)) !important;
  background: var(--nv-glass-bg, rgba(255, 255, 255, .07)) !important;
  color: rgba(255, 255, 255, .82) !important;
  box-shadow: none !important;
}

html body .feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog #feedbackSkip:hover {
  border-color: #0ABAB5 !important;
  color: #0ABAB5 !important;
}

@media (max-width: 767px) {
  html body dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog {
    width: min(94vw, 420px) !important;
  }
  html body .feedback-dialog-shell.feedback-dialog-shell.feedback-dialog-shell.feedback-dialog-shell.feedback-dialog-shell.feedback-dialog-shell.feedback-dialog-shell.feedback-dialog-shell.feedback-dialog-shell.feedback-dialog-shell {
    padding: 20px 18px 18px !important;
    gap: 12px !important;
  }
  html body .feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header.feedback-dialog-header h2 {
    font-size: 24px !important;
    line-height: 26px !important;
  }
  html body .feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog.feedback-dialog .feedback-form-actions > button {
    flex: 1 1 0 !important;
    padding: 12px 14px !important;
  }
}

/* ============================================================
   فاز ۰ — بازکردن مسیر موبایل (ایرادهای ۲۹ و ۳۰)
   ============================================================
   اندازه‌گیری زنده در کروم کاربر، 500×723:

   ۱) نوار بالای موبایل 56px است، نه 78 — ولی هر صحنه از 78 شروع می‌شد و
      سه صحنه‌ی Advice/Delivery/Achievement بالای آن هم
      `padding-top: clamp(84px, 12dvh, 112px)` داشتند. نتیجه ۱۰۹px فضای
      خالی بین نوار و eyebrow روی هر صفحه‌ی موبایل بود. حالا صحنه از زیر
      نوار واقعی شروع می‌شود و 14px پد می‌گیرد.

   ۲) Delivery: دکمه‌ی ارسال sticky بود و داخل پنلی با overflow:hidden روی
      لیبل رضایت می‌نشست (دکمه 654–706، لیبل 670–800). elementFromPoint
      روی لیبل خودِ دکمه را برمی‌گرداند؛ کاربر واقعی نمی‌توانست فرم را
      ثبت کند. دکمه static می‌شود و بعد از چک‌باکس‌ها می‌آید؛ پنل به‌جای
      hidden، auto می‌گیرد (تور ایمنی — با پد جدید محتوا جا می‌شود و
      اسکرول لازم نیست: پنل 163–677 در ویوپورت 723).

   ۳) Achievement: Mission Complete در y=1002 بود و بعد از آن share و
      Start a New Experience تا 1378 می‌رفتند. روی موبایل بلوک‌هایی که
      قبلاً در Advice خوانده شده‌اند (دو باکس جهت، توضیح) و بلوک سرویس‌ها
      (که برای فضای خالی دسکتاپ اضافه شده بود) کنار می‌روند؛ بعد از
      Mission Complete کارت دستاورد جایش را به دکمه‌های share می‌دهد.
      قبل: missionDone 591–643 ؛ بعد: restart 634–686 — هر دو داخل کادر.

   زنجیره‌ها ×12 تا ×15 چون قوانین موبایل بالاتر تا ×10 و
   #successToast×3 هستند. */
@media (max-width: 767px) {
  html body { --nv-shell-header-h: 56px; --nv-stage-pad-top: 14px; }
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen,
  html body #successToast#successToast#successToast#successToast {
    inset: 56px 0 0 0 !important;
    top: 56px !important;
    padding-top: var(--nv-stage-pad-top) !important;
  }

  /* Delivery */
  html body [data-screen="delivery"] #submitBtn#submitBtn#submitBtn#submitBtn {
    position: static !important;
    margin: 6px 0 0 !important;
    min-height: 46px !important;
  }
  html body [data-screen="delivery"] .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel {
    overflow-y: auto !important;
    padding: 12px !important;
  }
  html body [data-screen="delivery"] .send-details-kicker.send-details-kicker.send-details-kicker.send-details-kicker.send-details-kicker.send-details-kicker.send-details-kicker.send-details-kicker { display: none !important; }
  html body [data-screen="delivery"] .send-details-header.send-details-header.send-details-header.send-details-header.send-details-header.send-details-header.send-details-header.send-details-header h2 {
    font-size: 18px !important;
    line-height: 22px !important;
    margin: 0 0 6px !important;
  }
  html body [data-screen="delivery"] #deliveryStatus#deliveryStatus#deliveryStatus#deliveryStatus#deliveryStatus {
    font-size: 12px !important;
    line-height: 16px !important;
  }
  html body [data-screen="delivery"] .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel :is(input, textarea) {
    min-height: 42px !important;
    padding: 8px 12px !important;
  }

  /* Achievement */
  html body .achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success .flow-subtitle { display: none !important; }
  html body .achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services.achievement-services,
  html body .achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals.achievement-success-signals,
  html body #achievementDescription#achievementDescription#achievementDescription#achievementDescription,
  html body #achievementShareTitle#achievementShareTitle#achievementShareTitle#achievementShareTitle,
  html body #achievementShareText#achievementShareText#achievementShareText#achievementShareText { display: none !important; }
  html body .achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success.achievement-success:has(#achievementShareSection:not([hidden])) #achievementDetails#achievementDetails { display: none !important; }
  html body .achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions.achievement-share-actions > button {
    min-height: 40px !important;
    font-size: 13px !important;
  }
}

/* ============================================================
   فاز ۲ — قید ارتفاع واحد (authoritative stage bounding)
   ============================================================
   صحنه‌ها abspos داخل modal-shell (که grid است) هستند و روی top:78 + bottom:0
   با height:auto قرار بود کشیده شوند تا دقیقاً ویوپورت منهای نوار را پر کنند.
   ولی چون فرزندِ abspos یک گرید‌اند، رفتار «کشش top/bottom» بین صحنه‌ها ناسازگار
   بود: generating به height:100dvh می‌چسبید (۷۸ از پایین می‌زد بیرون) و
   achievement به ارتفاع محتوا رشد می‌کرد (تا +۶۲۹). این یک قانونِ صریح، همه را
   یکسان به «۱۰۰dvh منهای ارتفاع نوار» می‌بندد — بدون تکیه بر کشش bottom. روی
   موبایل هم --nv-shell-header-h روی 56 است، پس خودکار جمع می‌شود. زنجیره ×16
   از قانون ×14 achievement بالاتر است و چون آخرِ فایل است، از canonical هم می‌برد. */
html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen,
html body #successToast#successToast#successToast#successToast {
  position: absolute !important;
  top: var(--nv-shell-header-h, 78px) !important;
  right: 0 !important;
  left: 0 !important;
  bottom: auto !important;
  height: calc(100dvh - var(--nv-shell-header-h, 78px)) !important;
  max-height: calc(100dvh - var(--nv-shell-header-h, 78px)) !important;
  min-height: 0 !important;
  transform: none !important;
  grid-area: auto !important;
  overflow: hidden !important;
}

/* ============================================================
   فاز ۲ — دسترس‌پذیری محتوا: به‌جای برشِ خاموش، اسکرول داخلیِ کران‌دار
   ============================================================
   حالا که صحنه به ویوپورت بسته شده، محتوایی که جا نمی‌شود به‌جای سرریز،
   با overflow:hidden بریده می‌شد (پنهانِ خاموش). این دو ستونِ محتوا در
   دسکتاپ/تبلت اسکرول داخلی می‌گیرند تا هیچ چیز دور از دسترس نماند؛ روی
   موبایل (≤767) طبق قانون «بدون اسکرول» فاز ۳ آن‌ها را جمع/حذف می‌کند.
   min-height:0 لازم است تا ستون بتواند کوتاه‌تر از محتوایش شود و اسکرول کند. */
@media (min-width: 768px) {
  html body .advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap.advice-recap,
  html body #adviceRecap#adviceRecap#adviceRecap#adviceRecap {
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
  html body #achievementDetails#achievementDetails#achievementDetails#achievementDetails {
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
  /* Delivery: the whole form panel becomes the bounded scroll region so the
     submit button flows after the checkboxes instead of a sticky button
     overlapping the consent rows on a short viewport. */
  html body [data-screen="delivery"] .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel {
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
  html body [data-screen="delivery"] #submitBtn#submitBtn#submitBtn#submitBtn {
    position: static !important;
    margin-top: 8px !important;
  }
}

/* ============================================================
   فاز ۳ — Profile موبایل: کپشن داخل کارتِ افقی جا شود
   ============================================================
   کارت‌ها روی موبایل افقی‌اند (عکس ۱۶:۹ چپ، متن راست) و هر سه جا می‌شوند؛
   ولی عنوان + سه بولتِ کامل از ارتفاع ۱۸۴px کارت بلندتر بود و ۴۱px بریده
   می‌شد. هر بولت به یک خط محدود می‌شود (جزئیاتِ کامل در Advice می‌آید)، پس
   کپشن داخل کارت جا می‌شود بی‌آنکه چیزی بریده یا روی هم بیفتد. */
@media (max-width: 767px) {
  html body #resultGrid .portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points.portrait-direction-points li {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
    overflow: hidden !important;
  }
  html body #resultGrid .result-caption.result-caption.result-caption.result-caption.result-caption.result-caption strong {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }
}

/* ============================================================
   فاز ۳c — live-test fixes (production 1d06669, 2026-09-03)
   ============================================================
   Findings from the live run in Chrome at 1512×683 (short desktop) and
   500×673 (phone-height):
     A. Explore: `.explore-centered-layout` sat in the 1fr "quiz" row with
        `align-self:start` + `max-height:none` (nannovative-canonical ×8
        chain), so the quiz panel grew past the row and under the bottom
        bar. Fix: stretch it to the row, bound the panel, and at short
        heights compact the panel so 3 options fit without scrolling.
     B. Profile: `.results-screen .flow-title { justify-self:center }`
        (responsive.css) left the title floating 50px right of the eyebrow.
     C. Delivery / Achievement at short desktop heights: the primary CTA
        (submit / Mission Complete) was only reachable by scrolling the
        panel. Compact the panels at max-height:820px so the CTA is on
        screen; the panel scroll from phase 2 stays as the safety net.
     D. Phone-height (≤760px): delivery form overflowed by 57px and the
        third portrait card by 12px — drop the optional Organization
        field and the redundant "Choose exactly one portrait" hint.
   Chains: .generating-layout×9 beats canonical ×8; #id×N beats any
   class chain. Phase 4 will collapse these once the load order flips. */

/* --- A. Explore: bound the quiz column to its grid row (≥768px) --- */
@media (min-width: 768px) {
  html body [data-screen="generating"] .generating-layout.generating-layout.generating-layout.generating-layout.generating-layout.generating-layout.generating-layout.generating-layout.generating-layout {
    align-self: stretch !important;
    min-height: 0 !important;
    max-height: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    align-content: start !important;
    place-content: start stretch !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 10px !important;
  }
  html body [data-screen="generating"] #quizPanel#quizPanel#quizPanel#quizPanel {
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    align-self: start !important;
  }
}

/* --- A'. Explore compact at short desktop heights --- */
@media (min-width: 768px) and (max-height: 820px) {
  html body [data-screen="generating"].flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen {
    padding-top: 100px !important;
  }
  html body [data-screen="generating"] #quizPanel#quizPanel#quizPanel#quizPanel {
    padding: 14px 20px !important;
    gap: 8px !important;
    row-gap: 8px !important;
  }
  html body [data-screen="generating"] #quizPanel#quizPanel#quizPanel#quizPanel [class*="kicker"] {
    display: none !important;
  }
  html body [data-screen="generating"] #quizPanel#quizPanel#quizPanel#quizPanel .quiz-panel-header h2 {
    font-size: 21px !important;
    line-height: 1.2 !important;
    margin: 0 0 4px !important;
  }
  html body [data-screen="generating"] #quizPanel#quizPanel#quizPanel#quizPanel .quiz-panel-header {
    padding-bottom: 6px !important;
    margin-bottom: 0 !important;
  }
  html body [data-screen="generating"] #quizOptions#quizOptions#quizOptions#quizOptions {
    gap: 8px !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
  }
  html body [data-screen="generating"] #quizOptions#quizOptions#quizOptions#quizOptions .quiz-option {
    min-height: 44px !important;
    height: auto !important;
    padding: 7px 14px !important;
  }
  html body [data-screen="generating"] .generating-layout.generating-layout.generating-layout.generating-layout.generating-layout.generating-layout.generating-layout.generating-layout.generating-layout .generation-ready-message {
    padding: 9px 14px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }
}

/* --- B. Profile title alignment --- */
html body #resultsTitle#resultsTitle,
html body [data-screen="portrait-discovery"] .experience-stage-header .flow-subtitle.flow-subtitle.flow-subtitle {
  justify-self: start !important;
  width: auto !important;
}

/* --- C. Short desktop heights: the stage top padding and the CTA panels --- */
@media (min-width: 1100px) and (max-height: 820px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen,
  html body #successToast#successToast#successToast#successToast {
    padding-top: 100px !important;
  }
}
@media (min-width: 768px) and (max-height: 820px) {
  /* Delivery */
  html body [data-screen="delivery"] .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel {
    padding: 12px 16px 0 !important;
    gap: 6px !important;
  }
  html body [data-screen="delivery"] .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel .send-details-kicker {
    display: none !important;
  }
  html body [data-screen="delivery"] .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel .send-details-header {
    gap: 0 !important;
  }
  html body [data-screen="delivery"] .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel .send-details-header h2 {
    font-size: 19px !important;
    line-height: 1.2 !important;
  }
  html body [data-screen="delivery"] #resultForm#resultForm#resultForm {
    gap: 6px !important;
  }
  html body [data-screen="delivery"] #resultForm#resultForm#resultForm .field-group {
    gap: 3px !important;
  }
  html body [data-screen="delivery"] #resultForm#resultForm#resultForm .field-group label {
    font-size: 10px !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
  }
  html body [data-screen="delivery"] #resultForm#resultForm#resultForm .field-group input {
    min-height: 40px !important;
    height: 40px !important;
    padding: 6px 12px !important;
    font-size: 15px !important;
  }
  html body [data-screen="delivery"] #resultForm#resultForm#resultForm label:has(input[type="checkbox"]) {
    padding: 5px 0 !important;
    gap: 8px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  html body [data-screen="delivery"] #resultForm#resultForm#resultForm label:has(input[type="checkbox"]) .terms-copy,
  html body [data-screen="delivery"] #resultForm#resultForm#resultForm label:has(input[type="checkbox"]) span {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  html body [data-screen="delivery"] #deliveryStatus#deliveryStatus#deliveryStatus#deliveryStatus#deliveryStatus {
    font-size: 12px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }
  html body [data-screen="delivery"] #submitBtn#submitBtn#submitBtn#submitBtn {
    min-height: 46px !important;
    height: 46px !important;
    padding: 8px 20px !important;
    font-size: 17px !important;
    margin: 4px 0 12px !important;
  }

  /* Achievement */
  html body #successToast#successToast#successToast#successToast #achievementDescription#achievementDescription {
    display: none !important;
  }
  html body #successToast#successToast#successToast#successToast #achievementTitle#achievementTitle {
    font-size: 24px !important;
    max-width: none !important;
    width: auto !important;
    line-height: 1.1 !important;
    margin: 4px 0 8px !important;
  }
  html body #successToast#successToast#successToast#successToast .achievement-badge-label {
    margin: 0 !important;
  }
  html body #successToast#successToast#successToast#successToast .achievement-success-signals article {
    padding: 10px 12px !important;
  }
  html body #successToast#successToast#successToast#successToast .achievement-success-steps {
    padding: 10px 12px !important;
  }
  html body #successToast#successToast#successToast#successToast #achievementSteps li {
    font-size: 13px !important;
    line-height: 1.35 !important;
    margin: 0 0 4px !important;
  }
  html body #successToast#successToast#successToast#successToast .achievement-delivery-state {
    padding: 8px 0 !important;
    margin: 0 !important;
  }
  html body #successToast#successToast#successToast#successToast #achievementEmailStatus {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  html body #successToast#successToast#successToast#successToast #missionDone#missionDone {
    min-height: 44px !important;
    height: 44px !important;
    padding: 6px 18px !important;
    font-size: 16px !important;
    margin: 6px 0 0 !important;
  }
  html body #successToast#successToast#successToast#successToast .achievement-disclaimer {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin: 6px 0 0 !important;
  }
  html body #successToast#successToast#successToast#successToast #achievementDetails#achievementDetails {
    gap: 8px !important;
  }
  html body #successToast#successToast#successToast#successToast #achievementShareText#achievementShareText,
  html body #successToast#successToast#successToast#successToast #achievementShareTitle#achievementShareTitle {
    display: none !important;
  }
  html body #successToast#successToast#successToast#successToast #achievementShareSection#achievementShareSection {
    padding: 10px 12px !important;
    gap: 6px !important;
  }
  html body #successToast#successToast#successToast#successToast #achievementShareSection#achievementShareSection .achievement-share-actions {
    gap: 6px !important;
    margin: 0 !important;
  }
  html body #successToast#successToast#successToast#successToast #achievementShareSection#achievementShareSection .achievement-share-actions > button {
    min-height: 40px !important;
    height: 40px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
  }
  html body #successToast#successToast#successToast#successToast:has(#achievementShareSection:not([hidden])) .achievement-services.achievement-services {
    display: none !important;
  }
}

/* --- D. Phone-height: no scroll, drop the non-essential pieces --- */
@media (max-width: 767px) and (max-height: 760px) {
  html body [data-screen="delivery"] #resultForm#resultForm#resultForm .field-group:has(#company) {
    display: none !important;
  }
  html body [data-screen="delivery"] #resultForm#resultForm#resultForm {
    gap: 6px !important;
  }
  html body [data-screen="delivery"] #resultForm#resultForm#resultForm label:has(input[type="checkbox"]) {
    padding: 6px 0 !important;
  }
  html body [data-screen="portrait-discovery"] .portrait-discovery-status.portrait-discovery-status.portrait-discovery-status.portrait-discovery-status.portrait-discovery-status.portrait-discovery-status.portrait-discovery-status.portrait-discovery-status.portrait-discovery-status.portrait-discovery-status {
    display: none !important;
  }
}

/* --- E. Phone Explore: quiz fits without scroll (3–5 options at 390×673) ---
   Live run could only reach the quiz-complete state on the phone width; the
   fixture at 390×673/844 overflowed by ~110px with real option heights (72px)
   and the stage subtitle. Drop the subtitle and the panel header, tighten
   the options to 42px, and stop forcing 72px grid rows. */
@media (max-width: 767px) {
  html body [data-screen="generating"] #generatingTitle ~ .flow-subtitle { display: none !important; }
  html body [data-screen="generating"] .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header { gap: 4px !important; margin-bottom: 8px !important; }
  html body [data-screen="generating"] #generatingTitle#generatingTitle#generatingTitle { font-size: 26px !important; line-height: 1.05 !important; }
  html body [data-screen="generating"] .generating-layout.generating-layout.generating-layout.generating-layout.generating-layout.generating-layout.generating-layout.generating-layout.generating-layout { margin: 0 !important; padding: 0 !important; gap: 8px !important; min-height: 0 !important; }
  html body [data-screen="generating"] #quizPanel#quizPanel#quizPanel#quizPanel { padding: 12px 14px !important; gap: 6px !important; row-gap: 6px !important; }
  html body [data-screen="generating"] #quizPanel#quizPanel#quizPanel#quizPanel .quiz-panel-header { display: none !important; }
  html body [data-screen="generating"] #quizQuestion#quizQuestion#quizQuestion { font-size: 15px !important; line-height: 1.25 !important; }
  html body [data-screen="generating"] #quizOptions#quizOptions#quizOptions#quizOptions { gap: 6px !important; grid-template-rows: none !important; grid-auto-rows: auto !important; }
  html body [data-screen="generating"] #quizOptions#quizOptions#quizOptions#quizOptions .quiz-option { min-height: 42px !important; height: auto !important; padding: 5px 10px !important; gap: 8px !important; }
  html body [data-screen="generating"] #quizOptions#quizOptions#quizOptions#quizOptions .quiz-option .quiz-option-text { font-size: 14px !important; line-height: 1.25 !important; }
  html body [data-screen="generating"] #quizOptions#quizOptions#quizOptions#quizOptions .quiz-option .quiz-option-index { font-size: 12px !important; line-height: 1.2 !important; padding: 2px 4px !important; }
  html body [data-screen="generating"] .generating-layout.generating-layout.generating-layout.generating-layout.generating-layout.generating-layout.generating-layout.generating-layout.generating-layout .generation-ready-message { padding: 8px 12px !important; font-size: 12px !important; line-height: 1.3 !important; margin: 0 !important; }
  html body [data-screen="generating"] #exploreLoadingBar#exploreLoadingBar#exploreLoadingBar { padding: 8px 12px !important; gap: 4px 12px !important; }
}


/* --- F. Phone Advice: the reflection is the content, so it scrolls inside
   its own bounded panel (user decision, 2026-09-04). Portrait, subtitle,
   recap and disclaimer are dropped on the phone; the page itself and the
   "Choose where to send it" button never move. */
@media (max-width: 767px) {
  html body [data-screen="personalized-advice"] .advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel.advice-portrait-panel { display: none !important; }
  html body [data-screen="personalized-advice"] #adviceStageTitle ~ .flow-subtitle { display: none !important; }
  html body [data-screen="personalized-advice"] #adviceRecap#adviceRecap#adviceRecap#adviceRecap { display: none !important; }
  html body [data-screen="personalized-advice"] #adviceContent#adviceContent .advice-disclaimer { display: none !important; }
  html body [data-screen="personalized-advice"] .advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout.advice-stage-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
    grid-template-areas: "main" !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    gap: 0 !important;
  }
  html body [data-screen="personalized-advice"] .advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main.advice-stage-main {
    grid-area: main !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* --- G. Capture at short desktop heights: the header's computed margin-top
   (aligns it with the camera frame, ~78px at 1512) pushed the lede under the
   privacy note. Confirmed live on ce9a03b at 1512×683. */
@media (min-width: 768px) and (max-height: 820px) {
  html body [data-screen="capture"] .experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header.experience-stage-header { margin-top: 16px !important; }
  html body [data-screen="capture"] #captureSubtitle#captureSubtitle#captureSubtitle {
    margin-top: 8px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
  html body [data-screen="capture"] .capture-secondary-actions .secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note.secure-processing-note {
    font-size: 13px !important;
    line-height: 1.35 !important;
    padding: 8px 12px !important;
  }
}

/* --- H. Phone Profile: the card rows stretch to fill the grid, and the
   image wrapper stretched with them (192×119 = 1.62:1). Portraits are 16:9
   on every screen — pin the wrapper and centre it in the row. */
@media (max-width: 767px) {
  html body #resultGrid#resultGrid#resultGrid {
    align-content: start !important;
    grid-auto-rows: auto !important;
    grid-template-rows: none !important;
  }
  html body #resultGrid#resultGrid#resultGrid .result-card-img-wrapper {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: center !important;
  }
  html body #resultGrid#resultGrid#resultGrid .result-card-img-wrapper img {
    aspect-ratio: 16 / 9 !important;
    height: 100% !important;
    width: 100% !important;
  }
}

/* --- I. Phone Achievement: 13px (details padding + Mission Complete margin)
   and, after Mission Complete, 29px (share status + padding) of scrollable
   overflow inside .achievement-stage-layout. Phone = no scroll at all. */
@media (max-width: 767px) {
  html body #successToast#successToast#successToast#successToast #achievementDetails#achievementDetails { padding-bottom: 0 !important; }
  html body #successToast#successToast#successToast#successToast #missionDone#missionDone { margin-bottom: 0 !important; }
  html body #successToast#successToast#successToast#successToast #achievementShareSection#achievementShareSection { padding-bottom: 6px !important; gap: 6px !important; }
  html body #successToast#successToast#successToast#successToast #achievementShareSection#achievementShareSection .achievement-share-actions { gap: 6px !important; margin: 0 !important; }
  html body #successToast#successToast#successToast#successToast #achievementShareSection#achievementShareSection .achievement-share-actions > button {
    min-height: 36px !important;
    height: 36px !important;
    padding: 4px 10px !important;
  }
  html body #successToast#successToast#successToast#successToast #achievementShareStatus#achievementShareStatus { margin: 0 !important; line-height: 1.3 !important; font-size: 12px !important; }
  html body #successToast#successToast#successToast#successToast #achievementShareStatus#achievementShareStatus:empty { display: none !important; }
}

/* --- J. Desktop: the step rail gets a real gutter, and the stage grids stop
   overflowing under it between 1100 and 1400px.
   Found on a live 1800px screenshot: the "06 Achieved" marker sat on the
   details panel's border. Measured with the fixture: the stage's right padding
   (clamp(150px,11vw,210px)) and the fixed rail (right:41px, ~128px wide) were
   tuned to coincide, so the rail's left edge sat 3-6px INSIDE the content box
   at every width; and the stage grids carried px minimums on the second column
   (minmax(680px,…)) that exceed the content box below ~1350px, pushing the
   panels 23-216px under the rail at 1100-1300px (MacBook Air territory). */
@media (min-width: 1100px) {
  html body {
    /* rail: 41px right offset + ~128px labels (up to ~14px font) + 20px gutter */
    --nv-stage-pad-right: max(clamp(150px, 11vw, 210px), 205px);
  }
  /* Explore, Profile and Capture carried the same clamp() inline instead of
     the variable — route them through it so the reserve applies everywhere. */
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="generating"],
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="portrait-discovery"],
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="capture"] {
    padding-right: var(--nv-stage-pad-right) !important;
  }
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.achievement-success[data-screen="achievement"],
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="delivery"] {
    grid-template-columns: minmax(300px, 0.86fr) minmax(0, 1.55fr) !important;
  }
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen[data-screen="personalized-advice"] {
    grid-template-columns: minmax(300px, 0.92fr) minmax(0, 1.5fr) !important;
  }
  html body [data-screen="portrait-discovery"] .result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage.result-review-stage {
    grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.7fr) !important;
  }
}

/* --- K. Short desktop heights: 100px of stage padding put the eyebrow 1px
   under the logo tagline (logo ends at 177px, content started at 178px).
   120px keeps a 21px breath; every compact stage still fits at 1512x683
   (Explore had ~120px spare, Delivery submit ends 625, Mission Complete 661). */
@media (min-width: 1100px) and (max-height: 820px) {
  html body .flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen,
  html body #successToast#successToast#successToast#successToast {
    padding-top: 120px !important;
  }
  html body [data-screen="generating"].flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen.flow-screen {
    padding-top: 120px !important;
  }
}

/* --- L. Desktop/tablet: the Achievement details and Delivery form panels
   hug their content instead of stretching to the full stage height (the
   stretched box showed ~120px of empty framed space at 1800x1008). The
   phase-2 max-height:100% + overflow:auto bound still applies when content
   is taller than the row. */
@media (min-width: 768px) {
  html body #successToast#successToast#successToast#successToast #achievementDetails#achievementDetails,
  html body [data-screen="delivery"] .send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel.send-details-panel {
    align-self: start !important;
    height: auto !important;
  }
}

/* --- M. Rail: a stage the flow passed over (Advice when there is no quiz
   report) reads as skipped — dimmed, struck label, no hover — instead of
   pretending to be a place the visitor has been. experience-flow.js sets
   .is-skipped and keeps the button disabled. */
html body .experience-stepper li.is-skipped .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button,
html body .experience-stepper li.is-skipped .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button:hover {
  opacity: .38 !important;
  cursor: default !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body .experience-stepper li.is-skipped .experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button.experience-stepper-button span:last-child {
  text-decoration: line-through !important;
  text-decoration-thickness: 1px !important;
}

/* ============================================================
   GUARD — [hidden] must outrank every display rule in this layer
   ============================================================
   stage-rails-v1.css used to carry `.achievement-stub[hidden],
   .achievement-success-share[hidden] { display: none }`. When that
   stylesheet was unlinked for the Phase 7 layer the guard went with it,
   and the `display: block/flex !important` rules below started beating
   the UA's plain `[hidden] { display: none }`. The result was that
   #achievementShareSection and .achievement-actions could never be
   hidden, so the whole Mission Complete -> share -> restart reveal was
   dead: every control was on screen from the first paint.

   One blanket guard instead of one per element, so the next forced
   `display` added to this file cannot resurrect the same bug. The
   20-deep attribute chain clears the ×14 class chains used further up.
   Nothing in the product shows a [hidden] element through CSS - every
   reveal removes the attribute - so this is safe to apply globally. */
html body [hidden][hidden][hidden][hidden][hidden][hidden][hidden][hidden][hidden][hidden][hidden][hidden][hidden][hidden][hidden][hidden][hidden][hidden][hidden][hidden] { display: none !important; }

/* Load sentinel: js/css-guard.js reloads this file when this last rule is missing (a truncated download). Keep it last. */
html { --nv-css-end-layout: 1; }