/* css/mobile.css — Mobile-First Overrides
 *
 * Comprehensive mobile optimisation layer. Loaded LAST so every rule here
 * takes precedence over the base stylesheets. Keep it small, targeted, and
 * mobile-only — all rules live inside `@media (max-width: 767px)` unless
 * noted.
 *
 * Sections:
 *   1. Base rhythm (container, section padding, typography)
 *   2. Navbar + mobile menu polish
 *   3. Hero section + hero mockup
 *   4. Workflow comparison
 *   5. Product showcase timeline
 *   6. How-it-works steps
 *   7. Integrations + channels
 *   8. Rich cards grid
 *   9. Manifesto + CTA dark
 *  10. Footer
 *  11. Product / page hero
 *  12. Animations safety (reveal visibility guard)
 *  13. Tap targets + touch affordances
 */

/* ============================================================
   1. BASE RHYTHM
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --section-py: var(--space-14);
    --section-py-lg: var(--space-16);
    --section-px: var(--space-5);
  }

  /* Reduce trailing section header margin — 64px is overkill on phones */
  .section-header {
    margin-bottom: var(--space-10);
  }

  .section-heading {
    font-size: clamp(1.625rem, 7vw, 2.25rem);
    line-height: 1.15;
  }

  .section-subheading {
    font-size: var(--text-body);
    line-height: var(--leading-normal);
    max-width: 36rem;
    margin-left: auto;
    margin-right: auto;
  }

  .section-label {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
  }

  /* Containers: a touch more breathing room on the left/right, but tighter
     than desktop's space-8 */
  .container {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  /* Generic heading tightening */
  h1, h2, h3 {
    letter-spacing: -0.015em;
  }

  /* Body copy — 15px reads better on small screens */
  body {
    font-size: 15px;
    -webkit-text-size-adjust: 100%;
  }

  p {
    line-height: 1.6;
  }

  /* Prevent horizontal scroll from off-canvas decorations */
  html, body {
    overflow-x: hidden;
  }

  /* Larger minimum tap size for all anchors/buttons via outline spacing */
  .btn {
    min-height: 48px;
    padding: 0.875rem 1.5rem;
    font-size: var(--text-body);
  }
  .btn-nav {
    min-height: 40px;
    padding: 0.5rem 1rem;
  }
}

/* ============================================================
   2. NAVBAR + MOBILE MENU
   ============================================================ */
@media (max-width: 767px) {
  .navbar-container {
    height: 60px;
    padding: 0 var(--space-5);
  }

  /* Logo text scales a touch smaller on narrow phones */
  .navbar-logo img {
    height: 26px;
  }
  .navbar-logo-text {
    font-size: 1.0625rem;
  }

  /* Hamburger: bigger tap target */
  .hamburger {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
  }

  /* Mobile menu drawer */
  .mobile-menu {
    top: 60px;
    padding: var(--space-6) var(--space-5) var(--space-10);
    background: var(--color-bg);
    /* Full-height off-canvas with subtle scroll */
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
  }

  /* Menu entrance animation for a more "app-like" feel */
  .mobile-menu.is-open {
    animation: mm-slide-in 260ms var(--ease-default) both;
  }

  @keyframes mm-slide-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .mobile-menu-link,
  .mobile-accordion-trigger {
    padding: var(--space-4) 0;
    font-size: 1.0625rem;
    min-height: 52px;
  }

  .mobile-accordion-content {
    padding: var(--space-2) 0 var(--space-5) var(--space-4);
  }

  .mobile-accordion-content a {
    padding: 0.75rem 0;
    font-size: var(--text-body);
    min-height: 44px;
  }

  .mobile-menu-cta {
    margin-top: var(--space-8);
  }

  .mobile-menu-cta .btn {
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: var(--text-body);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu.is-open {
    animation: none;
  }
}

/* ============================================================
   3. HERO SECTION + MOCKUP
   ============================================================ */
@media (max-width: 767px) {
  .hero {
    min-height: auto;
    padding-top: 88px;
    padding-bottom: var(--space-12);
    justify-content: flex-start;
  }

  .hero-content {
    text-align: left;
    padding: 0 var(--space-5);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .hero-headline {
    font-size: 2.125rem; /* 34px */
    line-height: 1.08;
    margin-bottom: var(--space-5);
    letter-spacing: -0.025em;
  }

  .hero-headline .word-rotator {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
  }

  /* The cursor + word-rotator sit in a flex — ensure they wrap cleanly
     under the first line and never overflow */
  .hero-headline > span:last-child {
    display: inline-flex !important;
    flex-wrap: nowrap;
    max-width: 100%;
  }

  .hero-headline {
    overflow: hidden;
  }

  .hero-subtitle {
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: var(--space-8);
    max-width: none;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* ---- Hero mockup: overlapping two-panel composition on mobile ----
     Mirrors the desktop side-by-side overlap but compressed for narrow
     screens. Both panels are absolute-positioned inside a fixed-height
     container so the total vertical footprint stays ~300px instead of
     the previous ~700px. Left panel sits top-left, right panel sits
     bottom-right, they overlap diagonally with a subtle tilt. */
  .hero-mockup {
    position: relative;
    margin: var(--space-8) auto 0;
    padding: 0 var(--space-4) var(--space-8);
    height: 300px;
    perspective: 900px;
    display: block;
    max-width: 420px;
  }

  .mockup-panel--left,
  .mockup-panel--right {
    position: absolute;
    margin: 0;
    box-shadow: 0 20px 40px -12px rgba(42, 37, 32, 0.18),
                0 8px 16px -6px rgba(42, 37, 32, 0.08);
    border-radius: var(--radius-lg);
  }

  .mockup-panel--left {
    left: var(--space-4);
    top: 0;
    width: 60%;
    max-width: 220px;
    transform: rotateX(4deg) rotateY(4deg) !important;
    transform-origin: top left;
    z-index: 1;
  }

  .mockup-panel--right {
    right: var(--space-4);
    bottom: var(--space-6);
    width: 62%;
    max-width: 230px;
    transform: rotateX(4deg) rotateY(-4deg) !important;
    transform-origin: bottom right;
    z-index: 2;
  }

  /* Compact mockup chat content — fewer visible messages + smaller text */
  .mockup-chat {
    padding: var(--space-2) var(--space-3);
    gap: 6px;
  }

  .mockup-chat-msg {
    font-size: 9.5px;
    padding: 5px 7px;
    line-height: 1.35;
  }

  .mockup-chat-avatar {
    width: 18px;
    height: 18px;
  }

  .mockup-chat-avatar-dot {
    width: 8px;
    height: 8px;
  }

  .mockup-titlebar {
    padding: 6px 10px;
  }

  .mockup-titlebar-text {
    font-size: 9px;
  }

  .mockup-dot {
    width: 7px;
    height: 7px;
  }

  /* Hide the extra messages on the smallest panel — only show the first
     user msg + AI reply summary. Keeps the panel compact and readable. */
  .mockup-panel--left .mockup-chat-bubble:nth-child(n+3),
  .mockup-panel--left .mockup-typing {
    display: none;
  }

  /* Right panel dashboard content — scale down */
  .mockup-tabs {
    padding: 4px 8px;
    gap: 2px;
  }

  .mockup-tab {
    font-size: 8px;
    padding: 3px 6px;
  }

  .mockup-stats {
    padding: 8px;
    gap: 4px;
  }

  .mockup-stat {
    padding: 4px 6px;
  }

  .mockup-stat-value {
    font-size: 11px;
  }

  .mockup-stat-label {
    font-size: 8px;
  }

  .mockup-table {
    padding: 0 8px 8px;
  }

  .mockup-table-row {
    font-size: 8.5px;
    padding: 4px 0;
  }

  .mockup-status {
    font-size: 7.5px;
    padding: 1px 5px;
  }

  /* Right panel only needs the first 2-3 rows visible — hide the rest */
  .mockup-panel--right .mockup-table-row:nth-child(n+3) {
    display: none;
  }

  .mockup-fade {
    height: 28px;
  }
}

/* ============================================================
   4. WORKFLOW COMPARISON (The AI-Native Difference)
   ============================================================ */
@media (max-width: 767px) {
  .workflow-comparison {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .workflow-panel {
    border-radius: var(--radius-lg);
  }

  .workflow-panel-body {
    padding: var(--space-5);
  }

  .workflow-panel-header {
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-sm);
  }

  .workflow-panel-header-badge {
    font-size: 0.6875rem;
  }

  .workflow-steps {
    gap: var(--space-2);
  }

  .workflow-step {
    font-size: 0.8125rem;
    line-height: 1.45;
  }

  .workflow-stat {
    font-size: 0.75rem;
  }

  /* Safety net — ensure workflow-panel--old text is always visible and
     the reveal animation doesn't leave it invisible. */
  .workflow-panel--old .workflow-step {
    opacity: 1 !important;
  }
}

/* ============================================================
   5. PRODUCT SHOWCASE — HORIZONTAL SNAP-SCROLL CAROUSEL
   ============================================================
   Desktop uses a vertical timeline; on mobile that turns into ~3,200px
   of scroll. Instead, convert to a horizontal carousel: the 4 category
   cards become swipeable, with CSS scroll-snap keeping each card
   centered. Shows a peek of the next card so the gesture is obvious.
   Timeline line + dots are hidden (they don't make sense on a
   horizontal layout). */
@media (max-width: 767px) {
  #products .container {
    /* Let the carousel bleed to the screen edges for a cleaner look */
    padding-left: 0;
    padding-right: 0;
  }

  #products .section-header {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  .product-showcase {
    overflow: hidden;
  }

  .product-showcase-timeline {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-5);
    padding: var(--space-3) var(--space-5) var(--space-6);
    gap: var(--space-4);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .product-showcase-timeline::-webkit-scrollbar {
    display: none;
  }

  /* Hide the timeline rail + dots on mobile — they don't make sense
     for a horizontal carousel */
  .showcase-line,
  .showcase-dot {
    display: none !important;
  }

  .showcase-step {
    flex: 0 0 82%;
    max-width: 320px;
    min-width: 260px;
    scroll-snap-align: center;
    margin-bottom: 0;
    gap: 0;
    display: block;
  }

  .showcase-step:last-child {
    margin-right: var(--space-5);
  }

  .showcase-card {
    margin-left: 0;
    width: 100%;
    padding: 0;
  }

  .showcase-card-inner {
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    height: 100%;
    min-height: 460px;
    display: flex;
    flex-direction: column;
  }

  .showcase-step-number {
    font-size: 0.6875rem;
    letter-spacing: var(--tracking-wider);
  }

  .showcase-step-category {
    font-size: 1.1875rem;
    margin-top: 4px;
    margin-bottom: var(--space-2);
    line-height: 1.2;
  }

  .showcase-step-desc {
    font-size: 0.8125rem;
    margin-bottom: var(--space-4);
    line-height: 1.5;
  }

  .showcase-products {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
  }

  .showcase-product {
    padding: var(--space-3);
    gap: var(--space-2);
  }

  .showcase-product-icon {
    width: 28px;
    height: 28px;
  }

  .showcase-product-icon svg {
    width: 14px;
    height: 14px;
  }

  .showcase-product-name {
    font-size: 0.8125rem;
  }

  .showcase-product-desc {
    font-size: 0.6875rem;
  }

  .showcase-ai-prompt {
    font-size: 0.75rem;
    padding: var(--space-2) var(--space-3);
    margin-top: auto;
  }

  /* Hide the "Ask the AI: " prefix on mobile — saves vertical space */
  .showcase-ai-prompt::before {
    display: none;
  }

  /* Hide showcase-visual sidekick (desktop only) */
  .showcase-visual {
    display: none !important;
  }

  /* Subtle scroll indicator hint after the section heading */
  #products .section-header::after {
    content: "Swipe to explore ›";
    display: block;
    margin-top: var(--space-3);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    color: var(--color-brand);
    text-transform: uppercase;
  }
}

/* ============================================================
   6. HOW-IT-WORKS STEPS
   ============================================================ */
@media (max-width: 767px) {
  .ai-how-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .ai-how-step {
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-lg);
  }

  .ai-how-step-visual {
    margin-bottom: var(--space-4);
  }

  .ai-how-step-num {
    width: 40px;
    height: 40px;
    font-size: 1.125rem;
  }

  .ai-how-step-title {
    font-size: 1.25rem;
  }

  .ai-how-step-desc {
    font-size: var(--text-sm);
  }
}

/* ============================================================
   7. ORBITAL INTEGRATIONS — SYMMETRIC 3x3 GRID ON MOBILE
   ============================================================
   Desktop has an orbital/radial layout. Mobile falls back to a grid
   that leaves Remote& off-center and creates asymmetric empty cells.
   Override: build an explicit 3x3 grid with Remote& in the DEAD center,
   8 key integrations around it, the remaining 4 hidden. Pair with a
   "See all 50+" link below. Symmetric, compact, on-brand. */
@media (max-width: 767px) {
  .orbital-integrations {
    padding: var(--space-4) var(--space-5) var(--space-6);
  }

  .orbital-canvas {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--space-3);
    max-width: 300px;
    margin: 0 auto;
    padding: var(--space-4) 0 var(--space-2);
    position: relative;
    height: auto !important;
  }

  /* Soft radial glow behind the grid to anchor Remote& visually */
  .orbital-canvas::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle at center,
      var(--color-brand-a12) 0%,
      var(--color-brand-a6) 35%,
      transparent 70%
    );
    pointer-events: none;
    z-index: 0;
  }

  .orbital-canvas > * {
    position: relative;
    z-index: 1;
  }

  /* Hide the dashed SVG connectors on mobile (they're built for the
     absolute layout) */
  .orbital-connectors {
    display: none !important;
  }

  /* Remote& center AND nodes share the same cell sizing —
     stretch to fill their grid cell, stay square via aspect-ratio.
     This guarantees perfect 3x3 alignment with the center sitting
     exactly in row 2 col 2. */
  .orbital-center,
  .orbital-node {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0;
    aspect-ratio: 1 / 1;
    justify-self: stretch;
    align-self: stretch;
    margin: 0;
  }

  /* Remote& center — dead-center of the 3x3, visually distinct via
     stronger border and glow (not via size) */
  .orbital-center {
    grid-column: 2;
    grid-row: 2;
    background: var(--color-surface-solid);
    border: 2px solid var(--color-brand);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 24px rgba(218, 119, 86, 0.32),
                0 0 0 5px rgba(218, 119, 86, 0.10);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  /* Subtle pulse halo around Remote& center */
  .orbital-center::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: var(--radius-xl);
    border: 1px dashed var(--color-brand-a30);
    animation: orbital-pulse 3.2s ease-in-out infinite;
    pointer-events: none;
  }

  @keyframes orbital-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 0.2; transform: scale(1.08); }
  }

  .orbital-center-logo {
    width: 44px !important;
    height: 44px !important;
  }

  .orbital-node {
    padding: var(--space-2);
  }

  .orbital-node--1 { grid-column: 1; grid-row: 1; }  /* Slack */
  .orbital-node--2 { grid-column: 2; grid-row: 1; }  /* Teams */
  .orbital-node--3 { grid-column: 3; grid-row: 1; }  /* Google */
  .orbital-node--4 { grid-column: 1; grid-row: 2; }  /* QuickBooks */
  .orbital-node--5 { grid-column: 3; grid-row: 2; }  /* Xero */
  .orbital-node--6 { grid-column: 1; grid-row: 3; }  /* Notion */
  .orbital-node--7 { grid-column: 2; grid-row: 3; }  /* Greenhouse */
  .orbital-node--8 { grid-column: 3; grid-row: 3; }  /* Okta */

  /* Hide the last 4 nodes on mobile (Zapier / HubSpot / Sage / WhatsApp)
     — the "See all 50+" link below surfaces them */
  .orbital-node--9,
  .orbital-node--10,
  .orbital-node--11,
  .orbital-node--12 {
    display: none !important;
  }

  .orbital-node-logo {
    width: 28px;
    height: 28px;
  }

  .orbital-node-label {
    font-size: 10px;
    margin-top: 2px;
  }

  /* "See all integrations" link — style the existing HTML wrapper
     (non-orbital-canvas div directly under .orbital-integrations) as
     a pill-shaped CTA below the grid. */
  .orbital-integrations > div:not(.orbital-canvas) {
    margin-top: var(--space-6) !important;
    text-align: center;
  }

  .orbital-integrations > div:not(.orbital-canvas) > a {
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--color-brand-a25);
    border-radius: var(--radius-full);
    background: var(--color-surface-solid);
    font-size: 0.875rem !important;
    color: var(--color-brand) !important;
    font-weight: 600 !important;
  }

  /* Channels grid */
  .channels-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .channel-card {
    padding: var(--space-5);
  }

  .channel-card-title {
    font-size: 1rem;
  }

  .channel-card-desc {
    font-size: 0.8125rem;
  }
}

/* ============================================================
   8. RICH CARDS ("Built Different")
   ============================================================ */
@media (max-width: 767px) {
  .rich-cards {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .rich-card-visual {
    padding: var(--space-5);
    min-height: 140px;
  }

  .rich-card-content {
    padding: var(--space-5);
  }

  .rich-card-title {
    font-size: 1.125rem;
    margin-bottom: var(--space-2);
  }

  .rich-card-desc {
    font-size: 0.875rem;
  }
}

/* ============================================================
   9. MANIFESTO + DARK CTA
   ============================================================ */
@media (max-width: 767px) {
  .manifesto {
    padding: var(--space-6) var(--space-4);
  }

  .manifesto-label {
    font-size: 0.625rem;
    margin-bottom: var(--space-4);
  }

  .manifesto-quote {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  .manifesto-attribution {
    margin-top: var(--space-4);
    font-size: 0.75rem;
  }

  .cta-dark {
    padding: var(--space-12) var(--space-5);
    border-radius: var(--radius-lg);
  }

  .cta-dark-heading {
    font-size: 1.75rem;
    line-height: 1.15;
    margin-bottom: var(--space-3);
  }

  .cta-dark-subtitle {
    font-size: 0.9375rem;
    line-height: 1.55;
    margin-bottom: var(--space-6);
  }

  .cta-dark-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .cta-dark-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   10. FOOTER
   ============================================================
   Desktop footer has 4 columns (Brand / Products / Company / Legal).
   Stacking them 1-col on mobile produced 25+ rows of scroll. Instead:
   - Brand block: full width top
   - Products: full width below (13 links flow in 2 CSS sub-columns)
   - Company + Legal: side-by-side in a 2-col row
   This roughly halves the footer height. */
@media (max-width: 767px) {
  .footer-container {
    padding: var(--space-10) var(--space-5) var(--space-12);
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--space-6) var(--space-5);
  }

  /* Brand block (first child) spans both columns */
  .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }

  /* Products column (second child) spans both columns and uses
     CSS multi-column to flow its 13 links in 2 sub-columns */
  .footer-grid > div:nth-child(2) {
    grid-column: 1 / -1;
  }

  /* Override the flex display on .footer-links for the Products column
     only — CSS multi-column can't flow flex items, so switch to block
     first, then apply column-count. */
  .footer-grid > div:nth-child(2) .footer-links {
    display: block;
    column-count: 2;
    column-gap: var(--space-5);
    gap: 0;
  }

  .footer-grid > div:nth-child(2) .footer-links li {
    break-inside: avoid;
    display: block;
    margin-bottom: 0.625rem;
  }

  /* Company + Legal share a 2-col row */
  .footer-grid > div:nth-child(3),
  .footer-grid > div:nth-child(4) {
    grid-column: span 1;
  }

  .footer-brand-name {
    font-size: 1.125rem;
  }

  .footer-brand-desc {
    font-size: 0.875rem;
    max-width: 100%;
  }

  .footer-links {
    gap: 0.625rem;
  }

  .footer-links a {
    font-size: 0.875rem;
    display: inline-block;
    padding: 1px 0;
    min-height: 28px;
  }

  .footer-col-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
    font-weight: 600;
  }

  .footer-bottom {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    align-items: flex-start;
    gap: var(--space-3);
  }

  .footer-copyright {
    font-size: 0.75rem;
  }

  .footer-legal {
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .footer-legal a {
    font-size: 0.75rem;
  }

  /* Reserve enough space so the fixed Remi bar doesn't sit on top of the
     footer's legal links on mobile. Exactly the bar height + safe-area. */
  footer.footer {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   11. PRODUCT / PAGE HERO
   ============================================================ */
@media (max-width: 767px) {
  .page-hero {
    padding: calc(60px + var(--space-10)) 0 var(--space-10);
  }

  .page-hero .section-heading {
    font-size: 2rem;
    line-height: 1.12;
  }

  .page-hero-subtitle {
    font-size: var(--text-body);
    line-height: 1.55;
    max-width: none;
    padding: 0 var(--space-2);
    margin-bottom: var(--space-6);
  }

  .page-hero-actions {
    flex-direction: column;
    align-items: stretch;
    padding: 0 var(--space-5);
  }

  .page-hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   12. ANIMATIONS SAFETY — never leave content invisible
   ============================================================ */
@media (max-width: 767px) {
  /* If scroll-reveal misses firing (e.g. IntersectionObserver oddness on
     small phones), make sure content is still visible after a short beat.
     This does NOT disable the animation — it just caps the hidden state. */
  .reveal,
  .reveal-left,
  .reveal-hero {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Hero entrance elements — respect the staged delay but never invisible */
  [data-hero-delay] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Disable the 3D perspective tilt on hero mockup panels — it looks
     broken on tiny screens where the panels are already small */
  .mockup-panel,
  .mockup-panel--left,
  .mockup-panel--right {
    transform: none !important;
  }
}

/* ============================================================
   13. TAP TARGETS + MISC
   ============================================================ */
@media (max-width: 767px) {
  /* All nav dropdown items get a comfortable hit area */
  .nav-dropdown-item,
  .nav-mega-item {
    min-height: 44px;
  }

  /* Forms: bigger inputs for easier typing */
  .form-input,
  .form-textarea,
  .form-select {
    font-size: 16px; /* Prevents iOS zoom on focus */
    min-height: 48px;
    padding: 0.875rem 1rem;
  }

  .form-textarea {
    min-height: 120px;
  }

  /* Pills are commonly tappable — make them comfortable */
  .pill {
    min-height: 40px;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
  }

  /* Select cards / option cards */
  .select-card {
    min-height: 64px;
    padding: var(--space-4);
  }

  /* Contact + Book-a-Demo forms */
  .cta-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .cta-sidebar {
    gap: var(--space-5);
  }

  .cta-form {
    gap: var(--space-5);
  }

  .cta-form-row {
    gap: var(--space-3);
  }

  /* Stack the looking-to-do select cards instead of 2x2 (they overflow) */
  .cta-form-cards {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .cta-form-cards .select-card {
    padding: var(--space-4);
    min-height: 64px;
    text-align: left;
  }

  .cta-form-pills {
    gap: 0.5rem;
  }

  /* Progress header and checklist */
  .cta-progress-header {
    margin-bottom: var(--space-3);
  }

  /* Dark CTA sidebar box on contact/book-a-demo */
  .cta-dark-box,
  .cta-sidebar .cta-dark {
    padding: var(--space-6) var(--space-5);
  }
}