/* Shared PlantOffer demo: phone-first controls and a focused introduction. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
html.modal-open, .modal-open body { overflow: hidden; overscroll-behavior: none; }
button, .button, a, input, select, textarea { touch-action: manipulation; }
input:not([type=checkbox]), select, textarea { font-size: 16px !important; }
button, .button { min-height: 44px; }
button > svg, .buyer-demo-bar svg, .demo-feature-icon svg, .demo-preview-confirm > svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.demo-landing { max-width: 1240px; margin: auto; padding: 30px 40px 24px; }
.demo-landing-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 44px; }
.demo-label { display: inline-flex; align-items: center; gap: 7px; color: #355c42; font-size: 12px; font-weight: 650; letter-spacing: .025em; white-space: nowrap; }
.demo-label i { width: 7px; height: 7px; border-radius: 50%; background: #71a74c; box-shadow: 0 0 0 4px #71a74c12; }
.demo-hero { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 52px; min-height: 500px; padding-bottom: 44px; }
.demo-hero-copy .eyebrow { font-size: 11px; letter-spacing: .18em; }
.demo-hero h1 { font-size: clamp(40px, 4.8vw, 65px); line-height: 1.06; letter-spacing: -.058em; margin: 16px 0 24px; }
.demo-hero h1 em { font-style: normal; color: #628354; }
.demo-hero-copy > p { color: #5b6e60; max-width: 460px; font-size: 17px; line-height: 1.7; }
.demo-start-actions { display: flex; gap: 10px; margin-top: 28px; align-items: stretch; }
.demo-start-actions button { min-height: 54px; padding: 14px 20px; border-radius: 13px; font-size: 15px; }
.demo-start-actions button:first-child { box-shadow: 0 6px 18px #163d2518; }
.demo-start-actions [aria-busy=true] { opacity: .65; }
.demo-start-note { color: #697c6b; font-size: 12px; margin-top: 14px; }
.demo-start-error:empty { display: none; }
.demo-preview { position: relative; border-radius: 30px; padding: 26px; background: #e9efe4; border: 1px solid #dce6d5; }
.demo-preview-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
.demo-preview-top .demo-label { font-size: 9px; letter-spacing: .13em; }
.demo-preview-top > span:last-child { font-size: 11px; color: #70836d; }
.demo-preview-card { background: #fff; border: 1px solid #dfe7d9; border-radius: 21px; padding: 10px; box-shadow: 0 18px 30px #2842210a; }
.demo-preview-picture { width: 100%; height: 230px; border-radius: 14px; overflow: hidden; background: #f0f4eb; display: grid; place-items: center; }
.demo-preview-picture > svg { width: 65px; height: 65px; fill: none; stroke: #829a73; stroke-width: 1; }
.demo-preview-picture img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.demo-preview-info { padding: 16px 12px 14px; }
.demo-preview-info .badge { font-size: 10px; margin-bottom: 10px; background: #eef5e4; }
.demo-preview-info h2 { font-size: 21px; margin-bottom: 14px; }
.demo-preview-info > div { display: flex; align-items: baseline; justify-content: space-between; }
.demo-preview-info strong { font-size: 25px; letter-spacing: -.04em; }
.demo-preview-info small { font-size: 11px; }
.demo-preview-confirm { display: flex; align-items: center; gap: 12px; padding: 16px 4px 0; }
.demo-preview-confirm > svg { width: 32px; height: 32px; color: #4b723e; }
.demo-preview-confirm strong, .demo-preview-confirm span { display: block; }
.demo-preview-confirm strong { font-size: 13px; }
.demo-preview-confirm span { margin-top: 4px; font-size: 11px; color: #6c8067; line-height: 1.5; }
.demo-benefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; border-top: 1px solid #dce5da; padding: 30px 0; }
.demo-benefits article { display: flex; align-items: flex-start; gap: 14px; }
.demo-feature-icon { border-radius: 12px; background: #e8efdf; padding: 11px; display: flex; color: #4b6d3d; }
.demo-benefits h2 { font-size: 14px; margin-bottom: 8px; }
.demo-benefits p { color: #6b7b6c; font-size: 12px; line-height: 1.65; }
.demo-landing-footer { border-top: 1px solid #dce5da; padding-top: 22px; display: flex; justify-content: space-between; gap: 20px; }
.demo-landing-footer strong { font-size: 13px; }
.demo-landing-footer p { max-width: 490px; text-align: right; color: #788676; font-size: 11px; }
.demo-journey { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 0 0 24px; }
.demo-journey button { justify-content: flex-start; text-align: left; gap: 11px; padding: 16px; background: #edf3e7; color: #24452c; border: 1px solid #dce8d3; border-radius: 16px; }
.demo-journey button > span { color: #708c61; font-size: 11px; font-weight: 750; }
.demo-journey button > div { flex: 1; }
.demo-journey strong, .demo-journey small { display: block; }
.demo-journey strong { font-size: 13px; }
.demo-journey small { font-size: 11px; margin-top: 5px; line-height: 1.4; font-weight: 400; }
.demo-journey button > svg { width: 16px; height: 16px; }
.demo-disclaimer { max-width: 720px; font-size: 11px; line-height: 1.7; color: #7a877a; padding: 24px 2px 0; }
.buyer-demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 18px; font-size: 12px; color: #6d7c6c; }
.buyer-demo-bar a { display: inline-flex; gap: 6px; align-items: center; color: #355a38; text-decoration: none; min-height: 44px; }
.buyer-demo-bar svg { width: 16px; height: 16px; }
.row-copy, .order-title > div, .check-row > span, .panel-heading h2 { min-width: 0; }
.link-box { overflow-wrap: anywhere; user-select: all; }
.check-row { min-height: 64px; }
.check-row input, .toggle-row input { margin: 0; }
.toggle-row { min-height: 44px; }
dialog { overflow-x: hidden; }

@media (max-width: 1000px) and (min-width: 761px) {
  .demo-hero { gap: 30px; }
  .demo-start-actions { flex-direction: column; align-items: stretch; }
  .demo-journey { grid-template-columns: 1fr; }
  .demo-journey small { display: inline; margin-left: 8px; }
  .demo-journey strong { display: inline; }
}
@media (max-width: 760px) {
  .demo-landing { padding: max(20px,env(safe-area-inset-top)) 22px max(24px,env(safe-area-inset-bottom)); }
  .demo-landing-header { margin-bottom: 40px; }
  .demo-landing-header .brand { font-size: 20px; }
  .demo-landing-header .brand img { width: 30px; height: 30px; }
  .demo-landing-header .demo-label { font-size: 10px; }
  .demo-hero { grid-template-columns: minmax(0,1fr); gap: 30px; min-height: 0; padding-bottom: 30px; }
  .demo-hero h1 { font-size: clamp(38px,10.8vw,58px); margin: 14px 0 20px; }
  .demo-hero-copy > p { font-size: 15px; line-height: 1.65; }
  .demo-start-actions { margin-top: 24px; gap: 8px; }
  .demo-start-actions button { flex: 1; font-size: 13px; padding: 12px 10px; gap: 7px; }
  .demo-start-actions button > svg { width: 18px; height: 18px; }
  .demo-start-note { font-size: 11px; }
  .demo-preview { padding: 20px; border-radius: 24px; }
  .demo-preview-picture { height: 190px; }
  .demo-benefits { grid-template-columns: 1fr; padding: 26px 0; gap: 24px; }
  .demo-benefits h2 { font-size: 15px; }
  .demo-benefits p { font-size: 13px; }
  .demo-landing-footer { display: block; }
  .demo-landing-footer p { text-align: left; margin-top: 10px; }
  .sidebar { position: sticky; top: 0; z-index: 25; padding: max(12px,env(safe-area-inset-top)) 18px 12px; background: #fff; }
  .sidebar nav { padding: 7px 5px calc(7px + env(safe-area-inset-bottom)); }
  .sidebar nav button[data-page="offers"] { display: flex; }
  .sidebar nav button[data-page="clients"], .sidebar nav button[data-page="settings"] { display: none; }
  .sidebar nav button { font-size: 10px; min-height: 56px; line-height: 1.15; }
  .workspace { padding: 12px 16px calc(100px + env(safe-area-inset-bottom)); }
  .topbar { padding-bottom: 14px; gap: 8px; }
  .topbar > .demo-label { font-size: 11px; max-width: none; }
  .topbar .actions { gap: 6px; }
  .topbar .actions button { padding: 9px 10px; min-height: 44px; font-size: 12px; }
  .topbar .actions button > svg { width: 17px; height: 17px; }
  .pagehead { margin: 6px 0 20px; }
  .pagehead h1 { font-size: 29px; line-height: 1.12; }
  .pagehead > .actions { flex-wrap: wrap; }
  .pagehead > .actions button { min-height: 46px; flex: 1 1 auto; }
  .demo-journey { grid-template-columns: 1fr; gap: 8px; margin-bottom: 22px; }
  .demo-journey button { padding: 14px 15px; min-height: 61px; }
  .demo-journey strong { font-size: 14px; }
  .demo-journey small { font-size: 11px; margin-top: 3px; }
  .stat { min-width: 0; }
  .stat strong { font-size: clamp(23px,7vw,29px); overflow-wrap: anywhere; }
  .panel-heading { gap: 12px; flex-wrap: wrap; }
  .panel-heading h2 { line-height: 1.35; }
  .panel-heading select { flex: 1; min-width: 130px; }
  .selection { max-height: 42dvh; overscroll-behavior: auto; }
  .check-row { padding: 13px; gap: 10px; }
  .check-row strong { font-size: 14px; }
  .builder-summary { bottom: calc(82px + env(safe-area-inset-bottom)); gap: 10px; padding: 14px; }
  .builder-summary small { font-size: 11px; line-height: 1.4; display: block; }
  .builder-summary button { min-height: 48px; }
  .row .actions { gap: 8px; }
  .row .actions button { min-height: 44px; }
  .product .badge { white-space: normal; }
  .product button { min-height: 44px; font-size: 12px; }
  dialog { max-height: 90dvh; padding: 18px 18px calc(20px + env(safe-area-inset-bottom)); }
  .modal-header { top: -18px; padding: 10px 0 14px; gap: 12px; }
  .modal-header h2 { font-size: 20px; line-height: 1.25; }
  .modal-header button { min-width: 44px; min-height: 44px; flex-shrink: 0; }
  dialog .form-footer { position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom)); padding: 14px 0 calc(16px + env(safe-area-inset-bottom)); background: #fff; z-index: 3; border-top: 1px solid #e8ede5; }
  dialog .form-footer button, dialog .form-footer .button { min-height: 48px; }
  .buyer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .buyer-demo-bar { font-size: 11px; padding-bottom: 8px; gap: 8px; }
  .buyer-demo-bar a { font-size: 11px; }
  .buyer-header { position: sticky; top: 0; z-index: 10; margin: 0 -16px; padding: 10px 16px; background: #f6f8f4f5; backdrop-filter: blur(14px); border-bottom: 1px solid #dce5de; }
  .buyer-header select { font-size: 16px !important; width: 126px; min-height: 44px; }
  .buyer-hero { margin-top: 20px; padding: 22px; }
  .buyer-hero h1 { font-size: 27px; }
  .buyer-product { padding: 16px; }
  .buyer-product .product-photo { aspect-ratio: 5/3; }
  .buyer-product h2 { font-size: 18px; line-height: 1.3; }
  .quantity { grid-template-columns: minmax(0,1fr) 86px; }
  .sticker-choice .toggle-row { min-height: 46px; padding: 9px 11px; }
  .checkout { scroll-margin-top: 85px; }
  .buyer-jump { left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); width: calc(100% - 32px); min-height: 54px; border-radius: 16px; }
  .keyboard-open .sidebar nav, .keyboard-open .buyer-jump { display: none; }
  .keyboard-open .builder-summary { position: static; }
  .keyboard-open dialog { max-height: 96dvh; }
  .order-card .actions button { flex: 1; min-height: 48px; }
}
@media (max-width: 380px) {
  .topbar .demo-preview-button { display: none; }
  .demo-landing { padding-left: 18px; padding-right: 18px; }
  .demo-start-actions button { font-size: 12px; padding-left: 7px; padding-right: 7px; }
  .demo-start-actions button > svg { display: none; }
  .demo-preview { padding: 16px; }
  .buyer-header .brand { font-size: 16px; }
  .buyer-header select { width: 115px; }
  .buyer-demo-bar > span { font-size: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  .demo-hero-copy, .demo-preview { animation: demo-appear .45s ease-out both; }
  .demo-preview { animation-delay: .07s; }
  button { transition: background-color .15s, opacity .15s; }
  @keyframes demo-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}