/* QuickOrder brand + pain-first landing presentation (2026-10-22). */
:root{--qo-pink:#ff0066;--qo-ink:#171923;--qo-soft:#fff0f5}
body{background:#fffafa;color:var(--qo-ink)}.logo{display:flex;flex-direction:column;align-items:flex-start;max-width:300px}.logo img{width:300px;max-width:100%;height:auto;max-height:none}.logo small{font-size:10px;letter-spacing:0;color:#6b7280;font-weight:600}.hero{margin-bottom:48px}.hero h1{font-size:clamp(34px,4.7vw,57px);letter-spacing:-1.8px;max-width:650px}.hero .lead{max-width:570px;line-height:1.65;color:#4b5563}.chip{background:var(--qo-soft);color:#be185d}.button,.step-number{background:var(--qo-pink)}.button:hover{background:#d60056}.demo-link,.pricing>a,details a{color:var(--qo-pink)}.pain-comparison{margin:45px 0 30px}.pain-intro{max-width:710px;margin-bottom:22px}.pain-intro h2{font-size:clamp(25px,3.3vw,38px);margin:8px 0}.pain-intro p{color:#6b7280}.eyebrow{font-size:12px;color:var(--qo-pink);font-weight:850;letter-spacing:1.5px}.pain-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.pain-grid article{background:#f3f4f6;padding:26px;border-radius:23px}.pain-grid article.pain-solution{background:var(--qo-soft);border:1px solid #ffd3e3}.pain-label{font-size:11px;font-weight:900;letter-spacing:1.2px;color:#6b7280}.chat-stack{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:20px}.chat-stack span{padding:10px 14px;border-radius:4px 15px 15px 15px;background:white;box-shadow:0 2px 12px #00000008;font-size:15px}.chat-stack span:nth-child(even){margin-left:22px}.pain-solution h3{font-size:24px;margin:20px 0 12px}.pain-solution p{color:#4b5563}.pain-solution a{display:inline-block;color:#c30052;font-weight:800;margin-top:18px}.pricing{background:#fff0f5}.price{color:var(--qo-pink)}.annual-note{margin:8px 0;color:#6b7280;font-size:14px}.quick-faq{margin:32px 0;display:grid;gap:12px}.quick-faq details{border:1px solid #f4e3e8}.quick-faq details p{margin-top:12px}.sticky span{color:var(--qo-pink)}@media(max-width:1024px){.logo{max-width:250px}.logo img{width:250px}}@media(max-width:700px){.logo{max-width:200px}.logo img{width:200px}.logo small{font-size:8px}.pain-grid{grid-template-columns:1fr}.pain-grid article{padding:22px}.hero{margin-bottom:20px}.hero h1{font-size:clamp(32px,8vw,42px)}}

/* Keep the approved wordmark and tagline together as one centred lockup. */
.logo{align-items:center;gap:0;text-align:center;width:300px;max-width:100%}
.logo img{display:block;width:100%;height:auto;max-width:none}
.logo small{display:block;width:100%;margin-top:-3px;text-align:center;font-size:10px;line-height:1.35;letter-spacing:.1px;white-space:nowrap}
@media(max-width:1024px){.logo{width:250px}}
@media(max-width:700px){.logo{width:200px}.logo small{font-size:8px;margin-top:-2px}}

/* Responsive mobile navigation: never stack characters inside pills. */
@media (max-width:700px){
  .shell{padding-left:18px;padding-right:18px}
  header{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:24px}
  header .logo{flex:0 0 200px;width:200px;max-width:100%}
  header nav{width:100%;display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:8px}
  header nav a{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;word-break:normal;overflow-wrap:normal;line-height:1.2;min-height:40px;padding:9px 15px;font-size:13px;text-align:center;flex:0 0 auto}
}
@media (max-width:380px){
  header .logo{flex-basis:185px;width:185px}
  header nav a{padding:8px 12px;font-size:12px}
}

/* Single-row mobile header: preserve 200px brand lockup, move navigation to a tap menu. */
.mobile-menu{display:none}
@media(max-width:700px){
  .shell{padding-left:18px;padding-right:18px}
  header{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:18px;position:relative}
  header .logo{flex:0 1 200px;width:200px;min-width:0}
  header nav{display:none}
  .mobile-menu{display:block;flex:0 0 auto;position:relative;z-index:30}
  .mobile-menu summary{list-style:none;display:flex;align-items:center;gap:9px;border:1px solid #f0bfd1;border-radius:999px;padding:9px 13px;min-height:42px;font-size:13px;font-weight:700;color:#171923;background:white;cursor:pointer}
  .mobile-menu summary::-webkit-details-marker{display:none}
  .mobile-menu-links{position:absolute;right:0;top:calc(100% + 8px);width:180px;padding:8px;background:#fff;border:1px solid #f4d4e1;border-radius:16px;box-shadow:0 12px 30px #1719231c;display:grid;gap:3px}
  .mobile-menu-links a{display:block;text-decoration:none;color:#171923;padding:12px 14px;font-size:14px;white-space:nowrap;border-radius:10px}
  .mobile-menu-links a:hover,.mobile-menu-links a:focus{background:#fff0f5;color:#c30052}
}
@media(max-width:380px){header .logo{flex-basis:185px;width:185px}}

/* Mobile-safe typewriter: reveal text without animating layout dimensions. */
.chip-typewriter{display:inline-flex;align-items:baseline;max-width:100%;white-space:nowrap;vertical-align:middle}
.chip-typewriter .chip-static{flex:none}
.chip-typewriter .typing-slot{display:inline-grid;align-items:baseline;min-width:0}
.chip-typewriter .typing-reserve,.chip-typewriter .typing-text{grid-area:1/1;white-space:nowrap}
.chip-typewriter .typing-reserve{visibility:hidden;pointer-events:none}
.chip-typewriter .typing-text{display:block;width:auto;max-width:none;overflow:visible;clip-path:inset(0 100% 0 0);animation:qo-typeword 5.6s steps(14,end) infinite;will-change:clip-path}
@keyframes qo-typeword{
  0%,13%{clip-path:inset(0 100% 0 0)}
  38%,68%{clip-path:inset(0 0 0 0)}
  88%,100%{clip-path:inset(0 100% 0 0)}
}
@media(max-width:380px){.chip-typewriter{font-size:12px}}
@media(prefers-reduced-motion:reduce){.chip-typewriter .typing-text{animation:none;clip-path:none;will-change:auto}}

/* Logo sizing correction: explicit header specificity to avoid reverting to 200px on desktop. */
@media (min-width:1025px){
  header .logo{width:300px;max-width:300px;flex:0 0 300px}
  header .logo img{display:block;width:300px;max-width:100%;height:auto}
}
@media (min-width:701px) and (max-width:1024px){
  header .logo{width:250px;max-width:250px;flex:0 0 250px}
  header .logo img{width:250px;max-width:100%;height:auto}
}
@media (max-width:700px){
  header .logo img{width:100%;max-width:100%;height:auto}
}

/* Hero CTA note should align with the button and demo link on desktop. */
.hero-copy > .code-note{width:100%;max-width:400px;text-align:center;margin:9px 0 0;}
@media(max-width:700px){.hero-copy > .code-note{max-width:none;text-align:center;}}
/* JS typewriter changes characters rather than element widths: mobile-browser safe. */
.chip-typewriter .typing-text{animation:none!important;clip-path:none!important;will-change:auto;white-space:nowrap;}
.chip-typewriter .typing-slot{display:inline-grid;min-width:0;}

/* Footer social follow link: visible, secondary to the Start Free CTA. */
footer .footer-social{display:flex;justify-content:center;align-items:center;margin:18px 0 12px;}
footer .footer-facebook{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:9px 15px;background:#fff;border:1px solid #ead9df;border-radius:999px;color:#283448;font-size:13px;font-weight:700;line-height:1.3;transition:border-color .2s ease,background-color .2s ease;}
footer .footer-facebook img{display:block;width:22px;height:22px;object-fit:contain;}
footer .footer-facebook:hover{background:#fff1f6;border-color:#ee8aaa;}
footer .footer-facebook:focus-visible{outline:3px solid #ff0066;outline-offset:3px;}
footer .footer-legal{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:12px 0;}
@media(max-width:600px){footer .footer-social{margin:17px 0 13px;}footer .footer-facebook{min-height:44px;}}