/* Extra mobile navigation content stays absent from the desktop layout. */
.nav-mobile-name,.mobile-menu-heading,.mobile-menu-icon,.export-mobile-step,.export-mobile-description { display:none; }
/* Phone-only refinements. The approved tablet, laptop and desktop rules stay intact. */
@media (max-width: 767px) {
  html { scroll-padding-top:100px; }
  .section-shell,.site-footer,.research.feature,.flows.feature,.skills-section.feature,.pricing {
    width:calc(100% - 40px);
  }
  #main .section-headline { font-size:clamp(30px,7.8vw,38px); letter-spacing:-1.1px; }
  #main > :is(.research,.moodboard,.flows,.skills-section,.export-section,.integrations-section,.testimonials,.pricing,.faq,.closing) {
    padding-block:48px;
  }
  .section-copy>p,.skills-copy>p,.integrations-copy>p,.export-sequence .export-header>p {
    font-size:16px; line-height:1.6;
  }
  .cta-caption { font-size:12px; line-height:1.5; }
  .button { min-height:48px; max-width:100%; white-space:normal; }

  /* Reference layout: wordmark, persistent download, hamburger; stacked feature rows. */
  .navigation,.navigation.hero-download-visible,.navigation.product-menu-open {
    top:max(12px,env(safe-area-inset-top)); width:440px;
    max-width:calc(100% - 24px); padding:6px; border-radius:24px;
  }
  .nav-row { height:48px; gap:8px; padding-left:8px; }
  .nav-brand { flex:1; min-width:0; min-height:44px; gap:6px; }
  .nav-mobile-name { display:inline; font-size:24px; font-weight:500; letter-spacing:-.8px; }
  .nav-brand .brand-symbol { width:20px; height:24px; }
  .nav-link,.nav-spacer,.product-toggle-label,.product-toggle>.icon { display:none; }
  .product-toggle { order:3; position:relative; display:grid; place-items:center;
    width:44px; height:44px; flex:0 0 44px; margin:0; color:#fafafa; border-radius:12px; }
  .mobile-menu-icon { display:block; position:relative; width:24px; height:24px; }
  .mobile-menu-icon::before,.mobile-menu-icon::after { content:''; position:absolute;
    left:0; width:24px; height:2px; border-radius:2px; background:currentColor;
    transition:transform .2s,top .2s; }
  .mobile-menu-icon::before { top:7px; }
  .mobile-menu-icon::after { top:16px; }
  [aria-expanded=true]>.mobile-menu-icon::before { top:11px; transform:rotate(45deg); }
  [aria-expanded=true]>.mobile-menu-icon::after { top:11px; transform:rotate(-45deg); }
  .navigation .nav-download { order:2; flex:0 0 128px; width:128px; min-width:128px;
    height:44px; padding:0 12px; opacity:1; visibility:visible; pointer-events:auto; transform:none; border-radius:17px; }
  .product-menu,.navigation.hero-download-visible .product-menu {
    grid-template-columns:minmax(0,1fr); gap:6px; padding-top:10px;
    max-height:min(70dvh,calc(100dvh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    min-height:0; overflow-y:auto; overscroll-behavior-y:contain;
    grid-auto-rows:max-content; align-content:start;
  }
  .mobile-menu-heading { display:block; padding:10px 12px 8px; color:#a3a3a3; font-size:14px; }
  .product-menu .menu-card { display:grid; grid-template-columns:42px minmax(0,1fr);
    column-gap:14px; row-gap:4px; align-content:center; min-height:88px; padding:16px;
    border-radius:20px; background:#262626; }
  .product-menu .menu-icon { grid-column:1; grid-row:1/3; align-self:center;
    width:42px; height:42px; margin:0; border-radius:50%; }
  .product-menu .menu-icon .icon { width:22px; height:22px; }
  .product-menu .menu-card strong { grid-column:2; font-size:17px; line-height:1.3; }
  .product-menu .menu-card p { grid-column:2; margin:0; font-size:14px; line-height:1.4; }
  .product-menu .menu-copy-compact { display:inline; }
  .product-menu .menu-copy-expanded { display:none; }
  .mobile-menu-links,.navigation.hero-download-visible .mobile-menu-links {
    position:sticky; bottom:0; display:grid; grid-template-columns:1fr 1fr;
    grid-column:1/-1; gap:0 16px; padding:4px 0 0; background:#171717;
    color:#d4d4d4; font-size:14px;
  }
  .mobile-menu-links a { display:flex; justify-content:center; align-items:center; min-height:44px; }
  .mobile-menu-links button { grid-column:1/-1; display:flex; justify-content:center; align-items:center;
    width:100%; min-height:48px; padding:12px; border:1px solid #d4d4d4; border-radius:18px;
    background:#fafafa; color:#171717; font-size:16px; font-weight:500; }

  .hero.hero-landscape { padding:136px 20px 40px; }
  .hero-landscape h1 { font-size:clamp(30px,8.1vw,43px); letter-spacing:-1.4px; }
  .hero-description { font-size:16px; max-width:36ch; }
  .hero-dashboard { width:100%; margin:40px auto 0; }
  .hero-dashboard-screen { aspect-ratio:1440/1080; border-radius:8px; }
  .problem-story { padding-inline:20px; }
  #main > .problem-story { padding-top:80px; }
  .problem-paragraph { font-size:clamp(22px,5.6vw,26px); line-height:1.5; }
  .problem-paragraph+.problem-paragraph { margin-top:28px; }
  .problem-outro { height:160px; }
  .problem-outro-logo { width:80px; }
  .launch-video { margin-block:32px; }
  .launch-video-play { width:64px; height:64px; }
  .launch-video-sound { top:8px; right:8px; }
  .launch-video-replay { bottom:8px; left:8px; min-height:44px; padding:10px 12px; }

  .research.feature,.flows.feature { grid-template-columns:minmax(0,1fr); gap:36px; }
  .research .research-copy,.flows .flows-copy { grid-row:1; width:100%; max-width:none; }
  .research .research-visual,.flows .flows-visual { grid-row:2; width:100%; max-width:none; }
  .research .section-label,.flows .section-label { margin-bottom:22px; }
  .research-backdrop,.flows .flows-backdrop {
    min-height:0; padding:40px clamp(16px,5vw,32px); border-radius:24px;
    background:radial-gradient(ellipse at 22% 16%,#e7e6fd 0%,#efeffb 48%,#f5f5f500 82%);
  }
  .research-page-scroll { height:clamp(240px,64vw,340px); overscroll-behavior-y:auto; }
  .research-benefits,.flows-benefits { margin-top:28px; gap:18px; }
  .research-benefits>li,.flows-benefits>li { font-size:16px; gap:12px; }
  .flow-sequence { padding-inline:12px; }
  .flow-sequence-heading { flex-wrap:wrap; padding:18px 4px; gap:8px; }
  .flow-step { gap:10px; padding-inline:8px; }
  .flow-step:not(:last-child)::after { left:22px; }

  .moodboard-flow { --moodboard-cycle:4s; grid-template-columns:minmax(0,1fr); width:100%; max-width:288px; margin-top:28px; }
  .reference-collage { height:260px; }
  .reference-website { top:20px; }
  .reference-webapp { bottom:16px; }
  .reference-mobile { top:48px; width:29%; }
  .moodboard-option { min-height:44px; padding:10px 12px; font-size:16px; gap:7px; }
  .moodboard-option>.icon { width:22px; height:22px; }
  .moodboard-connection { height:56px; }
  .moodboard-beam { top:0; left:50%; right:auto; width:56px; height:200px; transform-origin:0 0; transform:rotate(90deg) translateY(-50%); }
  .moodboard-guide::before { transform-origin:50% 0; }
  [data-moodboard-enhanced] .moodboard-guide::before { animation-name:moodboard-guide-fill-mobile; }
  .moodboard-guide { height:auto; padding:0; background:#fff; }
  .guide-toolbar,.guide-type,.guide-components { display:none; }
  .guide-page { height:auto; padding:14px; border:0; }
  .guide-page-heading { margin-bottom:16px; }
  .guide-page-heading h3 { font-size:17px; }
  .guide-toolbar { font-size:13px; }
  .guide-page-heading p { font-size:12px; }
  .guide-block+.guide-block { margin-top:12px; padding-top:12px; }

  .skills-infographic { padding:8px 0 16px; }
  .toolkit-panels { gap:12px; }
  .toolkit-panel { padding:0 6px 6px; }
  .toolkit-panel-heading { min-height:64px; padding:12px 6px; }
  .toolkit-panel-heading>.icon,.toolkit-count { display:none; }
  .toolkit-panel-heading h3 { font-size:14px; }
  .toolkit-option { grid-template-columns:minmax(0,1fr) 44px; min-height:108px; padding:9px; row-gap:4px; column-gap:4px; }
  .toolkit-option-art { width:28px; height:28px; grid-column:1; grid-row:1; }
  .toolkit-option-copy { grid-column:1/-1; grid-row:2; align-self:start; }
  .toolkit-option-name { font-size:14px; overflow-wrap:break-word; }
  .toolkit-option-detail { display:none; }
  .toolkit-switch { grid-column:2; grid-row:1; width:44px; height:44px; padding-left:3px; }
  .toolkit-switch::before { left:3px; right:3px; }
  .toolkit-routing { height:88px; }

  /* The phone timeline expands the current chapter above the scroll-driven film. */
  .export-sequence .export-header { text-align:center; margin:0 auto 36px; }
  .export-sequence .export-header .section-label { margin:0 auto 20px; }
  .export-sequence .export-header .section-headline { text-align:center; }
  .export-scroll-track .export-demo { gap:24px; }
  .export-copy .export-tabs { grid-template-columns:minmax(0,1fr); gap:0; margin-top:0; }
  .export-copy .export-tabs>button,
  .export-copy .export-tabs>button[aria-current=step] {
    display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
    min-height:60px; padding:16px 18px; gap:0; border-bottom:0;
    border-left:2px dashed #525252; font-size:17px; line-height:1.35;
    font-weight:500; color:#a3a3a3;
  }
  .export-copy .export-tabs>button[aria-current=step] { border-left:2px solid #9e99f8; color:#fafafa; }
  .export-tabs>button[aria-current=step] .export-mobile-step {
    display:inline-flex; align-items:center; min-height:32px; padding:6px 12px;
    border-radius:20px; background:#221e6c; color:#cfccfb;
    font-size:13px; line-height:1.4; font-weight:500; margin-bottom:12px;
  }
  .export-tabs>button[aria-current=step] .export-mobile-description {
    display:block; min-height:63px; margin-top:8px; font-size:14px; line-height:1.5;
    font-weight:400; color:#a3a3a3;
  }
  .export-scroll-track .export-stage { padding:0; border:0; border-radius:12px; background:transparent; }
  .export-stage video { border:0; }

  /* Two staggered rows extend beyond the screen and fade at both edges. */
  .integrations-gallery,.integrations-gallery[data-integrations-enhanced] {
    display:block; width:calc(100% + 40px); margin-left:-20px; margin-top:32px;
    overflow:hidden;
    mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
    -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  }
  .integrations-gallery .integration-row { overflow:hidden; }
  .integrations-gallery .integration-row+.integration-row { margin-top:12px; }
  .integrations-gallery .integration-track { display:flex; width:max-content; margin-left:-48px; }
  .integrations-gallery .integration-row:nth-child(2) .integration-track { margin-left:-112px; }
  .integrations-gallery .integration-group { display:flex; gap:12px; padding-right:12px; }
  .integrations-gallery .integration-card { width:160px; height:120px; min-height:0;
    flex-shrink:0; padding:16px; border-radius:16px; border:0; }
  .integration-use { white-space:normal; }
  /* Retain both rows with native horizontal browsing when motion is disabled. */
  .integrations-gallery:not([data-integrations-enhanced]) .integration-row {
    overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain;
  }
  .integrations-gallery:not([data-integrations-enhanced]) .integration-track { margin-left:0; padding-left:20px; }
  .integrations-gallery:not([data-integrations-enhanced]) .integration-row:nth-child(2) .integration-track { margin-left:0; padding-left:44px; }
  .integrations-gallery:not([data-integrations-enhanced]) .integration-duplicate { display:none; }
  .integrations-gallery .integration-row::-webkit-scrollbar { display:none; }
  .testimonial-card { flex-basis:100%; padding:24px; }
  .testimonial-controls { justify-content:center; }
  .testimonial-controls .button { width:44px; height:44px; min-height:44px; }
  .pricing-grid { grid-template-columns:minmax(0,1fr); gap:16px; margin-top:28px; }
  .price-card { padding:24px; }
  .plan-positioning { min-height:0; font-size:16px; }
  .price-card ul { min-height:0; }
  .price-card li { font-size:15px; }
  .enterprise { flex-direction:column; align-items:flex-start; padding:24px; gap:12px; }
  .enterprise p { max-width:none; font-size:14px; }
  .enterprise :is(a,button) { min-height:44px; font-size:14px; gap:6px; align-items:center; }
  .faq details p { font-size:16px; line-height:1.6; }
  .faq summary { min-height:64px; font-size:16px; }
  .footer-main { grid-template-columns:1fr 1fr; gap:28px 24px; }
  .footer-brand { grid-column:1/-1; }
  .footer-column { font-size:14px; gap:0; }
  .footer-column>a,.footer-column>button { display:flex; align-items:center; min-height:44px; }
  .footer-brand>p { font-size:14px; }
  .site-footer .footer-bottom { font-size:12px; line-height:1.5; }

  .download-navigation { width:calc(100% - 40px); }
  .download-navigation nav { margin-right:0; gap:20px; font-size:14px; }
  .download-navigation nav a { display:flex; align-items:center; min-height:44px; }
  .download-main { width:calc(100% - 40px); margin-top:24px; }
  .download-main h1 { font-size:clamp(40px,11vw,56px); margin-bottom:36px; }
  .download-status { max-width:100%; font-size:14px; border-radius:16px; }
  .onboarding-grid { max-width:440px; gap:32px; }
  .onboarding-step { display:block; }
  .onboarding-step h2 { font-size:18px; margin-top:18px; }
  .onboarding-step>p { font-size:16px; margin-top:8px; max-width:none; }
  .onboarding-art { height:auto; min-height:248px; padding:20px; }
  .installer-window { width:80%; min-height:204px; font-size:14px; }
  .installer-window-label { font-size:12px; }
  .category-window { width:100%; padding:20px; }
  .category-window h3 { font-size:18px; }
  .category-options>span { font-size:14px; min-height:44px; }
  .research-onboarding { padding:20px; }
  .onboarding-reference { min-width:0; width:100%; height:220px; }
  .onboarding-reference>span { font-size:14px; }
  .onboarding-reference>img { width:100%; max-width:100%; height:auto; }
  dialog { padding:24px; max-height:calc(100dvh - 32px); overflow:auto; }
  dialog p { font-size:16px; }
  .dialog-close { width:44px; height:44px; top:4px; right:4px; }
}
@media (max-width: 360px) {
  .toolkit-panels { gap:8px; }
  .toolkit-option { padding:8px; }
  .toolkit-panel-heading { padding-inline:4px; }
  .toolkit-option-name { font-size:14px; }
  .navigation .nav-download { flex-basis:112px; width:112px; min-width:112px; }
  .nav-mobile-name { font-size:22px; }
  .product-menu .menu-card { padding:14px; column-gap:12px; }
  .export-copy .export-tabs>button { font-size:16px; padding-inline:14px; }
}

/* Shorter desktop pause between the story and Research. */
@media (min-width:768px) {
  .problem-outro { height:280px; }
}

@media(max-width:768px){
  .download-page .download-main{--confirmation-edge-gap:40px;width:100%;max-width:none;margin:0;padding:calc(72px + var(--confirmation-edge-gap)) 20px var(--confirmation-edge-gap)}
  .download-content{width:100%;max-width:430px;margin:0 auto}
  .download-intro{margin-bottom:48px}
  .download-page .download-intro h1{font-size:clamp(40px,12vw,52px);line-height:1.04;letter-spacing:-2.4px;margin:0}
  .download-intro>p{font-size:16px;line-height:1.45}
  .download-intro>p:first-of-type{margin-top:22px}
  .download-intro>p+p{margin-top:6px}
  .download-page .onboarding-grid{display:grid;grid-template-columns:1fr;gap:44px;max-width:none}
  .download-page .onboarding-step{display:block}
  .download-page .onboarding-art{height:auto;min-height:0;aspect-ratio:16/10;padding:0;border-radius:12px}
  .download-page .onboarding-art img{width:100%;height:100%;max-width:none;object-fit:cover}
  .download-page .onboarding-step>p{max-width:330px;margin:18px auto 0;font-size:16px;line-height:1.45}
}
@media(max-width:380px){
  .download-page .download-main{padding-inline:16px}
}