/* ============================================================
   IVFConversion — Mobile Optimisation Layer
   Load AFTER tokens.css and main.css.
   Targets ≤ 768 px unless otherwise noted.
   ============================================================ */

/* ── Global touch / viewport hygiene ─────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* ── Shared touch-target floor ────────────────────────────── */
.button,
.nav-link,
.upload-dropzone,
input[type="file"],
select,
.report-download-button {
  touch-action: manipulation;
}

/* ============================================================
   BREAKPOINT: ≤ 768 px  (phones + small tablets)
   ============================================================ */
@media (max-width: 768px) {

  /* ── 1. Layout & page shell ──────────────────────────────── */

  .header-inner,
  .page,
  .status-screen {
    width: min(calc(100% - 1.5rem), var(--max-width));
  }

  .header-inner {
    padding: 0.85rem 0 0.75rem;
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  /* Shrink wordmark area so nav links don't crush it */
  .brand-lockup {
    gap: 0.6rem;
    flex-shrink: 0;
  }

  .brand-name {
    font-size: 0.8rem;
  }

  .brand-tag {
    display: none; /* reclaim horizontal space */
  }

  /* Nav links: horizontal scroll strip, no wrapping */
  .primary-nav {
    gap: 0.85rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding-bottom: 2px; /* avoid clipping underline */
  }

  .primary-nav::-webkit-scrollbar {
    display: none;
  }

  .nav-link {
    font-size: 0.78rem;
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .page {
    padding: 1.5rem 0 3rem;
  }

  .page--landing {
    padding-top: 1.25rem;
    gap: 18px;
  }

  /* ── 2. Buttons ──────────────────────────────────────────── */

  .button {
    min-height: 48px;         /* comfortable touch target */
    padding: 0 1rem;
    font-size: 0.78rem;
    width: 100%;              /* full-width on mobile by default */
  }

  /* Restore inline behaviour where explicitly side-by-side */
  .upload-actions .button {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }

  .upload-actions {
    gap: 0.75rem;
  }

  /* ── 3. Landing page ─────────────────────────────────────── */

  /* Hero: stack copy above stat panel */
  .landing-hero {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .landing-hero__copy h1 {
    font-size: clamp(1.875rem, 8vw, 2.5rem);
    margin-top: 12px;
    line-height: 1.12;
  }

  .landing-hero__body {
    font-size: 14px;
    margin-top: 14px;
  }

  /* Proof items: 1-column on very small screens, 3 on >= 480 */
  .landing-proof-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 20px;
  }

  /* Stat panel: horizontal scroll of stat items */
  .landing-stat-panel {
    padding: 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: row;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .landing-stat-panel::-webkit-scrollbar {
    display: none;
  }

  /* Each stat item becomes a fixed-width card in the scroller */
  .landing-stat-item {
    flex: 0 0 200px;
    padding-right: 20px;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 4px;
  }

  .landing-stat-item:first-child {
    padding-left: 0;
  }

  .landing-stat-item:last-of-type {
    border-right: none;
    padding-right: 0;
  }

  .landing-stat-item__value {
    font-size: 28px;
  }

  .landing-stat-item__value--white {
    font-size: 18px;
  }

  .landing-stat-panel__citation {
    margin-top: 0;
    align-self: flex-end;
    white-space: nowrap;
    padding-left: 16px;
    flex-shrink: 0;
  }

  /* Upload card */
  .landing-upload-card {
    padding: 20px;
    border-radius: 12px;
  }

  .landing-upload-card__top {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 16px;
  }

  .landing-upload-card h2 {
    font-size: 20px;
    margin-top: 8px;
  }

  .landing-upload-card__flow {
    display: none; /* too long for mobile */
  }

  /* Upload dropzone: shorter, still tappable */
  .upload-dropzone {
    min-height: 110px;
    margin-top: 1rem;
    padding: 1rem;
  }

  .upload-dropzone__title {
    font-size: 1rem;
  }

  /* Form inputs */
  .workflow-input {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
  }

  .workflow-input input,
  .workflow-input select {
    width: 100%;
    min-height: 48px;
    padding: 0 0.875rem;
    /* font-size >= 16px prevents iOS zoom-on-focus */
    font-size: 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-line);
    background: white;
    color: var(--color-ink);
    -webkit-appearance: none;
    appearance: none;
  }

  /* Status grid: stack */
  .landing-status-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* ── 4. Workflow cards ───────────────────────────────────── */

  .workflow-card {
    padding: 1.1rem 1rem;
    border-radius: var(--radius-md);
  }

  .workflow-shell {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.25rem;
  }

  /* ── 5. Report page: download bar ───────────────────────── */

  .report-downloads--sticky {
    position: static;
    width: calc(100vw - 1.5rem);
    flex-direction: column;
    gap: 10px;
    padding-inline: 0;
    margin-bottom: 0;
  }

  .report-download-button {
    width: 100%;
    min-height: 52px;
    padding: 0 1rem;
  }

  /* ── 6. Report question sections ─────────────────────────── */

  .report-question__wrap {
    width: calc(100vw - 1.5rem);
    padding: 48px 0 40px;
  }

  .report-question__title {
    font-size: clamp(1.375rem, 5.5vw, 1.75rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  /* Force ALL question layouts to single column */
  .report-question__layout,
  .report-question__layout--funnel,
  .report-question__layout--q2,
  .report-question__layout--q3 {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }

  .report-question__layout--funnel .report-question-copy {
    padding-top: 0;
  }

  /* Sub-grids: single column */
  .report-question__graphics,
  .report-kpis--question,
  .report-findings-layout,
  .report-actions-row--question,
  .report-cycle-journey__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* ── 7. Funnel SVG ───────────────────────────────────────── */
  /*
   * viewBox="0 0 420 560" is hardcoded in JS — we must not change it.
   * Let the SVG scale fluidly: width:100% + height:auto respects the
   * viewBox aspect ratio automatically via the browser's SVG scaling.
   * overflow:visible allows the outermost label text (e.g. "LEAD TO OPU")
   * which sits near x=0 to remain visible without clipping.
   */
  .report-chart--funnel {
    display: block;
    width: 100%;
    max-width: 420px;   /* never grow past intended design size */
    height: auto;
    margin: 0 auto;
    overflow: visible;
  }

  .report-question__visual {
    width: 100%;
    overflow-x: hidden;
  }

  /* ── 8. Doughnut SVG ─────────────────────────────────────── */
  /*
   * viewBox="0 0 340 340" — same fluid treatment.
   * Cap at 300px so it doesn't dominate the screen.
   */
  .report-doughnut-card {
    display: flex;
    justify-content: center;
    padding: 0;
  }

  .report-chart--donut {
    display: block;
    width: min(80vw, 300px);
    height: auto;
    margin: 0 auto;
  }

  .report-question__visual--q2 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
  }

  /* ── 9. Horizontal bars ──────────────────────────────────── */
  /*
   * The bars use hardcoded pixel tracks (220–260 px) generated in JS.
   * On narrow screens we allow horizontal scrolling on the container
   * so the chart stays fully legible without JS changes.
   * A min-width on each row ensures the labels and badges never crush.
   */
  .report-bars-graphic {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .report-bar-row {
    min-width: 300px;
  }

  /* Stage label truncation guard */
  .report-bar-row__top span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 52vw;
  }

  /* Meta row: allow wrapping */
  .report-bar-row__meta {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* ── 10. Q3 layout ───────────────────────────────────────── */

  /* Research note: un-sticky it */
  .report-research-note {
    position: static;
    align-self: auto;
  }

  .report-q3-footnotes {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
  }

  .report-research-inline--q3 {
    padding: 16px;
  }

  /* Action tiles */
  .report-action-tile--question {
    min-height: auto;
    padding: 18px 16px;
  }

  /* ── 11. KPI tiles ───────────────────────────────────────── */

  .report-kpi {
    padding: 16px;
  }

  .report-kpi__value {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  /* ── 12. Finding cards ───────────────────────────────────── */

  .report-finding-card {
    padding: 16px;
  }

  /* ── 13. Footer ──────────────────────────────────────────── */

  .report-footer {
    padding: 28px 20px 22px;
  }

  .report-footer__wordmark {
    width: min(260px, 70vw);
    height: auto;
  }

  .report-method-note {
    padding: 0 16px;
    font-size: 10px;
  }

  /* ── 14. Content grids (TRACE / ACT pages) ───────────────── */

  .content-grid--three,
  .content-grid--four {
    grid-template-columns: 1fr;
  }

  /* Two-column split panels */
  .split-panel {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* ── 15. Hero panels ─────────────────────────────────────── */

  .hero-panel,
  .workflow-hero {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.5rem;
  }

  .workflow-hero__copy h1,
  .hero-copy h1 {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  /* ── 16. Data table: horizontal scroll ───────────────────── */

  .data-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .data-table__row {
    min-width: 480px;   /* prevents 5-column grid from crushing */
  }

  /* ── 17. Leakage / callout stat chips ────────────────────── */

  .leakage-band__stats div,
  .callout-stats div {
    min-width: 7.5rem;
  }

  /* ── 18. Quality score ───────────────────────────────────── */

  .quality-score strong {
    font-size: 1.65rem;
  }

} /* end @media (max-width: 768px) */


/* ============================================================
   BREAKPOINT: ≤ 480 px  (compact phones, e.g. iPhone SE)
   ============================================================ */
@media (max-width: 480px) {

  /* Tighter gutters */
  .header-inner,
  .page,
  .status-screen {
    width: calc(100% - 1rem);
  }

  .report-question__wrap {
    width: calc(100vw - 1rem);
    padding: 36px 0 32px;
  }

  .report-downloads--sticky {
    width: calc(100vw - 1rem);
  }

  /* Hero text */
  .landing-hero__copy h1 {
    font-size: clamp(1.625rem, 8.5vw, 2rem);
  }

  /* Proof grid: stay 1-col on tiny phones */
  .landing-proof-grid {
    grid-template-columns: 1fr;
  }

  /* Funnel: allow slight horizontal scroll on the narrowest screens
     rather than scaling text labels to illegibility */
  .report-question__visual {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .report-chart--funnel {
    min-width: 300px;
    width: 100%;
    max-width: none;
  }

  /* Donut: slightly smaller */
  .report-chart--donut {
    width: min(72vw, 260px);
  }

  /* Action tile: shrink giant numerals */
  .report-action-tile--question .report-action-tile__number {
    font-size: 36px;
  }

  /* Footer wordmark */
  .report-footer__wordmark {
    width: min(220px, 72vw);
  }

  /* Hide brand mark bar-graph icon; keep text */
  .brand-mark {
    display: none;
  }

  .brand-name {
    font-size: 0.75rem;
  }

  /* Stat panel items: narrower */
  .landing-stat-item {
    flex: 0 0 175px;
  }

} /* end @media (max-width: 480px) */


/* ============================================================
   Proof grid: 3-column at 480–768 px (between the two gates)
   ============================================================ */
@media (min-width: 480px) and (max-width: 768px) {
  .landing-proof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ============================================================
   SAFE-AREA INSETS (notch / Dynamic Island / home bar)
   ============================================================ */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .site-header {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  .report-footer {
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
  }
}


/* ============================================================
   iOS ZOOM PREVENTION
   Any interactive element that receives focus must have
   font-size >= 16 px on iOS, or the viewport will zoom in.
   ============================================================ */
@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}


/* ============================================================
   PRINT — strip mobile chrome when printing the report
   ============================================================ */
@media print {
  .report-downloads--sticky,
  .site-header {
    display: none !important;
  }

  .report-question__wrap {
    width: 100% !important;
    padding: 32px 0 !important;
  }

  .report-chart--funnel,
  .report-chart--donut {
    width: 100% !important;
    max-width: none !important;
  }
}

@media (max-width: 768px) {
  .landing-v7-nav,
  .landing-v7-trust,
  .landing-v7-trust div,
  .landing-v7-act-header,
  .landing-v7-step-actions,
  .landing-v7-demo {
    flex-direction: column;
    align-items: flex-start;
  }

  .landing-v7-nav,
  .landing-v7-hero,
  .landing-v7-trace,
  .landing-v7-upload,
  .landing-v7-act {
    padding-left: 20px;
    padding-right: 20px;
  }

  .landing-v7-hero {
    padding-top: 72px;
  }

  .landing-v7-nav-links {
    width: 100%;
    justify-content: space-between;
    gap: 12px;
  }

  .landing-v7-nav-links button {
    width: 100%;
  }

  .landing-v7-arch-modules,
  .landing-v7-trace-panel,
  .landing-v7-step,
  .landing-v7-form-row,
  .landing-v7-act-grid {
    grid-template-columns: 1fr;
  }

  .landing-v7-trace-panel,
  .landing-v7-preview {
    padding: 24px 20px;
  }

  .landing-v7-trust span,
  .landing-v7-hero-spine {
    display: none;
  }

  .landing-v7-hero-name {
    font-size: clamp(42px, 12vw, 72px);
  }

  .landing-v7-hero-copy,
  .landing-v7-step-head p,
  .landing-v7-preview p,
  .landing-v7-act-copy,
  .landing-v7-act-grid p,
  .landing-v7-act-note p {
    font-size: 14px;
  }

  .landing-v7-step-tabs {
    flex-wrap: wrap;
  }

  .landing-v7-step-tab {
    width: 100%;
    justify-content: flex-start;
  }

  .landing-v7-step-actions .button,
  .landing-v7-demo .button {
    width: 100%;
  }

  .landing-v7-dropzone {
    min-height: 180px;
  }

  .landing-v6-nav,
  .landing-v6-upload-header,
  .landing-v6-upload-actions,
  .landing-v6-upload-actions-right {
    flex-direction: column;
    align-items: flex-start;
  }

  .landing-v6-nav {
    padding: 16px;
  }

  .landing-v6-nav-tabs {
    width: 100%;
  }

  .landing-v6-nav-tab,
  .landing-v6-nav-cta {
    width: 100%;
    justify-content: center;
  }

  .landing-v6-upload,
  .landing-v6-act {
    padding: 24px 20px;
    border-radius: 18px;
  }

  .landing-v6-upload-card {
    padding: 20px;
  }

  .landing-v6-pipeline {
    flex-wrap: wrap;
    gap: 6px;
  }

  .landing-v6-upload-step-copy h3,
  .landing-v6-act-card h3,
  .landing-v6-processing h3 {
    font-size: 24px;
  }

  .landing-v6-upload-grid-row,
  .landing-v6-act-grid {
    grid-template-columns: 1fr;
  }

  .landing-v6-upload-actions,
  .landing-v6-upload-actions-right {
    width: 100%;
  }

  .landing-v6-upload-actions .button,
  .landing-v6-upload-actions-right .button {
    width: 100%;
  }

  .landing-v6-dropzone {
    min-height: 180px;
  }

  .landing-v6-processing-meta {
    flex-direction: column;
  }

  .landing-v4-hero-head,
  .landing-v4-process {
    padding: 24px 20px;
  }

  .landing-v4-hero-split,
  .landing-v4-process-layout {
    grid-template-columns: 1fr;
  }

  .landing-v4-panel {
    min-height: auto;
    padding: 28px 20px;
  }

  .landing-v4-panel-accent,
  .landing-v4-foundation > span {
    display: none;
  }

  .landing-v4-foundation {
    padding: 14px 20px;
    justify-content: center;
  }

  .landing-v4-foundation div {
    justify-content: center;
  }

  .landing-v4-hero-statement {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .landing-v4-panel-name {
    font-size: clamp(44px, 12vw, 72px);
  }

  .landing-v4-hero-subline,
  .landing-v4-panel-role,
  .landing-v4-panel-feature p,
  .landing-v4-process-step-body em {
    font-size: 14px;
  }

  .landing-v4-process-step {
    margin-left: 0;
    padding: 18px 16px;
  }

  .landing-v4-process-preview {
    min-height: 320px;
  }

  .landing-v4-process-pane {
    padding: 22px;
  }

  .landing-v4-pane-meta,
  .landing-v4-output-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .landing-v4-analysis-row {
    flex-wrap: wrap;
  }

  .landing-v4-analysis-row span {
    min-width: 100%;
  }

  .landing-v4-output-item em,
  .landing-v4-output-item b {
    margin-top: 6px;
  }

  .landing-v3-hero,
  .landing-v3-section,
  .landing-v3-upload-card,
  .landing-v3-footer {
    padding: 20px;
    border-radius: 16px;
  }

  .landing-v3-hero {
    min-height: auto;
  }

  .landing-v3-spine,
  .landing-v3-platform-line,
  .landing-v3-foundation-line,
  .landing-v3-scroll-cue {
    display: none;
  }

  .landing-v3-platform-text,
  .landing-v3-eyebrow,
  .landing-v3-upload-flow,
  .landing-v3-footer-copy {
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  .landing-v3-statement {
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 1.06;
  }

  .landing-v3-title {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
  }

  .landing-v3-subline,
  .landing-v3-desc,
  .landing-v3-product-role,
  .landing-v3-feature p,
  .landing-v3-step-body p,
  .landing-v3-outcome p,
  .landing-v3-trace-card span,
  .landing-v3-queue-item p {
    font-size: 14px;
    line-height: 1.65;
  }

  .landing-v3-products,
  .landing-v3-process-spine,
  .landing-v3-trace-grid,
  .landing-v3-upload-grid,
  .landing-v3-upload-meta-grid {
    grid-template-columns: 1fr;
  }

  .landing-v3-product {
    min-height: auto;
    padding: 24px 20px;
  }

  .landing-v3-product-name {
    font-size: 36px;
  }

  .landing-v3-product-ghost {
    font-size: 88px;
  }

  .landing-v3-section-header,
  .landing-v3-upload-toolbar,
  .landing-v3-upload-actions,
  .landing-v3-footer,
  .landing-v3-footer-brand,
  .landing-v3-footer-links {
    flex-direction: column;
    align-items: flex-start;
  }

  .landing-v3-upload-actions {
    width: 100%;
  }

  .landing-v3-upload-actions .button {
    width: 100%;
  }

  .landing-v3-queue {
    padding: 20px;
  }

  .landing-v3-queue-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .landing-v3-outcome {
    grid-template-columns: 1fr;
  }
}