/* OrderNow /uber-eats-pickme-integration/ page-only enhancements.
   Extends the supplied digital-qr-menu.css design system without modifying global assets. */

:root { --integration-radius: 22px; }

.integration-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding-top: 24px; padding-bottom: 8px;
  font-size: 12px; font-weight: 800; color: #5e6c84;
}
.integration-breadcrumb a {color:#2043bd}
.integration-breadcrumb a:hover {text-decoration: underline}
.integration-breadcrumb span[aria-current="page"] {color:#25334a}
.integration-breadcrumb span[aria-hidden="true"] {color:#a6b3c7}
.integration-hero {padding: 48px 0 60px}
.integration-hero::after {width: 380px; height: 380px; right: -180px;}
.integration-hero .hero-grid {grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr); gap: 50px}
.integration-hero .hero-copy {min-width: 0}
.integration-hero h1 {font-size:clamp(39px,4.3vw,58px); max-width: 660px; line-height: 1.05}
.integration-hero .integration-hero-lede {color:#182a50; font-size:clamp(18px, 2vw, 23px); margin-bottom: 12px}
.integration-hero .hero-actions {margin-top: 26px}
.integration-benefit-pills {grid-template-columns:repeat(3,minmax(0,1fr)); max-width: 640px;}
.integration-benefit-pills .stat-card {padding:14px 15px; border-radius:16px}
.integration-benefit-pills .stat-card strong {font-size:16px; letter-spacing:-.03em}
.integration-benefit-pills .stat-card span {font-size:12px}
.integration-disclaimer,.integration-footnote {font-size:12px!important; color:#5a6780!important;line-height:1.6!important; margin-top:17px!important}
.integration-hero-visual {margin:0; padding:12px; background:linear-gradient(145deg,#eaf0ff,#ffffff); border:1px solid #e2e9f8; box-shadow: 0 22px 58px rgba(31,68,148,.12);border-radius:30px;}
.integration-hero-visual img {display:block; width:100%; height:auto; border-radius:19px}
.integration-hero-visual figcaption {font-size:11px; padding:10px 7px 2px; color:#63728b; text-align:center;}

.integration-summary {padding:32px 0; background:#0b1735; color:#fff}
.summary-layout {display:grid; grid-template-columns:.7fr 1.3fr; gap:46px; align-items:center;}
.section-kicker {font-size:12px;font-weight:900;letter-spacing:.12em;color:#a9bbff;}
.summary-layout h2 {margin:6px 0 0;font-size:clamp(22px,2.8vw,34px);letter-spacing:-.04em;line-height:1.12;}
.summary-layout p {margin:0;color:#e2e7f8;font-size:16px;line-height:1.75}
.integration-heading {margin-bottom:32px}
.integration-heading .section-title {line-height:1.07}
.integration-pain-grid {margin-top:20px}
.image-with-caption {margin:0}
.image-with-caption figcaption {padding:10px 16px 13px; font-size:11px;line-height:1.45;color:#66758d; background:#fff;}
.integration-pain-grid .image-card img{aspect-ratio:4/3;object-fit:cover}
.integration-pain-grid .pain-card {padding:22px}
.integration-pain-grid .pain-card h3 {font-size:20px}
.integration-tag-grid {display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 20px;}
.integration-tag-grid span {padding:9px 13px; background:#eff4ff;color:#173d9b;border:1px solid #dbe6fe;border-radius:999px;font-weight:800;font-size:12px;line-height:1.3}
.inline-cta {display:inline-flex;align-items:center;gap:8px;font-weight:900;color:#153eeb;border-bottom:2px solid #adc4ff;padding-bottom:4px;margin-top:23px}
.inline-cta:hover {border-color:#153eeb}
.seo-copy a:not(.btn) {color:#234cda;text-decoration:underline;text-decoration-color:#b1c3f5;text-underline-offset:3px}
.seo-copy a:hover {text-decoration-color:#234cda}
.integration-flow-section {background:linear-gradient(180deg,#f8fbff 0%,#fff 100%)}
.integration-flow-section .section-subtitle {max-width:880px}
.integration-flow-illustration {margin:34px 0 30px;border:1px solid #dfe8fc;border-radius:28px;overflow:hidden;background:white;box-shadow:0 15px 55px rgba(20,33,70,.07)}
.integration-flow-illustration img {width:100%;height:auto}
.integration-flow-illustration figcaption {font-size:12px;color:#62718a;text-align:center;padding:6px 18px 16px}
.integration-steps {margin-top:28px}
.integration-compare-section {background:#f8fbff}
.integration-compare-panel {margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:24px;background:none;border:none;}
.integration-compare-panel .compare-column {min-height:100%; padding:30px 32px;border-radius:26px;background:#fff;border:1px solid #e0e8f6; box-shadow: 0 12px 36px rgba(21,39,77,.06)}
.integration-compare-panel .compare-column.after {background:#f3f8ff;border-color:#cbdafe}
.integration-compare-panel .compare-column h3 {font-size:23px;letter-spacing:-.04em;line-height:1.2}
.integration-compare-panel .compare-row {padding:8px 0;line-height:1.5}
.integration-compare-panel .compare-row .check {flex:0 0 auto}
.integration-usecase-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px;margin-top:30px}
.integration-usecase-feature {overflow:hidden}
.integration-usecase-feature img {height:285px; width:100%; object-fit:cover;}
.integration-usecase-feature:nth-child(2) img {object-position:center 22%}
.integration-usecase-feature h3 {font-size:24px;line-height:1.2}
.integration-usecase-feature p {line-height:1.7}
.integration-setup {background:#f7faff}
.integration-setup-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-top:33px}
.integration-setup-card {padding:24px 21px;border-radius:24px;background:#fff;border:1px solid #dce6f6;box-shadow:0 10px 29px rgba(20,33,70,.04)}
.integration-setup-card h3 {font-size:19px;letter-spacing:-.035em;line-height:1.15;margin:15px 0 10px}
.integration-setup-card p {font-size:14px;color:#5f6e83;margin:0;line-height:1.65}
.integration-note {background:#fff9e9;border:1px solid #f2deb1;color:#504225;padding:18px 22px;border-radius:16px;margin-top:25px;font-size:13px;line-height:1.7}
.integration-demo .demo-grid {grid-template-columns:1.1fr .9fr;align-items:center;gap:45px}
.integration-demo-preview {position:relative;overflow:hidden;border-radius:27px;border:1px solid #dfebff;box-shadow:var(--shadow-soft)}
.integration-demo-preview img {width:100%;height:auto}
.demo-preview-label {position:absolute;left:20px;bottom:18px;border-radius:20px;background:rgba(10,23,49,.88);color:#fff;padding:6px 14px;font-size:12px;font-weight:800}
.integration-demo-copy h2 {font-size:clamp(30px,3.4vw,45px);line-height:1.1;letter-spacing:-.045em;margin:19px 0;}
.integration-demo-copy p {color:#627086;font-size:17px;line-height:1.65}
.integration-demo-copy .btn {margin-top:15px}
.integration-faq {background:#f8fbff}
.integration-faq .faq-grid {margin-top:34px}
.integration-faq .faq-item h3 {font-size:19px;line-height:1.24}
.integration-faq .faq-item p {font-size:15px;line-height:1.72}
.integration-final-cta .cta-box {gap:40px;grid-template-columns:.9fr 1.1fr}
.integration-final-cta .section-title {font-size:clamp(34px,3.8vw,50px);line-height:1.1}
.integration-final-cta .section-subtitle {font-size:17px;line-height:1.7}
.integration-final-cta .contact-card a {display:block;color:#f5f8ff;overflow-wrap:anywhere;}
.integration-related {margin-top:26px;color:#e5edff}
.integration-related h3 {font-size:17px;line-height:1.2}
.integration-related p {font-size:14px;line-height:1.8}
.integration-related a {text-decoration:underline;text-underline-offset:3px}
.integration-platform-fieldset {margin:0;padding:12px 14px;border-radius:15px;border:1px solid #dbe5f6;display:flex;flex-wrap:wrap;gap:10px 17px;background:#fff}
.integration-platform-fieldset legend {font-size:13px;font-weight:800;color:#24334d;padding:0 5px}
.integration-platform-fieldset label {display:inline-flex!important;align-items:center;gap:8px;margin:0;font-size:13px!important;font-weight:650!important;cursor:pointer}
.integration-platform-fieldset input[type="checkbox"] {width:17px;height:17px;accent-color:var(--blue);}
.integration-final-cta .lead-form-card {scroll-margin-top:90px}
.integration-final-cta .lead-form textarea {min-height:82px;resize:vertical}
.integration-final-cta .lead-form button {width:100%;white-space:normal;text-align:center;line-height:1.4}
#lead-form:target {outline:3px solid rgba(69,94,235,.15);outline-offset:5px}

/* Accurate original logo proportions. Using the unmodified user-supplied brand file. */
.site-header .brand img {width:154px;height:auto;aspect-ratio:560/176;object-fit:contain}
.footer-brand img {width:178px;height:auto;aspect-ratio:560/176;filter:none;background:#fff;padding:9px;border-radius:13px}

@media(max-width:1100px) {
  .integration-hero .hero-grid {grid-template-columns:1fr;gap:30px}
  .integration-hero-visual {max-width:850px}
  .integration-hero h1 {max-width:850px}
  .summary-layout {gap:25px}
  .integration-setup-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .integration-final-cta .cta-box {grid-template-columns:1fr}
}
@media(max-width:900px) {
  .integration-usecase-grid,.integration-compare-panel,.integration-demo .demo-grid {grid-template-columns:1fr}
  .summary-layout {grid-template-columns:1fr}
  .integration-hero-visual {margin-inline:auto}
  .integration-pain-grid {gap:25px}
}
@media(max-width:700px) {
  .integration-breadcrumb {padding-top:15px;font-size:11px}
  .integration-hero {padding:27px 0 42px}
  .integration-hero h1 {font-size:clamp(36px,10vw,50px);line-height:1.07}
  .integration-hero .eyebrow {font-size:11px;line-height:1.4}
  .integration-benefit-pills {grid-template-columns:1fr;gap:9px}
  .integration-benefit-pills .stat-card {padding:12px 15px}
  .integration-hero-visual {padding:7px;border-radius:20px}
  .integration-hero-visual img {border-radius:13px;display:block}
  .integration-summary {padding:29px 0}
  .summary-layout h2 {font-size:27px}
  .summary-layout p {font-size:15px}
  .integration-pain-grid .pain-cards {grid-template-columns:1fr}
  .image-with-caption figcaption {padding:8px 12px;font-size:10px}
  .integration-flow-illustration {border-radius:18px}
  .integration-flow-illustration figcaption {font-size:11px}
  .integration-compare-panel .compare-column {padding:22px}
  .integration-usecase-feature img {height:240px}
  .integration-setup-grid {grid-template-columns:1fr}
  .integration-setup-card {padding:20px}
  .integration-demo-copy h2 {font-size:33px}
  .integration-demo-preview {border-radius:20px}
  .integration-platform-fieldset {gap:9px 10px}
  .integration-final-cta .contact-card a{font-size:14px}
  .site-header .brand img {width:130px}
  .footer-brand img {width:146px}
}
@media(prefers-reduced-motion:reduce) {
  .integration-hero *, .integration-flow-section * {scroll-behavior:auto!important;transition-duration:.01ms!important}
}