/* Shared mobile usability across the application, guide and confirmation page. */
:root{--df-touch:44px}img,svg{max-width:100%}button,a,summary{-webkit-tap-highlight-color:transparent}button,summary,a[data-slot="button"],.button{touch-action:manipulation}main{min-width:0}a,button,summary{scroll-margin-block:100px}
@media(max-width:767px){
  html{scroll-padding-top:96px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  #root,main,#main-content,main>*,article,section>div{min-width:0}
  #root main h1{font-size:clamp(28px,7.8vw,38px);line-height:1.4;letter-spacing:-.035em;overflow-wrap:break-word}
  #root main h2{font-size:clamp(25px,6.5vw,32px);line-height:1.45;overflow-wrap:break-word}
  #root main h3{line-height:1.5}
  #root [data-slot="button"]{min-height:48px;max-width:100%;height:auto;white-space:normal;line-height:1.65;text-align:center;padding-block:11px}
  #root [data-slot="button"]>svg{flex-shrink:0}
  #root .df-site-header button{min-width:44px;min-height:44px;padding:10px}
  #root .df-site-header{padding-block:12px}
  [data-slot="sheet-content"]{width:min(320px,calc(100vw - 28px))!important;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding-bottom:max(20px,env(safe-area-inset-bottom))}
  [data-slot="sheet-content"]>button{width:44px;min-width:44px;height:44px;min-height:44px;display:grid;place-items:center;top:10px;right:10px;opacity:1}
  [data-slot="sheet-content"] a{min-height:48px;display:flex;align-items:center;line-height:1.5}
  #root footer nav a{display:flex;align-items:center;min-height:44px;padding-block:9px;font-size:14px}
  #root footer nav{gap:2px}
  #root main>section:first-child:not(.df-hero),#root main>header:first-child{padding-top:110px;padding-bottom:48px}
  #root main>section:first-child p,#root main>header:first-child p{font-size:16px;line-height:1.95}
  #root main>article{padding-block:35px}
  #root main>article p{font-size:16px;line-height:2.05;overflow-wrap:break-word}
  #root main>article>p:first-child{font-size:17px;line-height:1.95;padding-inline-start:16px;margin-bottom:29px}
  #root main>article h2{margin-top:28px}
  #root main>article a{overflow-wrap:anywhere;text-underline-offset:4px}
  #root .df-calculator-card{padding:19px;gap:25px;border-radius:22px}
  #root .df-calc-field>div:first-child{flex-direction:column;align-items:stretch;gap:12px}
  #root .df-calc-field>div:first-child>div{width:100%;justify-content:space-between}
  #root .df-calc-field button{min-width:44px;min-height:44px}
  #root .df-calculator [data-slot="slider"]{min-height:44px;padding-block:14px;touch-action:pan-y}
  #root .df-calculator [role="slider"]{position:relative;touch-action:none}
  #root .df-calculator [role="slider"]:after{content:"";position:absolute;inset:-10px;border-radius:50%}
  #root .df-calc-results{min-width:0;padding:20px}
  #root .df-calc-results .tabular-nums{font-size:clamp(25px,7vw,36px);line-height:1.5}
  #root .df-faq button{min-height:56px;font-size:15px;line-height:1.7;gap:12px}
  #root .df-faq button svg{flex-shrink:0}
  #root .df-demo-badge,#root .df-small-label{font-size:12px}
  #root .df-demo-note{font-size:12px;line-height:1.95}
  #root .df-guide-preview figcaption{flex-wrap:wrap;justify-content:center;line-height:1.8}
  #root .df-home .df-hero h1 .whitespace-nowrap{white-space:normal}
  #root .df-home>section:not(.df-hero){padding-block:52px}
  #root [data-slot="accordion-content"]{font-size:15px;line-height:1.95}
  .guide-toc li a{min-height:44px;align-items:center;font-size:12px;padding-block:10px}
  .guide-toc summary,.mobile-menu>summary{min-height:44px;min-width:44px}
  .header-inner>.button{min-height:44px}
  .guide-toc nav{max-height:min(55dvh,440px);overscroll-behavior:contain}
  .guide-article .prose>p{font-size:16px;line-height:2.05}
  .guide-article .example>p{font-size:14px;line-height:1.95}
  .guide-article .action-box ul{font-size:13px;line-height:1.95}
  .guide-article .action-box h3{font-size:14px}
  .guide-article .chart-heading>p,.guide-article .visual-heading>p{font-size:13px;line-height:1.9}
  .guide-article .chart figcaption,.guide-article .visual-panel>figcaption{font-size:11px;line-height:1.9}
  .guide-article .metric-caption{font-size:11px}
  .guide-article .metric-card p{font-size:10px;line-height:1.9}
  .guide-article .assumption-label{font-size:10px;line-height:1.8}
  .guide-article .data-details summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-size:12px}
  .guide-article .table-scroll{max-width:100%;overscroll-behavior-x:contain}
  .guide-article table{font-size:12px}
  .guide-article .scenario-result strong{font-size:clamp(24px,6.5vw,30px)}
  .guide-article .resource-card>p,.guide-article .next-step p{font-size:14px;line-height:1.95}
  .guide-article .continue-reading{scroll-margin-top:140px}
  .guide-article .scenario-controls button{min-height:44px}
  .resource-copy p{font-size:14px}
  .resource-link,.page-footer a{min-height:48px}
  .preparation-intro p,.question-panel li p{font-size:15px}
  .email-link{min-height:48px}
}
@media(max-width:400px){
  .guide-hero .hero-copy h1{font-size:clamp(31px,8vw,36px)}
  .site-header .header-inner>.button{display:none}
  .site-header .mobile-menu{margin-inline-start:auto}
  .guide-article .metric-grid{grid-template-columns:minmax(0,1fr)}
  .guide-article .metric-card{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;padding:17px}
  .guide-article .metric-card strong{font-size:26px;margin:0}
  .guide-article .metric-card p{grid-column:1/-1;margin:0;font-size:11px}
  .guide-article .cost-legend li{flex-wrap:wrap;row-gap:2px}
  .guide-article .cost-legend strong{font-size:12px}
  #root .df-lead-fields{column-gap:12px}
  #root .df-lead-field dd{font-size:13px}
  #root .df-site-header .df-wordmark{font-size:14px;letter-spacing:.1em}
}
@media(max-height:500px) and (max-width:999px){
  .guide-toc nav{max-height:45dvh}.toc-column{position:relative;top:0}.mobile-cta{position:static}.site-footer{padding-bottom:25px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* On stacked layouts, lead with the existing project photograph. */
@media(max-width:1023px){
  .df-home .df-hero{padding-top:96px}
  .df-home .df-hero>div.relative.mx-auto.grid{gap:28px}
  .df-home .df-hero .df-hero-visual{order:-1;display:block;width:100%;max-width:640px}
  .df-home .df-hero .df-hero-frame{width:100%;border-radius:22px}
  .df-home .df-hero .df-hero-frame>img{display:block;width:100%;height:auto;aspect-ratio:16/10;max-height:360px;object-fit:cover;object-position:center 28%}
  .df-home .df-hero .df-hero-frame>div{padding:42px 16px 14px}
  .df-home .df-hero .df-hero-frame>div>p:first-child{font-size:18px;line-height:1.45}
  .df-home .df-hero .df-hero-frame>div>p+p{font-size:12px;line-height:1.65}
  .df-home .df-hero .df-float-chip,.df-home .df-hero .df-hero-visual:after{display:none}
}
/* Larger type for phone reading, with chart labels reflowing instead of shrinking. */
@media(max-width:767px){
  body{font-size:18px;line-height:1.9}
  #root main p,#root main>article p,#root main>article>p:first-child{font-size:18px;line-height:1.95}
  #root main li{font-size:17px;line-height:1.85}
  #root .text-xs,#root .df-small-label,#root .df-lead-field dt,#root .df-demo-badge,#root .df-demo-note{font-size:14px;line-height:1.85}
  #root .text-sm,#root .df-lead-field dd,#root .df-text-link{font-size:16px;line-height:1.85}
  #root [data-slot="button"],[data-slot="sheet-content"] a{font-size:16px;line-height:1.65}
  #root footer p,#root footer nav a{font-size:16px;line-height:1.9}
  #root footer .text-xs{font-size:14px}
  #root .df-faq button{font-size:17px}
  #root .df-project-chips span{font-size:14px;line-height:1.65}
  .guide-hero .hero-description,.guide-intro p,.guide-article .prose>p{font-size:18px;line-height:1.95}
  .guide-article .chapter-intro,.guide-article .example>p,.guide-article .action-box ul,.guide-article .next-step p,.guide-article .resource-card>p{font-size:16px;line-height:1.95}
  .guide-article .action-box h3,.guide-toc li a,.guide-toc summary,.button,.text-link{font-size:16px;line-height:1.7}
  .guide-article .chart-heading>p,.guide-article .visual-heading>p,.guide-article .chart figcaption,.guide-article .visual-panel>figcaption,.guide-article .assumption-label{font-size:14px;line-height:1.85}
  .guide-article .scenario-row{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;line-height:1.6}
  .guide-article .scenario-row>span,.guide-article .scenario-row>strong{font-size:14px}
  .guide-article .scenario-row>.bar-track{grid-column:1/-1;grid-row:2;height:14px}
  .guide-article .scenario-result>div>span,.guide-article .scenario-result small,.guide-article .metric-caption,.guide-article .metric-card p{font-size:14px;line-height:1.85}
  .guide-article .metric-grid{grid-template-columns:minmax(0,1fr)}
  .guide-article .response-label{font-size:14px;align-items:center}
  .guide-article .funnel h4,.guide-article .timeline h4,.guide-article .fit-grid h4,.guide-article .experience-card h4,.guide-article .field-layout h4{font-size:16px;line-height:1.7}
  .guide-article .funnel p,.guide-article .timeline p,.guide-article .fit-grid p,.guide-article .experience-card p,.guide-article .field-layout li p,.guide-article .case-story p{font-size:14px;line-height:1.85}
  .guide-article .timeline,.guide-article .fit-grid,.guide-article .field-layout>ol{grid-template-columns:minmax(0,1fr)}
  .guide-article .funnel li{grid-template-columns:85px minmax(0,1fr);gap:12px}
  .guide-article .cost-legend li,.guide-article .cost-legend strong,.guide-article table{font-size:14px}
  .guide-article .guide-checklist li{font-size:16px;line-height:1.9}
  .guide-article .decision-flow h4,.guide-article .conversation-path h4{font-size:17px}
  .guide-article .decision-flow p,.guide-article .decision-flow strong,.guide-article .conversation-path p,.guide-article .blueprint-copy>p{font-size:14px;line-height:1.85}
  .resource-copy p,.welcome-message,.preparation-intro p,.question-panel li p{font-size:18px;line-height:1.95}
  .resource-link,.email-link,.resource-copy h3{font-size:16px}
  .welcome-note,.calculation-note,.question-note,.contact-section p,.page-footer{font-size:14px;line-height:1.85}
  .df-home .df-hero .df-hero-frame>div>p+p{font-size:14px}
}

/* Keep both actions within the opening phone viewport. */
@media(max-width:767px){
 #root .df-home .df-hero{padding-top:88px;padding-bottom:32px}
 #root .df-home .df-hero>div.relative.mx-auto.grid{gap:16px}
 #root .df-home .df-hero .df-hero-frame>img{height:clamp(190px,31svh,260px);max-height:260px;aspect-ratio:auto;object-position:center 30%}
 #root .df-home .df-hero .df-hero-frame>div{padding:30px 14px 10px}
 #root .df-home .df-hero .df-hero-frame>div>p:first-child{font-size:16px}
 #root .df-home .df-hero .df-hero-frame>div>p+p{display:none}
 #root .df-home .df-hero>div.relative.mx-auto.grid>div:first-child{gap:14px}
 #root .df-home .df-hero>div.relative.mx-auto.grid>div:first-child>span{display:none}
 #root .df-home .df-hero h1{order:0;font-size:clamp(24px,6.7vw,30px);line-height:1.22}
 #root .df-home .df-hero>div.relative.mx-auto.grid>div:first-child>div{order:1;width:100%;display:grid;grid-template-columns:1fr;gap:8px}
 #root .df-home .df-hero>div.relative.mx-auto.grid>div:first-child>div a{width:100%;min-height:46px;height:auto;padding:10px 12px;font-size:16px;line-height:1.4}
 #root .df-home .df-hero>div.relative.mx-auto.grid>div:first-child>p{order:2;margin-top:4px}
 #root .df-home .df-hero>div.relative.mx-auto.grid>div:first-child>ul{order:3}
}

@media(max-width:767px){
 #root .df-home .df-hero .df-hero-frame{border:0;border-radius:0;box-shadow:none;outline:0}
 #root .df-home .df-hero .df-hero-visual>div:first-child{display:none}
 #root .df-home .df-hero .df-hero-frame>img{border:0;border-radius:0;box-shadow:none}
}

/* Edge-to-edge hero photo without viewport-width overflow. */
@media(max-width:767px){
 #root .df-home .df-hero>div.relative.mx-auto.grid{padding-inline:0}
 #root .df-home .df-hero>div.relative.mx-auto.grid>div:first-child{padding-inline:20px;min-width:0}
 #root .df-home .df-hero .df-hero-visual{width:100%;max-width:none;margin-inline:0;min-width:0}
 #root .df-home .df-hero .df-hero-frame{width:100%;border:0;border-radius:0;box-shadow:none}
}