/* Mobile readability: give copy room, then let product examples grow with it.
   Keep desktop composition and all supplied brand assets unchanged. */
@media (max-width:1100px) {
  .why-card p,.why-card .why-lead{font-size:18px;line-height:1.65;color:#4e616b}
  .why-card .why-lead{color:#293d4a}
}
@media (max-width:1000px) {
  .mcp-feature-inner{padding-left:48px;padding-right:48px}
  .mcp-feature-description,.mcp-access-explanation{font-size:18px;line-height:1.7;color:#4e616b}
}
@media (max-width:700px) {
  :root{--phone-gutter:32px}
  .product-stage-page .site-header{padding:0 var(--phone-gutter);height:88px;gap:12px}
  .site-header .brand img{width:clamp(104px,30vw,144px);height:auto}
  .header-action{min-height:48px;padding:12px 14px;font-size:16px;line-height:1.25;flex-shrink:0}
  .intro.product-stage{padding:52px var(--phone-gutter) 48px}
  .product-stage .hero-eyebrow{font-size:14px;line-height:1.5;letter-spacing:1.1px;gap:10px;margin-bottom:24px}
  .product-stage .hero-eyebrow>span{display:none}
  .intro.product-stage h1{font-size:clamp(50px,14vw,88px);letter-spacing:-1.8px;line-height:1.08}
  .intro.product-stage h1 em{font-size:.82em;letter-spacing:-1.2px}
  .product-stage .hero-description{font-size:18px;line-height:1.7;max-width:460px}
  .product-stage .hero-actions{flex-wrap:wrap;gap:12px;margin-top:28px}
  .product-stage .hero-actions .button{min-height:54px;padding:16px 20px;font-size:17px;line-height:1.3}
  .product-stage .integration-line{font-size:16px;line-height:1.6;gap:8px 10px;margin-top:30px}
  .product-stage .integration-line .google-icon{width:28px;height:28px}
  .product-stage .product-explore{font-size:15px;line-height:1.5;letter-spacing:.3px;margin-top:30px}
  .product-stage .product-explore>.icon{width:22px;height:22px}

  /* The dashboard is a usable single-column experience, not a scaled thumbnail. */
  .showcase{padding:22px var(--phone-gutter) 46px}
  .concept-label{font-size:14px;line-height:1.6;flex-wrap:wrap;gap:6px 8px;margin-bottom:20px}
  .showcase-tabs{gap:8px;padding:8px;margin-bottom:16px}
  .showcase-tabs button{min-height:88px;padding:14px 10px;font-size:16px;line-height:1.4;gap:9px;flex-direction:column;text-align:center}
  .showcase-tabs button .icon{width:21px;height:21px}
  .product-frame{border-width:3px;border-radius:18px}
  .app-topbar{padding:18px;flex-wrap:wrap;gap:12px}
  .app-breadcrumb{font-size:14px;line-height:1.5;flex-wrap:wrap}
  .app-mode{font-size:14px;line-height:1.5}
  .workspace-filters{padding:20px 18px;gap:18px}
  .account-name{font-size:16px;line-height:1.5;align-items:flex-start}
  .account-name>svg{width:24px;height:24px;flex-shrink:0}
  .filter-controls{display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:10px}
  .select-wrap,.select-wrap.period-wrap{width:100%;min-width:0;max-width:none}
  .select-wrap select{font-size:16px;line-height:1.4;width:100%;max-width:none;min-height:50px;padding:13px 34px 13px 12px}
  .select-wrap.period-wrap select{padding-left:36px}
  .app-canvas{padding:26px 18px;min-height:0}
  .panel-heading{align-items:flex-start;flex-direction:column;gap:16px;margin-bottom:25px}
  .panel-heading h3{font-size:32px;line-height:1.14}
  .panel-heading p{font-size:17px;line-height:1.65;color:#52666d;margin-top:12px}
  .app-mode,.scope-card,.answer-stat>span,.metric-name,.metric-change em,.chart-heading p,.chart-legend,.performance-note,.table-heading span,.evidence-card>p,.proposal-card>p,.proposal-label,.report-period,.report-kpis span,.report-paper-header>span,.report-footnote,.report-updated,.input-note{color:#536770}
  .feature-status{max-width:none;font-size:14px;line-height:1.5;padding:7px 10px}
  .ask-layout{gap:26px}
  .prompt-eyebrow,.small-eyebrow{font-size:14px;line-height:1.6;letter-spacing:.5px}
  .prompt-list{gap:10px}
  .prompt-card{font-size:16px;line-height:1.5;padding:16px 14px;min-height:54px}
  .prompt-card .icon{width:20px;height:20px;flex-shrink:0}
  .scope-card{font-size:14px;line-height:1.6;padding:16px}
  .scope-card strong{font-size:16px;line-height:1.5;margin:8px 0}
  .scope-card>span{font-size:14px}
  .question-bubble{font-size:17px;line-height:1.6;padding:16px;margin-bottom:24px;max-width:100%}
  .answer{display:block}
  .answer-avatar{width:36px;height:36px;margin-bottom:12px}
  .answer-name{font-size:16px;line-height:1.6;display:flex;flex-wrap:wrap;gap:4px 8px}
  .answer-name>span{font-size:14px}
  .answer-body h4{font-size:29px;line-height:1.2;margin-top:15px}
  .answer-body p{font-size:17px;line-height:1.7;color:#506770}
  .answer-stats{grid-template-columns:minmax(0,1fr);gap:10px;margin:24px 0}
  .answer-stat{padding:16px}
  .answer-stat>span{font-size:14px;line-height:1.5}
  .answer-stat strong{font-size:29px;line-height:1.2;margin-top:6px}
  .answer-action{font-size:16px;line-height:1.6;gap:10px}
  .answer-action>.icon{width:18px;height:18px;flex-shrink:0;margin-top:3px}
  .source-pills{flex-wrap:wrap;gap:8px;margin:20px 0}
  .source-pills span{font-size:14px;line-height:1.5;padding:6px 9px}
  .text-link{font-size:16px;line-height:1.5;min-height:44px;gap:10px}
  .ask-input{padding:8px 9px;gap:8px;margin-top:24px}
  .ask-input input,.ask-input input::placeholder{font-size:16px;line-height:1.5}
  .send-button{width:44px;height:44px;flex-shrink:0}
  .input-note{font-size:14px;line-height:1.6;margin-top:12px}
  .mini-comparison{font-size:16px;line-height:1.5;grid-template-columns:minmax(0,1fr) 38px 62px;gap:10px}
  .mini-comparison strong,.mini-comparison>span{font-size:16px}
  .app-statusbar{padding:17px 18px;font-size:14px;line-height:1.6;align-items:flex-start}
  .app-statusbar>span:first-child{align-items:flex-start;gap:8px}
  .app-statusbar .icon{width:18px;height:18px;margin-top:2px;flex-shrink:0}
  .app-statusbar>span:last-child{display:none}
  .availability-note{font-size:14px;line-height:1.65;margin-top:20px}

  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:22px}
  .metric-card{padding:17px 13px}
  .metric-name{font-size:16px;line-height:1.5;min-height:48px}
  .metric-card strong{font-size:29px;line-height:1.2;margin:10px 0}
  .metric-change{font-size:14px;line-height:1.5;flex-wrap:wrap;gap:4px}
  .metric-change em{font-size:14px;line-height:1.5}
  .chart-box{padding:16px 16px 10px}
  .chart-heading{flex-direction:column;align-items:flex-start;gap:14px}
  .chart-heading h4{font-size:18px;line-height:1.4}
  .chart-heading p,.chart-legend{font-size:14px;line-height:1.6}
  .chart-label{font-size:14px;fill:#536b74}
  .performance-note{font-size:14px;line-height:1.6;align-items:flex-start;margin:18px 0 26px}
  .performance-note .icon{width:18px;height:18px;margin-top:2px;flex-shrink:0}
  .table-heading{font-size:18px;line-height:1.5;flex-wrap:wrap;gap:8px}
  .table-heading span{font-size:14px}
  .campaign-table,.campaign-table tbody,.campaign-table tfoot{display:block;width:100%}
  .campaign-table thead,.evidence-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .campaign-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;border:1px solid #dfe4da;border-radius:10px;background:#fffefa;padding:18px 14px;margin:14px 0}
  .campaign-table td{display:block;border:0;padding:0;text-align:left;white-space:normal;font-size:18px;line-height:1.5}
  .campaign-table td:first-child{grid-column:1/-1;font-size:18px;font-weight:600}
  .campaign-table button{font-size:18px;line-height:1.5;max-width:none;padding:4px 0;min-height:44px}
  .campaign-table td:nth-child(2):before{content:"Spend"}
  .campaign-table td:nth-child(3):before{content:"Clicks"}
  .campaign-table td:nth-child(4):before{content:"Conversions"}
  .campaign-table td:nth-child(5):before{content:"Cost / conv."}
  .campaign-table td:before{display:block;font-size:14px;line-height:1.5;color:#586d73;font-weight:400;margin-bottom:3px}
  .campaign-table tfoot tr{background:#eff2e8}

  .changes-grid{gap:22px}
  .evidence-card,.proposal-card{padding:22px 16px}
  .evidence-card h4,.proposal-card h4{font-size:21px;line-height:1.4}
  .evidence-card>p,.proposal-card>p{font-size:16px;line-height:1.65}
  .evidence-card>p.small-eyebrow,.proposal-card>p.small-eyebrow{font-size:14px}
  .evidence-table,.evidence-table tbody{display:block;width:100%}
  .evidence-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;border-bottom:1px solid #dfe4da;padding:18px 0}
  .evidence-table td{display:block;border:0;padding:0;text-align:left;font-size:17px;line-height:1.5}
  .evidence-table td:first-child{grid-column:1/-1}
  .evidence-table td:nth-child(2):before{content:"Spend"}
  .evidence-table td:nth-child(3):before{content:"Conversions"}
  .evidence-table td:before{display:block;font-size:14px;line-height:1.5;color:#586d73;margin-bottom:3px}
  .term-checkbox{font-size:17px;line-height:1.5;gap:10px;min-height:44px;align-items:flex-start}
  .term-checkbox input{width:22px;height:22px;margin-top:2px}
  .evidence-summary{font-size:16px;line-height:1.5;flex-wrap:wrap;gap:12px}
  .evidence-summary strong{font-size:28px}
  .fine-print{font-size:14px!important;line-height:1.7!important}
  .proposal-label{font-size:14px;line-height:1.6;letter-spacing:0;margin:22px 0 12px}
  .negative-list{font-size:17px;line-height:1.6;padding:16px 13px}
  .negative-list .none{font-size:16px}
  .app-button{font-size:16px;line-height:1.5;min-height:52px;padding:14px 16px;white-space:normal}
  .app-button .icon{width:19px;height:19px;flex-shrink:0}
  .apply-confirmation p,.applied-state{font-size:17px;line-height:1.65}
  .undo-button{font-size:16px;line-height:1.5;min-height:48px}
  .review-context{font-size:14px;line-height:1.65;gap:9px}
  .review-context .icon{width:18px;height:18px;flex-shrink:0}

  .report-toolbar{gap:18px;margin-bottom:24px}
  .report-format{display:flex;flex-direction:column;gap:4px;width:100%}
  .report-format button{font-size:16px;line-height:1.5;padding:12px;min-height:50px}
  .report-actions{display:flex;flex-direction:column;gap:10px;width:100%}
  .report-actions .app-button{font-size:16px;line-height:1.5;padding:14px 12px;min-height:52px;width:100%}
  .report-paper{padding:24px 16px}
  .report-paper-header{flex-direction:column;align-items:flex-start;gap:16px;padding-bottom:20px}
  .report-paper-header>span{font-size:14px;line-height:1.5;max-width:none;text-align:left;letter-spacing:.3px}
  .report-wordmark img{width:128px;height:auto}
  .report-paper h4{font-size:31px;line-height:1.2}
  .report-period{font-size:16px;line-height:1.65;margin-top:14px}
  .report-kpis{grid-template-columns:minmax(0,1fr);padding:18px;gap:19px;margin:24px 0}
  .report-kpis span{font-size:14px;line-height:1.5;min-height:0;margin-bottom:5px}
  .report-kpis strong{font-size:29px;line-height:1.2}
  .report-paper h5{font-size:20px;line-height:1.4;margin-top:28px}
  .report-paper p.report-paragraph,.report-paper li{font-size:17px;line-height:1.7;color:#506770}
  .report-paper ul{padding-left:20px}
  .report-paper li{margin:14px 0}
  .report-footnote,.report-updated{font-size:14px;line-height:1.65}

  .brand-strip-inner{padding:32px var(--phone-gutter);gap:22px}
  .brand-strip h2{font-size:21px;line-height:1.5}
  .brand-logo-item--shared{min-width:150px}
  .brand-site-label{font-size:14px;line-height:1.5;color:#4b5354}
  .why-inner{padding:60px var(--phone-gutter) 66px}
  .why-eyebrow{font-size:14px;line-height:1.5;letter-spacing:.7px}
  .why-heading{margin-bottom:30px}
  .why-grid{gap:28px}
  .why-card-copy{padding:30px 24px}
  .why-card h3{font-size:29px;line-height:1.2;letter-spacing:-.6px}
  .why-card p,.why-card .why-lead{font-size:18px;line-height:1.65}
  .why-card .why-lead{margin-bottom:12px}
  .why-scene{height:auto;min-height:0;flex-basis:auto;display:flex;flex-direction:column;gap:22px;padding:28px 18px 20px}
  .why-scene figcaption{position:static;transform:none;max-width:100%;width:auto;margin:0;font-size:14px;line-height:1.5;padding:7px 12px}
  .scene-shell{padding:6px;border-radius:20px;max-width:360px}
  .scene-message{padding:16px 12px}
  .scene-sender-name{font-size:16px;line-height:1.4}
  .scene-avatar{width:36px;height:36px}
  .scene-time{display:none}
  .why-card .scene-message-text{font-size:16px;line-height:1.6;margin:15px 0 18px}
  .mini-report,.change-preview{padding:16px 12px}
  .mini-report-scope{font-size:14px;line-height:1.5;color:#526770}
  .mini-report-title{font-size:27px;line-height:1.12;margin:12px 0 18px}
  .mini-report-metrics{grid-template-columns:minmax(0,1fr);gap:15px;padding-bottom:18px}
  .mini-report-metrics dt{font-size:14px;line-height:1.5;white-space:normal;color:#526770}
  .mini-report-metrics dd{font-size:24px;line-height:1.2;margin-top:3px}
  .mini-bars{gap:14px;margin:20px 0}
  .mini-bar-row{grid-template-columns:40px minmax(0,1fr) 22px;font-size:14px;line-height:1.4;gap:8px}
  .mini-bar-track{height:8px}
  .mini-insight{padding-top:16px}
  .mini-insight strong{font-size:14px;line-height:1.4}
  .mini-insight span{font-size:16px;line-height:1.5;margin-top:6px}
  .connection-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;height:auto;width:100%;max-width:340px}
  .connection-wires,.conn-mcp{display:none}
  .conn-node{position:static;width:auto;height:auto;min-height:112px;padding:16px 6px;gap:9px;border-radius:18px}
  .conn-node img,.conn-node>svg{width:34px;height:34px}
  .conn-name{font-size:14px;line-height:1.4;white-space:normal;text-align:center}
  .conn-state{font-size:14px;line-height:1.4;white-space:normal;text-align:center}
  .conn-hub{position:relative;left:auto;top:auto;transform:none;grid-column:1/-1;grid-row:2;justify-self:center;width:100%;padding:30px 0;margin:0}
  .conn-hub:before,.conn-hub:after{content:"";position:absolute;left:50%;height:18px;border-left:1px dashed #a26d41}
  .conn-hub:before{top:0}.conn-hub:after{bottom:0}
  .conn-hub-symbol{width:80px;height:80px}
  .conn-hub-symbol img{width:57px}
  .conn-hub strong{font-size:16px;line-height:1.4;margin-top:10px}
  .change-eyebrow{font-size:14px;line-height:1.5;letter-spacing:0}
  .change-dots{display:none}
  .change-campaign{font-size:29px;line-height:1.2;margin-top:14px}
  .change-breadcrumb,.change-field-label{font-size:14px;line-height:1.5;color:#596d5d}
  .change-term,.change-proposal{padding:14px 12px;margin-top:18px}
  .change-term strong,.change-proposal strong{font-size:16px;line-height:1.5;margin-top:8px}
  .change-connector{margin:10px auto}
  .change-preview-footer{font-size:14px;line-height:1.5;flex-wrap:wrap;gap:12px;margin-top:18px}
  .change-preview-footer strong{font-size:14px;line-height:1.4;padding:9px}

  .mcp-feature-inner{padding:58px var(--phone-gutter) 66px}
  .mcp-feature h2{font-size:clamp(36px,8.8vw,51px);line-height:1.1;letter-spacing:-.9px;margin-bottom:27px}
  .mcp-feature-description,.mcp-access-explanation{font-size:18px;line-height:1.7}
  .mcp-access-explanation{margin-top:22px}
  .mcp-stage{min-height:0;margin-top:34px;border-radius:24px}
  .mcp-assistant-switch{top:22px;padding:5px;gap:3px;max-width:calc(100% - 24px)}
  .mcp-assistant-switch button{font-size:16px;line-height:1.25;min-height:48px;padding:12px 10px;gap:7px}
  .mcp-assistant-switch button img{width:20px;height:20px}
  .mcp-conversations{position:relative;inset:auto;padding:112px 18px 30px}
  .assistant-app{min-height:0;border-radius:13px;box-shadow:0 0 0 5px #ffffff65,0 16px 30px #173f5a20}
  .assistant-topbar,.claude-app .assistant-topbar{padding:19px 16px;gap:8px}
  .assistant-provider-name{font-size:17px}
  .assistant-topbar-tools{gap:10px}
  .assistant-chat-content,.claude-app .assistant-chat-content{padding:18px 16px 8px}
  .assistant-question,.claude-app .assistant-question{font-size:16px;line-height:1.6;padding:14px;margin-bottom:26px}
  .assistant-tool{font-size:14px;line-height:1.5;padding:6px 9px;margin-bottom:19px}
  .assistant-answer,.claude-app .assistant-answer{font-size:17px;line-height:1.7}
  .assistant-answer p{margin-bottom:20px}
  .assistant-answer ul{padding-left:20px;margin-bottom:22px}
  .assistant-answer li{margin:9px 0}
  .assistant-response-actions{gap:15px;margin:20px 0 12px;flex-wrap:wrap}
  .assistant-response-actions .app-ui-icon{width:18px;height:18px}
  .assistant-composer{margin:16px 12px 20px;padding:12px 10px;gap:8px;font-size:16px;min-height:54px}
  .assistant-compose-placeholder{white-space:normal}
  .assistant-send{width:30px;height:30px}
  .claude-chat-title{font-size:14px;line-height:1.4}
  .claude-share{font-size:14px;line-height:1.4;padding:6px}
  .claude-answer-row{display:block}
  .claude-answer-avatar{width:24px;height:24px;margin:0 0 13px}
  .claude-compose-text{font-size:16px;line-height:1.5}
  .claude-model{font-size:14px;line-height:1.3}
  .mcp-feature-cta{margin-top:28px}
  .mcp-feature-cta .button{font-size:18px;line-height:1.4;min-height:56px}

  .design-footer{padding:32px var(--phone-gutter);gap:20px}
  .design-footer>span{font-size:14px;line-height:1.6;margin-left:0;width:100%}
  .design-footer>button{font-size:17px;line-height:1.5;min-height:48px;text-align:left}
  dialog{max-width:calc(100vw - 40px);padding:54px 24px 32px}
  dialog h2{font-size:36px;line-height:1.1}
  dialog p{font-size:18px;line-height:1.7}
  dialog p.dialog-eyebrow{font-size:14px!important;line-height:1.5;letter-spacing:.6px}
  .dialog-note{font-size:16px;line-height:1.65}
  dialog .button{font-size:16px;line-height:1.5;min-height:52px;padding:14px 16px}
  .close-dialog{width:44px;height:44px;right:8px;top:8px}
  #toast{font-size:16px;line-height:1.5;max-width:calc(100vw - 40px);padding:16px 20px}
}
@media (max-width:389px) {
  :root{--phone-gutter:28px}
  .header-action{font-size:15px;padding-left:12px;padding-right:12px}
  .intro.product-stage h1 em{font-size:.76em}
  .product-stage .hero-actions{flex-direction:column;align-items:stretch}
  .product-stage .hero-actions .button{width:100%}
  .product-stage .integration-line i{display:none}
  .metric-grid{grid-template-columns:minmax(0,1fr)}
  .metric-name{min-height:0}
  .why-card-copy{padding-left:20px;padding-right:20px}
  .why-card h3{font-size:27px}
  .why-scene{padding-left:14px;padding-right:14px}
  .scene-message{padding-left:10px;padding-right:10px}
  .mini-report,.change-preview{padding-left:10px;padding-right:10px}
  .mcp-assistant-switch button{padding-left:8px;padding-right:8px}
  .mcp-conversations{padding-left:14px;padding-right:14px}
  .assistant-topbar,.claude-app .assistant-topbar{padding-left:12px;padding-right:12px}
  .assistant-chat-content,.claude-app .assistant-chat-content{padding-left:12px;padding-right:12px}
}