/* Homepage mobile contract: docs/DESIGN_SYSTEM.md. Loaded after component styles. */
:root{--home-section-title-size:40px}
/* Uniform homepage H2 size overrides the legacy section-specific sizes. */
.home-page h2{font-size:var(--home-section-title-size)!important;line-height:1.14}
.home-page .hero-proof .proof-mobile{display:none}
.mobile-compare-control{display:none}
@media(max-width:900px){
  nav.site-nav{padding:0;background:#fff}
  .site-nav .nav-surface{border:0;border-bottom:1px solid var(--line);border-radius:0;background:#fff}
  .site-nav .nav-in{height:64px;padding-inline:20px;gap:8px}
  .site-nav .logo{flex-shrink:0}
  .site-nav .logo img{width:88px;height:auto}
  .site-nav .nav-actions{margin-left:auto}
  .site-nav .nav-cta{min-height:44px;padding:10px 14px;font-size:14px}
  .site-nav .nav-mobile{display:block;margin-left:0}
  .site-nav .nav-mobile summary{border:0;border-radius:50%}
  .nav-mobile-panel{position:absolute;top:64px;left:0;right:0;max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain;padding:16px 20px calc(24px + env(safe-area-inset-bottom));background:#fff;border-bottom:1px solid var(--line);box-shadow:0 20px 30px #0000000d}
  .nav-mobile-panel a:not(.btn){display:flex;align-items:center;min-height:52px;font-size:18px}
  .nav-mobile-panel .btn{min-height:52px}
  body.mobile-menu-open{overflow:hidden}
  .page-flow [id]{scroll-margin-top:88px}
}
@media(max-width:700px){
  :root{--home-section-title-size:32px;--grid-gutter:20px;--section-space-mobile:64px;--story-gap-stack:32px}
  .hero{padding:40px 0 32px}
  .hero h1{font-size:clamp(36px,10.2vw,44px);line-height:1.07;letter-spacing:-.045em;text-wrap:balance}
  .hero-google{justify-content:flex-start;min-height:1.1em}
  .hero h1{min-height:3.21em;text-align:left}
  .hero .sub{text-align:left}
  .home-page :is(.head,.fd-heading,.compare-matrix-heading,.pricing-intro,.founder-story-copy,.faq-category-head),.home-page h2{text-align:left!important}
  .home-page :is(.head,.fd-heading,.compare-matrix-heading) .eyebrow{margin-left:0}
  .home-page .hero-proof{justify-content:flex-start;justify-items:start}
  .home-page .hero-proof li{justify-content:flex-start;text-align:left}
  .hero .sub{font-size:18px;line-height:28px;margin:20px auto 24px;max-width:38ch}
  .hero .btn.btn-lg{width:100%;min-height:56px}
  .hero .hero-proof{margin-top:20px;gap:8px 12px}
  .hero-video-frame{margin:40px calc(-1 * var(--grid-gutter)) 0}
  .hero-video-box{border-radius:0}
  .hero-video-icon{width:56px}
  .page-flow>:is(.problem-section,.solution-section,.integrations,.examples,.pricing-section,.trust-section,.decision-section,.founder-section,.faq){padding-block:64px}
  #before-after-duplicate.problem-workflow{padding-block:64px}
  .page-flow h2,#feature-details .fd-grid>article.fd-card.fd-card--wide .fd-copy h3{font-size:clamp(30px,7.8vw,34px);line-height:1.14;letter-spacing:-.04em;text-wrap:pretty}
  #before-after-duplicate-copy-2 .sol-card{grid-template-columns:minmax(0,1fr);min-width:0;margin-bottom:36px;gap:20px}
  #before-after-duplicate-copy-2 .sol-card-copy{width:100%;min-width:0;max-width:100%;margin:0}
  #before-after-duplicate-copy-2 .sol-card-copy>p{width:auto;max-width:100%;font-size:20px;line-height:30px;text-align:center}
  #before-after-duplicate .pw-problems-head{margin-bottom:24px}
  .pw-problem{min-height:56px}
  .pw-problem-title,.fd-brand-accordion .pw-problem-title{font-size:18px;line-height:26px}
  #before-after-duplicate .pw-stage{min-height:0;padding:48px 0 0 48px}
  #solution .solution-visual{padding:0;gap:32px}
  #solution .solution-copy{grid-row:1}
  #solution .sv-stage{grid-row:2;height:auto;padding:48px 0 0 48px}
  #solution .sv-back{height:auto}
  #solution .solution-copy .head,#solution .solution-copy .head h2{text-align:left}
  #solution .solution-actions .btn{width:100%;min-height:52px}
  .integration-grid{padding-inline:0}
  .integration-items{grid-template-columns:repeat(3,minmax(0,1fr));border-radius:20px}
  .integration-items .integration-card{min-height:116px;align-items:center;justify-content:center;padding:16px 6px;gap:10px;border-right:1px solid var(--line);border-bottom:0}
  .integration-items .integration-card:nth-child(3n){border-right:0}
  .integration-items .integration-card:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .integration-card strong{font-size:15px;line-height:22px}
  .integration-icon,.integration-icon img{width:40px;height:40px}
  #feature-details{padding:0}
  #feature-details .fd-grid>article.fd-card.fd-card--wide{padding:32px 0;gap:28px}
  #feature-details .fd-grid>article.fd-card.fd-card--wide .fd-copy{min-height:0}
  #feature-details .fd-copy .btn{width:100%;min-height:52px}
  #feature-details .fd-card--brand .brand-flow{min-height:0;padding:32px 0 0 32px}
  .bf-canvas{min-height:0;padding:32px 24px 40px}
  .bf-input{padding:9px 10px}
  #feature-details .fd-card--languages-duplicate .fd-scene--mapping{height:auto;min-height:0;padding:40px 40px 0 0;border-radius:22px;align-items:flex-start;justify-content:flex-start;aspect-ratio:auto}
  .fd-editor-preview{height:auto;flex:none;align-self:flex-start;border-radius:0 14px 0 0}
  .ep-workspace{grid-template-columns:minmax(0,1fr);flex:none;overflow:visible}
  .ep-workspace .ep-article{display:none}
  .ep-insights{overflow:visible;border:0;transform:none}
  .ep-tabs{margin:12px 16px 0}
  .ep-score-block{padding:12px 16px}
  .ep-score span,.ep-stats span{font-size:11px}
  .ep-stats b{font-size:14px}
  .ep-panel-section summary{min-height:44px;padding:12px 16px;font-size:14px}
  .ep-coverage{padding:8px 12px 16px;gap:4px}
  .ep-metric{font-size:10px}
  .ep-metric-ring{width:32px;height:32px}
  .ep-metric-ring b{font-size:10px}
  .fd-editor-preview .ep-topic{min-height:44px;font-size:12px;padding:8px 10px}
  #feature-details .fd-scene--languages .fd-language-directory,#feature-details .fd-scene--languages .fd-language-cloud{width:100%;max-width:none}
  .fd-language-search input{font-size:16px;min-height:48px}
  #pricing .offer-panel--dark .offer-summary{padding:48px;border-radius:24px}
  #pricing .offer-panel--dark .offer-features{padding:48px}
  #pricing .offer-panel--dark .offer-list{grid-template-columns:minmax(0,1fr);gap:0}
  #pricing .offer-panel--dark .offer-list li{min-height:36px}
  #pricing .offer-toggle{width:100%}
  #pricing .offer-toggle-btn{min-height:44px;flex:1;min-width:0;padding-inline:6px;flex-wrap:wrap;gap:4px}
  #pricing .offer-toggle-badge{font-size:10px;padding-inline:4px}
  #pricing .offer-list{padding:0}
  #pricing .offer-plan h3{flex-wrap:wrap}
  #pricing .offer-panel--dark .offer-plan>.btn.btn-lg{width:100%}
  #pricing .offer-panel--dark .offer-proof li{white-space:normal}
  .writing-example-carousel{padding-inline:0}
  .examples-carousel-controls{grid-template-columns:1fr 44px 44px;height:44px;gap:12px}
  .examples-carousel-controls button,.example-preview-close{width:44px;height:44px}
  .example-preview-dialog{max-height:calc(100dvh - 32px);overscroll-behavior:contain}
  .example-preview-content{padding:24px 20px}
  .mobile-compare-control{display:grid;gap:8px;margin:24px 0 16px;font-size:14px;font-weight:500}
  .mobile-compare-control .segmented-control{display:flex;width:100%;gap:2px}
  .mobile-compare-control [role="tab"]{flex:1;min-width:0;min-height:44px;padding:8px 4px;font-size:14px}
  .compare-matrix[data-mobile-option]{min-width:0;font-size:14px;line-height:20px}
  .compare-matrix[data-mobile-option] colgroup{display:none}
  .compare-matrix[data-mobile-option] tr>:first-child{width:50%}
  .compare-matrix[data-mobile-option] tr>:not(:first-child){width:25%;padding:10px 4px}
  .compare-matrix[data-mobile-option] tr>:first-child{padding:12px 10px 12px 0}
  .compare-matrix[data-mobile-option="2"] tr>:is(:nth-child(3),:nth-child(4)),
  .compare-matrix[data-mobile-option="3"] tr>:is(:nth-child(2),:nth-child(4)),
  .compare-matrix[data-mobile-option="4"] tr>:is(:nth-child(2),:nth-child(3)){display:none}
  .compare-matrix[data-mobile-option] img{width:64px;max-width:90%}
  .compare-matrix[data-mobile-option] thead th{height:64px}
  #trust .trust-grid{padding-inline:0}
  #problem-duplicate-title-copy-2{text-wrap:pretty}
  #problem-duplicate-title-copy-2 .mobile-heading-line{white-space:normal}
  :is(#before-after-duplicate,.fd-brand-accordion) .pw-tags{display:none}
  #pw-solutions .pw-modules{gap:2px}
  #pw-solutions .pw-module{min-height:44px;padding:8px 32px;grid-template-columns:18px minmax(0,1fr);gap:10px}
  #pw-solutions .pw-module strong{font-size:15px}
  #pw-solutions .pw-module .compare-mark.is-yes{width:18px;height:18px}
  #pw-solutions .pw-module .compare-mark.is-yes svg{width:12px;height:12px}
  #solution .sv-grid{width:100%;min-width:0;grid-template-columns:repeat(2,minmax(0,1fr))}
  #solution .sv-grid .sv-day:nth-child(n){display:none}
  #solution .sv-grid .sv-day:is(:nth-child(3),:nth-child(4),:nth-child(10),:nth-child(11)){display:block}
  #solution .sv-cal{font-size:7px}
  #solution .sv-toolbar .sv-control{font-size:12px}
  #solution .sv-month{flex-wrap:wrap}
  #solution .sv-month strong{font-size:13px;margin-left:0}
  #solution .sv-stats .sv-control{font-size:11px}
  #solution .sv-stats{transform:none}
  #solution .sv-day{aspect-ratio:1}
  #solution .sv-art{left:9%;width:82%;font-size:5.9cqw;padding:6%}
  #solution .sv-art[data-status="writing"]{animation-name:svMobileWriting;transform:translateY(-.18em) scale(1.15)}
  #solution .sv-art[data-status="published"]{animation-name:svMobilePublished}
  @keyframes svMobileWriting{from{transform:translateY(-.18em) scale(1)}to{transform:translateY(-.18em) scale(1.15)}}
  @keyframes svMobilePublished{from{transform:translateY(-.18em) scale(1.15)}to{transform:none}}
  #solution .sv-topbar{flex-wrap:wrap}
  #solution .sv-toolbar{flex-wrap:wrap}
  #solution .sv-stats{flex-wrap:wrap}
  #solution .sv-grid .sv-day:is(:nth-child(3),:nth-child(10)) .sv-art{transform-origin:left center}
  #solution .sv-grid .sv-day:is(:nth-child(4),:nth-child(11)) .sv-art{transform-origin:right center}
  #feature-details .fd-card--languages:not(.fd-card--languages-duplicate) .fd-scene--mapping{height:auto;padding:40px 0 0 40px;display:block}
  #feature-details .fd-scene--languages .fd-language-directory{position:relative;inset:auto;margin:0;width:100%;height:auto}
  #feature-details .fd-scene--languages .fd-language-cloud{aspect-ratio:auto;height:360px}
  #pricing-alt .fd-heading{width:calc(100% - var(--grid-gutter)*2);margin-inline:auto;padding-inline:0}
  #writing-examples .writing-example-card{flex-basis:calc((100% - 16px)/2.5)}
  #writing-examples .writing-example-body{padding:10px}
  #writing-examples .writing-example-body h3{font-size:18px;line-height:22px}
  #writing-examples .writing-example-body .article-type{font-size:10px;line-height:14px;padding:4px 6px}
  #pricing{padding-bottom:0}
  #trust{padding-top:24px}
  #trust .trust-card{flex-direction:row;align-items:center;gap:16px;padding:20px 16px}
  #trust .trust-card h3{font-size:18px;line-height:24px}
  #trust .trust-description{font-size:14px;line-height:22px}
  .faq-panel{width:calc(100% - var(--grid-gutter)*2)}
  .faq summary{padding:20px 0;font-size:18px}
  .faq details>p>span{padding:0 0 20px;font-size:16px;line-height:26px}
  .home-footer>.wrap{padding:40px 0}
  .home-footer-main{gap:28px 20px}
  .home-footer-column ul{gap:0}
  .home-footer-column h3{margin-bottom:12px}
  .home-footer-column a,.home-footer-legal a{display:flex;align-items:center;min-height:44px}
  .home-footer-social a{width:44px;height:44px}
}
@media(max-width:360px){
  :root{--grid-gutter:16px}
  .site-nav .nav-in{padding-inline:12px}
  .site-nav .nav-cta{padding-inline:10px;font-size:13px}
  .site-nav .logo img{width:78px}
  .hero h1{font-size:36px}
  .hero-google{font-size:.86em}
  .integration-items{grid-template-columns:repeat(2,minmax(0,1fr))}
  .integration-items .integration-card{border-right:1px solid var(--line)}
  .integration-items .integration-card:nth-child(2n){border-right:0}
  .integration-items .integration-card:nth-child(-n+4){border-bottom:1px solid var(--line)}
}

/* User-approved centered intro/outro and image-first mobile storytelling. */
@media(max-width:700px){
  #top h1,#top .sub{text-align:center}
  #top .hero-google{justify-content:center}
  #top .sub{width:270px;max-width:100%;margin-inline:auto}
  #top .btn.btn-lg{width:270px;max-width:100%;margin-inline:auto}
  .home-page :is(#top,#start) .hero-proof{display:flex;width:270px;max-width:100%;margin-inline:auto;justify-content:center}
  .home-page :is(#top,#start) .hero-proof .proof-desktop{display:none}
  .home-page :is(#top,#start) .hero-proof .proof-mobile{display:flex;align-items:flex-start;white-space:normal;line-height:22px;text-align:center}
  .proof-mobile .hero-proof-icon{margin-top:3px}
  #problem-duplicate-title-copy-2>br{display:none}
  #problem-duplicate-title-copy-2{text-wrap:initial}
  #before-after-duplicate .pw-platform{grid-row:1}
  #before-after-duplicate .pw-problems{grid-row:2}
  #solution .sv-stage{grid-row:1}
  #solution .solution-copy{grid-row:2}
  #feature-details .fd-grid>article.fd-card.fd-card--wide .fd-scene{grid-row:1}
  #feature-details .fd-grid>article.fd-card.fd-card--wide .fd-copy{grid-row:2}
  #before-after-duplicate-copy-2 .sol-card-copy{grid-row:2}
  #before-after-duplicate-copy-2 .head{text-align:center!important}
  .home-page #problem-duplicate-title-copy-2{text-align:center!important}
  #before-after-duplicate-copy-2 .head .eyebrow{margin-inline:auto}
  #before-after-duplicate-copy-2 .sol-card-copy>p{width:260px;max-width:100%;margin-inline:auto}
  #before-after-duplicate .pw-problems{width:260px;max-width:100%;margin-inline:auto}
  #founder-story .founder-story-copy{width:260px;max-width:100%;margin-inline:auto;text-align:center}
  .home-page #founder-story h2,.home-page #faq .head,.home-page #faq h2,.home-page #start h2{text-align:center!important}
  #faq .head .eyebrow{margin-inline:auto}
  #start .final-surface{padding:12px}
  #start .final-inner{padding-inline:0}
  #start #publishSignal{width:calc(100% - 24px)}
  #start h2{width:260px;max-width:100%;margin-inline:auto}
  #start .btn.btn-lg{width:260px;max-width:100%;margin-inline:auto}
  .home-page #start .hero-proof{width:260px}
  #footer.home-footer>.wrap{padding-left:20px}
}

@media(max-width:700px){
  #before-after-duplicate-copy-2 .sol-card{grid-template-rows:auto auto}
  #before-after-duplicate-copy-2 .sol-card .sol-mock{width:100%;height:210px;align-self:start;transform:none;font-size:14px}
  #how-connect .hs-frame{padding:24px;font-size:12px}
  #how-connect .hs-url{height:44px;padding:8px 10px;gap:8px;border-radius:12px}
  #how-connect .hs-url-text{font-size:16px}
  #how-connect .hs-globe{width:28px;height:28px;border-radius:8px}
  #how-connect .hs-globe svg{width:17px;height:17px}
  #how-connect .hs-logos{gap:8px;padding-top:12px;justify-content:center}
  #how-connect .hs-logo{flex:none;width:32px;height:32px;border-radius:8px;font-size:11px}
  #how-connect .hs-check{width:13px;height:13px;border-width:1px}
  #how-connect .hs-tip{font-size:11px;padding:5px 8px;bottom:-14px;left:6px;border-radius:6px}
  #how-connect .hs-connect{min-height:36px;height:36px;margin-top:16px;padding:8px;font-size:13px;border-radius:10px;line-height:20px}
  #before-after-duplicate-copy-2 .sm-row span,#before-after-duplicate-copy-2 .sm-row b{font-size:15px}
  #before-after-duplicate-copy-2 .sm-row svg{width:22px;height:16px}
  #before-after-duplicate-copy-2 .sm-editor{font-size:13px}
  #before-after-duplicate-copy-2 .sm-doc h5{font-size:18px}
  #before-after-duplicate-copy-2 .sm-doc p{font-size:13px}
  #before-after-duplicate-copy-2 .sm-pill{font-size:11px}
  #before-after-duplicate-copy-2 .sm-week i{width:22px;height:22px}
  #before-after-duplicate-copy-2 .sm-week i svg{width:13px;height:13px}
}

@media(max-width:700px){
  #before-after-duplicate-copy-2 #how-connect .sol-mock{height:140px}
  #how-connect .hs-frame{display:grid;grid-template-columns:max-content minmax(0,1fr);grid-template-rows:44px 36px;gap:12px;padding:20px;align-content:center;position:relative}
  #how-connect .hs-card{display:contents}
  #how-connect .hs-url{grid-column:1 / -1;grid-row:1}
  #how-connect .hs-logos{grid-column:1;grid-row:2;align-items:center;justify-content:flex-start;padding:0;gap:4px;min-width:0}
  #how-connect .hs-logo{width:32px;height:32px;font-size:11px}
  #how-connect .hs-connect{grid-column:2;grid-row:2;margin:0;padding:8px 4px;font-size:12px;white-space:nowrap;min-width:0}
  #how-connect .hs-tip{top:109px;bottom:auto;left:20px;font-size:10px;padding:4px 6px}
}
@media(max-width:360px){
  #how-connect .hs-frame{grid-template-columns:max-content minmax(0,1fr);gap:12px 8px}
  #how-connect .hs-logos{gap:3px}
  #how-connect .hs-logo{width:22px;height:22px;font-size:9px;border-radius:6px}
  #how-connect .hs-connect{font-size:10px}
}

@media(max-width:700px){
  .home-page #top .hero-proof .proof-mobile{width:fit-content;max-width:100%;text-align:left}
  #top .proof-mobile>span:last-child{width:fit-content;max-width:100%;text-align:left}
}

@media(max-width:700px){
  #before-after-duplicate-copy-2 .sol-card{row-gap:12px}
  #before-after-duplicate-copy-2 .sol-card-copy>p{width:300px;max-width:100%}
}

@media(max-width:700px){
  #before-after-duplicate-copy-2 .sol-cards{padding-top:0}
}

@media(max-width:700px){
  #before-after-duplicate-copy-2 .sol-card .sol-mock--blue{height:158px}
  #before-after-duplicate-copy-2 .sm-row{height:calc(100% / 3)}
}

@media(max-width:700px){
  #before-after-duplicate-copy-2 .sol-card .sol-mock--grow{height:180px}
  #before-after-duplicate-copy-2 .sol-mock--grow .hs-chart{box-sizing:border-box;padding-top:32px}
  #before-after-duplicate-copy-2 .hs-referral{font-size:12px;line-height:16px;max-width:100%}
  #before-after-duplicate-copy-2 .hs-referral img{width:16px;height:16px}
  #before-after-duplicate-copy-2 .hs-referral--google{bottom:calc((100% - 32px) * .4375 + 12px)}
  #before-after-duplicate-copy-2 .hs-referral--chatgpt{bottom:calc((100% - 32px) * .739583 + 12px)}
  #before-after-duplicate-copy-2 :is(.hs-referral-point--google,.hs-referral-stem--google){--point-y:calc(32px + (100% - 32px) * .5625)}
  #before-after-duplicate-copy-2 :is(.hs-referral-point--chatgpt,.hs-referral-stem--chatgpt){--point-y:calc(32px + (100% - 32px) * .260417)}
  #before-after-duplicate .pw-problems{width:100%;max-width:100%}
  #before-after-duplicate .pw-problem{cursor:default;opacity:1;color:var(--ink)}
  #before-after-duplicate .pw-problem-body{grid-template-rows:1fr;opacity:1;visibility:visible;transition:none}
  #before-after-duplicate .pw-problem-copy{max-width:100%}
  #before-after-duplicate .pw-problem-chevron,#before-after-duplicate .pw-problem::before,#before-after-duplicate .pw-problem::after,#pw-solutions .pw-module::before{display:none}
}

.sv-date{display:contents}
@media(max-width:700px){
  #how-connect .hs-tip{font-size:12px;line-height:16px;padding:4px 8px;top:106px}
  #before-after-duplicate-copy-2 .sm-row span,#before-after-duplicate-copy-2 .sm-row b{font-size:13px}
  #before-after-duplicate-copy-2 .sm-doc h5{font-size:16px}
  #before-after-duplicate-copy-2 .sm-tools{font-size:13px;gap:6px}
  #before-after-duplicate-copy-2 .sm-doc p{display:flex;align-items:center;gap:6px;font-size:14px;line-height:22px;-webkit-line-clamp:unset}
  #before-after-duplicate-copy-2 .sm-description{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #before-after-duplicate-copy-2 .sm-doc p .sm-pill{flex:none;margin-left:0;font-size:11px}
  #before-after-duplicate-copy-2 .hs-referral{font-size:14px;line-height:18px}
  #pw-solutions .pw-module{min-height:40px;padding:6px 16px 4px}
  #before-after-duplicate .pw-problem-copy{font-size:16px;line-height:24px}
  #before-after-duplicate .pw-problem{padding-block:12px}
  #before-after-duplicate .pw-problem:first-child{padding-top:0}
  #solution .sv-month{display:none}
  #solution .sv-stage{padding:32px 0 0 32px}
  #solution .sv-grid .sv-day{aspect-ratio:1.25;min-height:124px}
  #solution .sv-date{position:absolute;top:6px;left:0;width:100%;display:flex;align-items:center;justify-content:center;gap:5px}
  #solution .sv-date :is(.sv-weekday,i){position:static;width:auto;font-size:10px;line-height:16px}
  #solution .sv-grid .sv-day .sv-art,#solution .sv-grid .sv-day:nth-child(-n+7) .sv-art{top:26px;height:calc(100% - 34px);font-size:9px;padding:6px}
  #solution .sv-art p{margin-top:5px}
  #before-after-duplicate .pw-problems{grid-row:1}
  #before-after-duplicate .pw-platform{grid-row:2}
  #solution .solution-copy{grid-row:1}
  #solution .sv-stage{grid-row:2}
  #feature-details .fd-grid>article.fd-card.fd-card--wide .fd-copy{grid-row:1}
  #feature-details .fd-grid>article.fd-card.fd-card--wide .fd-scene{grid-row:2}
  #before-after-duplicate-copy-2 .sol-card-copy{grid-row:1}
  #before-after-duplicate-copy-2 .sol-card .sol-mock{grid-row:2}
}
@media(max-width:360px){
  #before-after-duplicate-copy-2 .sm-tools{gap:4px}
}

@media(max-width:700px){
  .home-page #top .hero-proof,.home-page #top .hero-proof .proof-mobile{width:320px;max-width:100%}
}

@media(max-width:700px){
  #founder-story .founder-story-copy{width:300px}
  #founder-story .founder-story-copy h2{width:260px;max-width:100%;margin-inline:auto}
  #founder-story .founder-story-text{width:300px;max-width:100%;margin-inline:auto;text-align:center}
  #before-after-duplicate-copy-2 .sol-card .sol-mock{grid-row:1}
  #before-after-duplicate-copy-2 .sol-card-copy{grid-row:2}
}

@media(max-width:700px){
  #before-after-duplicate-copy-2 .sol-card{width:calc(100% - 40px);margin-inline:auto}
}

@media(max-width:700px){
  .home-page .eyebrow{font-size:15px}
}

@media(max-width:700px){
  #before-after-duplicate-copy-2 .sol-card .sol-mock--write{height:188px}
}

@media(max-width:700px){
  #before-after-duplicate-copy-2 .sm-pill{background:#8857e8;box-shadow:none;filter:none}
  #before-after-duplicate .pw-problems{box-sizing:border-box;padding-inline:20px}
}

@media(max-width:700px){
  .home-page #before-after-duplicate .pw-problems-head,
  .home-page #before-after-duplicate .pw-problems-head h2{text-align:center!important}
}

@media(max-width:700px){
  #before-after-duplicate .pw-platform{grid-row:1}
  #before-after-duplicate .pw-problems{grid-row:2}
  #solution .sv-stage{grid-row:1}
  #solution .solution-copy{grid-row:2}
  #feature-details .fd-grid>article.fd-card.fd-card--wide .fd-scene{grid-row:1}
  #feature-details .fd-grid>article.fd-card.fd-card--wide .fd-copy{grid-row:2}
}

@media(max-width:700px){
  #before-after-duplicate .pw-shell{width:calc(100% - 80px);margin-inline:auto;padding-inline:0}
  #before-after-duplicate .pw-problems{padding-inline:0}
}

@media(max-width:700px){
  #pw-solutions .pw-module{padding-block:0;min-height:0}
}

@media(max-width:700px){
  #pw-solutions{box-sizing:border-box;padding-top:32px;padding-left:32px}
  #pw-solutions .pw-product-header{padding:0 0 12px}
  #pw-solutions .pw-modules{padding-bottom:20px}
  #pw-solutions .pw-module{padding:2px 16px 2px 0;grid-template-columns:16px minmax(0,1fr)}
  #pw-solutions .pw-module .compare-mark.is-yes{width:16px;height:16px}
  #pw-solutions .pw-module .compare-mark.is-yes svg{width:10px;height:10px}
}

/* Shared mobile rails requested for the remaining homepage sections. */
#solution .sv-day:nth-child(n+8) .sv-weekday{display:none}
@media(max-width:700px){
  .home-page :is(#solution,#integrations,#feature-details,#pricing-alt,#writing-examples,#pricing,#trust,#decision-compare-alt,#founder-story,#faq){--grid-gutter:40px}
  .home-page :is(#solution,#integrations,#feature-details,#pricing-alt,#writing-examples,#pricing,#trust,#decision-compare-alt,#founder-story,#faq)>:is(.grid-rail,.head,.writing-example-carousel){box-sizing:border-box;width:calc(100% - 80px);max-width:none;margin-inline:auto;padding-inline:0}
  .home-page #pricing .offer-panel--dark .offer-features{padding:20px}
  .home-page :is(#integrations,#writing-examples) .head,
  .home-page :is(#integrations,#writing-examples) .head h2,
  .home-page #pricing-alt .fd-heading,
  .home-page #pricing-alt .fd-heading h2,
  .home-page #decision-compare-alt .compare-matrix-heading,
  .home-page #decision-compare-alt .compare-matrix-heading h2,
  .home-page #feature-details .fd-card--wide:nth-of-type(n+2) .fd-copy,
  .home-page #feature-details .fd-card--wide:nth-of-type(n+2) .fd-copy h3{text-align:center!important}
  .home-page :is(#integrations,#writing-examples,#pricing-alt,#decision-compare-alt) .eyebrow{margin-inline:auto}
  .home-page #founder-story :is(.founder-story-copy,.founder-story-text,.founder-story-copy h2){width:100%;max-width:100%}
  .home-page .final-footer-shell{width:calc(100% - 80px);margin-inline:auto}
  .home-page .final-footer-shell :is(#start,#footer>.wrap){box-sizing:border-box;width:100%;max-width:none;margin-inline:0;padding-inline:0}
  #solution .sv-day:nth-child(n+8) .sv-weekday{display:inline}
}

@media(max-width:700px){
  #solution .solution-actions{justify-content:center}
  #solution .solution-actions .btn{max-width:270px;margin-inline:auto}
  .home-page #solution .solution-copy .head,
  .home-page #solution .solution-copy .head h2,
  .home-page #feature-details .fd-card--wide:first-of-type .fd-copy,
  .home-page #feature-details .fd-card--wide:first-of-type .fd-copy h3{text-align:center!important}
  #solution .solution-copy .eyebrow{margin-inline:auto}
  .home-page #pricing .offer-panel--dark .offer-features{padding-inline:0}
  #decision-compare-alt .mobile-compare-control{text-align:center}
  #decision-compare-alt .compare-mark.is-yes{width:22px;height:22px}
  #decision-compare-alt .compare-mark.is-yes svg{width:14px;height:14px}
  .home-page .final-footer-shell{width:100%;margin-inline:0}
  .home-page .final-footer-shell :is(#start,#footer>.wrap){width:calc(100% - 80px);margin-inline:auto;padding-inline:0}
}

@media(max-width:700px){
  .home-page #top .hero-proof .proof-mobile{justify-content:center;text-align:center}
  #top .proof-mobile>span:last-child{text-align:center}
}

@media(max-width:700px){
  #feature-details .fd-brand-accordion .pw-problem-copy{font-size:16px;line-height:24px}
  .home-page #feature-details .fd-grid>article.fd-card.fd-card--wide .fd-copy h3,
  .home-page #also-included-title{font-size:32px!important}
  #feature-details .fd-editor-preview .ep-topic-list .ep-topic:nth-child(n+3){display:none}
  #before-after-duplicate .pw-stage{padding-top:40px;padding-left:40px}
}

@media(max-width:700px){
  #solution .sv-topbar{padding-left:20px}
  #solution .sv-cal-body{padding-left:20px;padding-top:20px}
  #integrations{display:flex;flex-direction:column;gap:32px}
  #integrations>.integration-grid{order:1}
  #integrations>.head{order:2;margin-bottom:0}
  #feature-details .fd-card--brand .brand-flow{padding:40px 0 0 40px}
  #feature-details .brand-flow .bf-connections{height:18px}
  #feature-details .brand-flow .bf-connections .bf-wire,
  #feature-details .brand-flow .bf-connections .bf-signal{d:path('M200 0V36')}
  #feature-details .brand-flow .bf-connections .bf-signal--second{display:none}
  #feature-details .brand-flow .bf-output-line{height:16px}
  #feature-details .brand-flow .bf-stage.is-pending .bf-stage-inner::before{height:16px}
  #feature-details .brand-flow .bf-stage.is-pending .bf-stage-inner::after{inset:16px 0 0}
  #feature-details .brand-flow .bf-stage--discovery .bf-stage-inner{grid-template-rows:16px 152px}
  #feature-details .fd-card--languages-duplicate .fd-scene--mapping{padding-top:40px;padding-right:40px}
  #feature-details .fd-editor-preview .ep-topbar{width:80%;transform:scale(1.25);transform-origin:top left;margin-bottom:10px}
  #feature-details .fd-editor-preview .ep-topic{width:fit-content;min-height:0;flex:none}
  .home-page #pricing .offer-panel--dark :is(.offer-summary,.offer-features){padding:20px}
  .home-page #founder-story>.founder-story-inner.grid-rail{width:calc(100% - 100px)}
}
@media(max-width:700px){
  /* Keep calendar stats on one clipped line on narrow screens. */
  #solution .sv-stats{flex-wrap:nowrap;width:max-content;max-width:100%;min-width:0;overflow:hidden}
  #solution .sv-stats .sv-control{flex:none;white-space:nowrap}

  /* Anchor the editor toolbar at the right and let its controls run leftward. */
  #feature-details .fd-editor-preview .ep-topbar{direction:rtl;justify-content:flex-start;overflow:hidden}
  #feature-details .fd-editor-preview .ep-topbar-status,
  #feature-details .fd-editor-preview .ep-topbar-actions{direction:ltr;flex:none}

  /* Fold hidden platforms into the count to leave more room for Connect. */
  #how-connect .hs-logo:nth-child(2){display:none}
  #how-connect .hs-more{font-size:0}
  #how-connect .hs-more::after{content:"+11";font-size:11px}
}

@media(max-width:360px){
  #how-connect .hs-logo:nth-child(3){display:none}
  #how-connect .hs-more::after{content:"+12";font-size:9px}
}

@media(max-width:700px){
  .home-page #top .hero-proof{width:fit-content;max-width:calc(100vw - 40px);margin-inline:auto}
  .home-page #top .hero-proof .proof-mobile{width:max-content;max-width:100%;flex-wrap:nowrap;white-space:nowrap}
  .home-page #top .hero-proof .proof-mobile>span:last-child{width:max-content;max-width:none;white-space:nowrap;text-align:left}
}

@media(max-width:700px){
  #pricing-alt{display:flex;flex-direction:column}
  #pricing-alt>.pricing-grid{order:1}
  #pricing-alt>.fd-heading{order:2;margin:32px auto 0}

  #writing-examples{display:flex;flex-direction:column}
  #writing-examples>.writing-example-carousel{order:1}
  #writing-examples>.head{order:2;margin:32px auto 0}
}

@media(max-width:700px){
  .home-page #start .hero-proof{width:fit-content;max-width:100%;margin-inline:auto}
  .home-page #start .hero-proof .proof-mobile{width:max-content;max-width:100%;align-items:center;flex-wrap:nowrap;white-space:nowrap;font-size:12px;line-height:18px}
  .home-page #start .hero-proof .proof-mobile .hero-proof-icon{width:14px;height:14px;margin:0}
  .home-page #start .hero-proof .proof-mobile>span:last-child{width:max-content;max-width:none;white-space:nowrap}
}