.qrop-page {
    --qrop-green: #245c45;
    --qrop-ink: #20352a;
    --qrop-muted: #53655b;
    --qrop-border: #dce7df;
    --qrop-gold: #d9a84c;
}

.qrop-page .qrop-hero {
    background: radial-gradient(ellipse at 96% 32%, #e6edda, transparent 55%), radial-gradient(ellipse at 45% 110%, #f6eddc, transparent 50%), #fffdf8;
}

.qrop-page .qrop-hero .pos-split {
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
    gap: 28px;
}

.qrop-page .pos-hero-copy {
    max-width: 650px;
}

.qrop-page .qrop-hero h1 {
    max-width: 650px;
    font-size: clamp(32px, 2.8vw, 40px);
    line-height: 1.1;
}

.qrop-hero-visual {
    position: relative;
    min-width: 0;
    min-height: 430px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid #dce6d6;
    border-radius: 28px;
    background: linear-gradient(145deg, #f4f6e9, #e7efe7 54%, #f7eddd);
    box-shadow: 0 24px 64px #17432b12;
}

.qrop-hero-visual::before,
.qrop-hero-visual::after {
    position: absolute;
    z-index: -1;
    content: "";
    border: 1px solid #d4dfce;
    border-radius: 50%;
}

.qrop-hero-visual::before {
    width: 390px;
    height: 390px;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
}

.qrop-hero-visual::after {
    width: 300px;
    height: 300px;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
}

.qrop-visual-caption {
    position: absolute;
    inset: 18px 20px auto;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #526353;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
}

.qrop-visual-caption span:last-child {
    color: #708073;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0;
}

.qrop-device {
    position: absolute;
    background: #fff;
    box-shadow: 0 16px 38px #263a291c;
}

.qrop-phone {
    z-index: 2;
    top: 72px;
    left: 5%;
    width: 42%;
    max-width: 220px;
    min-height: 307px;
    overflow: hidden;
    border: 5px solid #233a30;
    border-radius: 25px;
}

.qrop-device-top {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    border-bottom: 1px solid #e6ebe5;
    color: #526353;
    font-size: 7px;
    letter-spacing: .08em;
}

.qrop-device-top i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #438760;
}

.qrop-device-top b {
    margin-left: auto;
    letter-spacing: .12em;
}

.qrop-phone-body {
    padding: 12px 11px;
}

.qrop-mini-label {
    color: #71816f;
    font-size: 6px;
    font-weight: 700;
    letter-spacing: .12em;
}

.qrop-phone-body h2 {
    margin: 4px 0 12px;
    color: #263d31;
    font-size: clamp(15px, 1.7vw, 20px);
    line-height: 1.12;
    letter-spacing: -.04em;
}

.qrop-food-preview {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    border-top: 1px solid #edf0e9;
}

.qrop-food-preview > span {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    background: #e9efde;
    color: #426b4b;
    font-size: 12px;
    font-weight: 700;
}

.qrop-food-preview:nth-of-type(2) > span {
    background: #f6e8d3;
    color: #986833;
}

.qrop-food-preview div {
    min-width: 0;
    flex: 1;
}

.qrop-food-preview strong,
.qrop-food-preview small {
    display: block;
}

.qrop-food-preview strong {
    color: #293d31;
    font-size: 8px;
}

.qrop-food-preview small {
    margin-top: 2px;
    color: #718071;
    font-size: 6px;
}

.qrop-food-preview > b {
    color: #334a37;
    font-size: 7px;
}

.qrop-phone-button {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    padding: 8px 9px;
    border-radius: 7px;
    background: #2e714e;
    color: #fff;
    font-size: 7px;
    font-weight: 650;
}

.qrop-phone-foot {
    display: block;
    margin-top: 7px;
    color: #839084;
    font-size: 6px;
    text-align: center;
}

.qrop-pos-screen {
    z-index: 1;
    top: 115px;
    right: 5%;
    width: 49%;
    max-width: 278px;
    min-height: 218px;
    padding: 13px;
    border: 1px solid #ccd9ca;
    border-radius: 14px;
    transform: rotate(2deg);
}

.qrop-pos-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 9px;
    border-bottom: 1px solid #e4eae1;
    color: #687668;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .08em;
}

.qrop-pos-top i {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background: #5d9b69;
}

.qrop-pos-top b {
    color: #39704f;
    font-size: 9px;
}

.qrop-pos-order {
    padding: 11px 2px 2px;
}

.qrop-pos-order > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}

.qrop-pos-order > div:first-child strong {
    color: #20382b;
    font-size: 12px;
}

.qrop-status {
    padding: 4px 6px;
    border-radius: 20px;
    background: #fcf0d9;
    color: #8b681d;
    font-size: 6px;
    font-weight: 700;
}

.qrop-pos-order > small {
    display: block;
    margin-top: 5px;
    color: #718071;
    font-size: 7px;
}

.qrop-pos-order p {
    margin: 12px 0;
    color: #37483a;
    font-size: 9px;
    line-height: 1.8;
}

.qrop-pos-progress {
    display: flex;
    gap: 4px;
}

.qrop-pos-progress span {
    height: 4px;
    flex: 1;
    border-radius: 8px;
    background: #dce7d9;
}

.qrop-pos-progress span:first-child,
.qrop-pos-progress span:nth-child(2) {
    background: #559369;
}

.qrop-pos-order > small:last-child {
    display: flex;
    justify-content: space-between;
    font-size: 6px;
}

.qrop-pos-order > small:last-child b {
    color: #39704f;
}

.qrop-ticket {
    z-index: 3;
    right: 16%;
    bottom: 20px;
    width: 40%;
    max-width: 202px;
    min-height: 163px;
    padding: 17px 14px 12px;
    background: repeating-linear-gradient(0deg, #fff 0, #fff 15px, #fbfbf7 16px);
    color: #333d30;
    transform: rotate(-4deg);
    clip-path: polygon(0 0, 100% 0, 100% 94%, 92% 100%, 84% 94%, 76% 100%, 68% 94%, 60% 100%, 52% 94%, 44% 100%, 36% 94%, 28% 100%, 20% 94%, 12% 100%, 4% 94%, 0 100%);
}

.qrop-ticket-pin {
    position: absolute;
    top: -4px;
    left: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d9a84c;
    box-shadow: 0 1px 3px #2225;
}

.qrop-ticket > strong,
.qrop-ticket-number,
.qrop-ticket > small,
.qrop-ticket-ready {
    display: block;
}

.qrop-ticket > strong {
    font-size: 9px;
    letter-spacing: .1em;
}

.qrop-ticket-number {
    margin-top: 6px;
    color: #718071;
    font-size: 7px;
}

.qrop-ticket hr {
    border: 0;
    border-top: 1px dashed #c8cfc2;
}

.qrop-ticket p {
    margin: 8px 0;
    color: #37483a;
    font-size: 9px;
    line-height: 1.7;
}

.qrop-ticket > small {
    color: #718071;
    font-size: 7px;
}

.qrop-ticket-ready {
    margin-top: 9px;
    color: #39704f;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .08em;
}

.qrop-flow-dot {
    position: absolute;
    z-index: 2;
    width: 9px;
    height: 9px;
    border: 2px solid white;
    border-radius: 50%;
    background: #d9a84c;
    box-shadow: 0 0 0 4px #d9a84c33;
}

.qrop-flow-dot-one {
    top: 139px;
    left: 46%;
}

.qrop-flow-dot-two {
    right: 43%;
    bottom: 120px;
    background: #4d8d61;
    box-shadow: 0 0 0 4px #4d8d6133;
}

.qrop-pickup-chip {
    position: absolute;
    z-index: 4;
    right: 5%;
    bottom: 24px;
    padding: 9px 11px;
    border: 1px solid #d6e2d5;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 8px 24px #263a2918;
    color: #38704e;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .06em;
}

.qrop-pickup-chip span {
    display: inline-grid;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    place-items: center;
    border-radius: 50%;
    background: #e4f0e5;
    font-size: 9px;
}

.qrop-experience .section-heading p {
    max-width: 800px;
}

.qrop-experience-grid {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 48px;
}

.qrop-experience-grid .section-heading {
    margin: 0;
    text-align: left;
}

.qrop-experience-grid .section-heading > p {
    margin-inline: 0;
}

.qrop-experience-grid .qrop-motion-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 22px;
    border: 1px solid var(--qrop-border);
    border-radius: 24px;
    background: #f4f7f0;
}

.qrop-experience-grid .qrop-motion-flow::before {
    display: none;
}

.qrop-experience-grid .qrop-motion-flow li {
    min-height: 132px;
    justify-content: center;
    padding: 14px 8px;
    border: 1px solid #e1e9df;
    border-radius: 16px;
    background: #fff;
}

.qrop-experience-grid .qrop-motion-icon {
    margin-bottom: 12px;
}

.qrop-motion-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}

.qrop-motion-flow::before {
    position: absolute;
    z-index: 0;
    top: 31px;
    right: 12%;
    left: 12%;
    height: 1px;
    background: #c9d7c8;
    content: "";
}

.qrop-motion-flow li {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    padding: 0 10px 18px;
    text-align: center;
}

.qrop-motion-icon {
    display: grid;
    width: 62px;
    height: 62px;
    margin-bottom: 16px;
    place-items: center;
    border: 1px solid #d4e0d2;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 22px #273b2810;
    color: #39704f;
    font-size: 15px;
    font-weight: 700;
}

.qrop-motion-flow li:nth-child(2) .qrop-motion-icon {
    background: #eff4e9;
}

.qrop-motion-flow li:nth-child(3) .qrop-motion-icon {
    background: #f8f0df;
    color: #8d6a24;
}

.qrop-motion-flow li:nth-child(4) .qrop-motion-icon {
    background: #eaf3e9;
}

.qrop-motion-flow strong {
    font-size: 15px;
}

.qrop-motion-flow small {
    margin-top: 6px;
    color: #617166;
    font-size: 11px;
}

.qrop-challenges article {
    align-items: flex-start;
}

.qrop-challenge-icon {
    display: grid;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: #edf4e9;
    color: #39704f;
}

.qrop-challenge-icon svg {
    width: 22px;
    height: 22px;
}

.qrop-illustration-note {
    margin: 12px 0 0;
    color: #708073 !important;
    font-size: 11px;
    text-align: center;
}

.qrop-feature-pair > article {
    background: linear-gradient(145deg, #edf4e7, #f7f8f0);
}

.qrop-feature-pair > article:nth-child(2) {
    background: linear-gradient(145deg, #fbf1df, #f8f5eb);
}

.qrop-feature-mock {
    min-height: 190px;
    margin-top: 24px;
    padding: 18px;
    border: 1px solid #e0e7db;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 28px #20432a08;
}

.qrop-mock-brand {
    display: flex;
    justify-content: space-between;
    color: #39704f;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .09em;
}

.qrop-mock-brand b {
    color: #7a8879;
    font-size: 7px;
    font-weight: 600;
}

.qrop-menu-mock > strong {
    display: block;
    margin: 15px 0 10px;
    color: #293d31;
    font-size: 14px;
}

.qrop-menu-mock > div:not(.qrop-mock-brand) {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid #edf0e9;
    color: #344536;
    font-size: 10px;
}

.qrop-menu-mock > div small {
    display: block;
    margin-top: 3px;
    color: #738173;
    font-size: 8px;
}

.qrop-mock-action {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    padding: 8px 10px;
    border-radius: 7px;
    background: #2e714e;
    color: white;
    font-size: 9px;
}

.qrop-status-mock {
    background: #fffefa;
}

.qrop-status-mock ol {
    margin: 13px 0 0;
    padding: 0;
    list-style: none;
}

.qrop-status-mock li {
    position: relative;
    display: grid;
    grid-template-columns: 23px 1fr;
    column-gap: 9px;
    padding: 0 0 12px;
}

.qrop-status-mock li:not(:last-child)::before {
    position: absolute;
    top: 23px;
    bottom: 0;
    left: 11px;
    width: 1px;
    background: #d3dfcf;
    content: "";
}

.qrop-status-mock li > span {
    z-index: 1;
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    border-radius: 50%;
    background: #e6f1e5;
    color: #39704f;
    font-size: 8px;
    font-weight: 700;
}

.qrop-status-mock li:not(:first-child) > span {
    background: #f2f2ea;
    color: #7c8779;
}

.qrop-status-mock li b,
.qrop-status-mock li small {
    align-self: center;
}

.qrop-status-mock li b {
    color: #304234;
    font-size: 9px;
}

.qrop-status-mock li small {
    grid-column: 2;
    color: #728072;
    font-size: 8px;
}

.qrop-benefits article {
    background: linear-gradient(165deg, #fff, #f8faf6);
}

.qrop-steps-section .section-heading p {
    max-width: 640px;
}

.qrop-steps li {
    padding-inline: 6px;
}

.qrop-steps h3 {
    min-height: 44px;
}

.qrop-steps p {
    color: #617166;
    line-height: 1.7;
}

.qrop-businesses {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.qrop-businesses article {
    overflow: hidden;
    border: 1px solid var(--qrop-border);
    border-radius: 20px;
    background: #fff;
}

.qrop-business-art {
    position: relative;
    display: grid;
    min-height: 144px;
    place-items: center;
    overflow: hidden;
    background: #eef3e8;
    color: #42704e;
}

.qrop-business-art::before,
.qrop-business-art::after {
    position: absolute;
    width: 90px;
    height: 90px;
    border: 1px solid currentColor;
    border-radius: 50%;
    content: "";
    opacity: .12;
}

.qrop-business-art::before {
    top: -45px;
    right: -22px;
}

.qrop-business-art::after {
    bottom: -55px;
    left: -20px;
}

.qrop-business-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.qrop-business-art > span {
    position: absolute;
    right: 10px;
    bottom: 9px;
    padding: 6px 8px;
    border-radius: 6px;
    background: #172d25bf;
    color: #fff;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .1em;
}

.qrop-art-pizza {
    background: #f8efe0;
    color: #a17a36;
}

.qrop-art-fast-food {
    background: #f1e9de;
    color: #936244;
}

.qrop-art-counter {
    background: #e8f0e9;
    color: #39704f;
}

.qrop-businesses h3 {
    padding: 18px 18px 0;
    font-size: 17px;
}

.qrop-businesses p {
    padding: 0 18px 20px;
    font-size: 13px;
}

.qrop-faq-section {
    max-width: 980px;
}

.qrop-cta-row {
    justify-content: center;
    margin-top: 24px;
}

.qrop-faq-section .section-heading p {
    max-width: 620px;
}

.qrop-page .faq-list details {
    padding-block: 2px;
    background: #fff;
}

.qrop-page .faq-list summary {
    padding-block: 16px;
    color: #2d4134;
    font-weight: 650;
    line-height: 1.5;
}

.qrop-page .faq-list details p {
    max-width: 780px;
    padding: 0 0 8px;
    font-size: 14px;
}

/* Enquiry preview uses the existing brand palette and keeps the actual form independent. */
#main #qrop-enquiry .section-heading { text-align:center; max-width:960px; margin-inline:auto; }
#main #qrop-enquiry .section-heading > p { margin-inline:auto; }
#main #qrop-enquiry .section-heading > h3 { font-size:20px; margin:20px 0 14px; }
#main #qrop-enquiry .pos-split { align-items:start; gap:clamp(24px,4vw,60px); }
#main #qrop-enquiry .pos-enquiry-copy { min-width:0; padding-top:22px; }
#main #qrop-enquiry .enquiry-lead { margin:26px 0 14px; }
#main #qrop-enquiry .check-list { margin:0 0 20px; }
.qsr-enquiry-preview { margin:0; min-width:0; }
.qsr-enquiry-screen { border:8px solid #20382d; border-radius:24px; background:#fff; overflow:hidden; box-shadow:0 20px 42px #1e42271a; }
.qsr-screen-brand { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:17px; border-bottom:1px solid #deeadf; }
.qsr-screen-brand > strong { font-size:22px; letter-spacing:-.04em; }.qsr-screen-brand strong span { color:#245c45; }.qsr-screen-brand > span { font-size:9px; color:#476452; font-weight:700; letter-spacing:.06em; }
.qsr-screen-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:22px 17px 16px; }
.qsr-screen-heading small { display:block; font-size:9px; color:#526457; letter-spacing:.08em; margin-bottom:7px; }.qsr-screen-heading strong { font-size:20px; }.qsr-screen-heading > span { font-size:9px; color:#526457; }
.qsr-screen-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:0 17px 16px; }
.qsr-screen-summary > span { background:#f0f5ed; border-radius:9px; padding:10px; font-size:10px; color:#405746; }.qsr-screen-summary b { display:block; font-size:20px; color:#245c45; margin-bottom:3px; }
.qsr-screen-orders { padding:0 17px 16px; }
.qsr-screen-order { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:10px; padding:14px 0; border-top:1px solid #e2e9df; }
.qsr-order-token small { display:block; font-size:7px; color:#526457; letter-spacing:.06em; }.qsr-order-token strong { display:block; font-size:21px; color:#245c45; }
.qsr-order-copy strong { display:block; font-size:12px; }.qsr-order-copy small { display:block; font-size:9px; color:#526457; margin-top:5px; }
.qsr-order-status { padding:6px 9px; border-radius:20px; font-size:9px; font-weight:650; }.qsr-order-status.new { background:#e7effa; color:#315d88; }.qsr-order-status.preparing { background:#fff1d7; color:#76521a; }.qsr-order-status.ready { background:#e4f3e6; color:#245c45; }
.qsr-screen-footer { display:flex; justify-content:center; align-items:center; gap:12px; padding:16px 10px; background:#edf4e9; color:#245c45; font-size:10px; font-weight:650; }
.qsr-pickup-display { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px; margin-top:20px; background:#fffdf7; border:1px solid #d8e2d3; border-radius:16px; }
.qsr-pickup-display > div { display:flex; align-items:center; gap:10px; }.qsr-pickup-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#e1f0e2; color:#245c45; flex-shrink:0; }.qsr-pickup-display strong { font-size:13px; }.qsr-pickup-display small { display:block; margin-top:5px; font-size:10px; font-weight:400; color:#526457; }
.qsr-pickup-token { font-size:8px; color:#526457; text-align:center; }.qsr-pickup-token b { display:block; font-size:27px; color:#245c45; }
.qsr-enquiry-preview figcaption { text-align:center; font-size:11px; color:#526457; margin-top:12px; }
/* Keep the preview, supporting copy and CTA within the adjacent desktop form height. */
@media(min-width:981px) {
    #main #qrop-enquiry .pos-enquiry-copy { padding-top:0; }
    #qrop-enquiry .qsr-screen-brand { padding:10px 15px; }
    #qrop-enquiry .qsr-screen-heading { padding:12px 15px; }
    #qrop-enquiry .qsr-screen-summary { margin-bottom:10px; }
    #qrop-enquiry .qsr-screen-summary > span { padding:6px 10px; }
    #qrop-enquiry .qsr-screen-summary b { display:inline-block; font-size:18px; margin:0 5px 0 0; }
    #qrop-enquiry .qsr-screen-order { padding-block:8px; }
    #qrop-enquiry .qsr-screen-orders { padding-bottom:10px; }
    #qrop-enquiry .qsr-screen-footer { padding-block:10px; }
    #qrop-enquiry .qsr-pickup-display { padding:12px 16px; margin-top:12px; }
    #qrop-enquiry .qsr-enquiry-preview figcaption { margin-top:6px; }
    #main #qrop-enquiry .enquiry-lead { margin:12px 0 10px; }
    #main #qrop-enquiry .check-list { margin-bottom:4px; }
    #main #qrop-enquiry .check-list li { padding-block:4px; }
}
@media(min-width:981px) and (max-width:1100px) {
    #main #qrop-enquiry .pos-split { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; }
}
@media(max-width:980px) { #main #qrop-enquiry .pos-enquiry-copy { max-width:620px; width:100%; margin-inline:auto; padding-top:0; } }
@media(max-width:480px) { .qsr-enquiry-screen { border-width:6px; }.qsr-screen-brand { padding:12px; }.qsr-screen-brand strong { font-size:20px; }.qsr-screen-brand > span { font-size:8px; }.qsr-screen-heading { padding:18px 12px 14px; }.qsr-screen-heading strong { font-size:17px; }.qsr-screen-summary { margin-inline:12px; }.qsr-screen-summary > span { padding:8px; }.qsr-screen-orders { padding-inline:12px; }.qsr-screen-order { grid-template-columns:35px minmax(0,1fr); gap:7px; }.qsr-order-status { grid-column:2; justify-self:start; }.qsr-pickup-display { padding:14px; } }
.qrop-enquiry {
    background: linear-gradient(135deg, #eaf2e7, #f4f3e7);
}

.qrop-enquiry .section-heading p {
    max-width: 800px;
}

.qrop-enquiry-flow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 25px;
    color: #657568;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .08em;
}

.qrop-enquiry-flow span {
    padding: 9px 10px;
    border: 1px solid #d2dfd0;
    border-radius: 9px;
    background: #ffffffc9;
}

.qrop-enquiry-flow b {
    color: #47805a;
}

@media (prefers-reduced-motion: no-preference) {
    .qrop-flow-dot-one {
        animation: qrop-pulse 4s ease-in-out infinite;
    }

    .qrop-flow-dot-two {
        animation: qrop-pulse 4s ease-in-out 2s infinite;
    }

    .qrop-motion-flow li {
        animation: qrop-rise 5s ease-in-out infinite;
    }

    .qrop-motion-flow li:nth-child(2) {
        animation-delay: 1s;
    }

    .qrop-motion-flow li:nth-child(3) {
        animation-delay: 2s;
    }

    .qrop-motion-flow li:nth-child(4) {
        animation-delay: 3s;
    }

    @keyframes qrop-pulse {
        0%, 35%, 100% { box-shadow: 0 0 0 4px #d9a84c33; transform: scale(1); }
        16% { box-shadow: 0 0 0 8px #d9a84c20; transform: scale(1.18); }
    }

    @keyframes qrop-rise {
        0%, 70%, 100% { transform: translateY(0); }
        12% { transform: translateY(-5px); }
    }
}

@media (max-width: 1100px) {
    .qrop-page .qrop-hero .pos-split {
        gap: 20px;
    }

    .qrop-hero-visual {
        min-height: 390px;
    }

    .qrop-phone {
        top: 68px;
        left: 3%;
        width: 43%;
    }

    .qrop-pos-screen {
        top: 105px;
        right: 3%;
    }

    .qrop-ticket {
        right: 13%;
    }

    .qrop-businesses {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .qrop-experience-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        max-width: 760px;
        margin-inline: auto;
    }

    .qrop-page .qrop-hero .pos-split {
        grid-template-columns: 1fr;
    }

    .qrop-page .pos-hero-copy {
        max-width: 760px;
    }

    .qrop-hero-visual {
        width: 100%;
        max-width: 680px;
        min-height: 430px;
        margin-inline: auto;
    }

    .qrop-phone {
        left: 8%;
        width: 34%;
    }

    .qrop-pos-screen {
        right: 8%;
        width: 43%;
    }

    .qrop-ticket {
        right: 19%;
    }
}

@media (max-width: 600px) {
    .qrop-page .qrop-hero h1 {
        font-size: clamp(30px, 7vw, 36px);
    }

    .qrop-hero-visual {
        min-height: 380px;
        border-radius: 20px;
    }

    .qrop-visual-caption {
        inset-inline: 13px;
        font-size: 7px;
    }

    .qrop-visual-caption span:last-child {
        font-size: 7px;
    }

    .qrop-hero-visual::before {
        width: 280px;
        height: 280px;
        top: 60px;
    }

    .qrop-hero-visual::after {
        width: 210px;
        height: 210px;
        top: 95px;
    }

    .qrop-phone {
        top: 75px;
        left: 4%;
        width: 43%;
        min-height: 285px;
        border-width: 4px;
        border-radius: 20px;
    }

    .qrop-phone-body {
        padding: 10px 8px;
    }

    .qrop-food-preview {
        gap: 4px;
    }

    .qrop-food-preview > span {
        flex-basis: 25px;
        width: 25px;
        height: 25px;
    }

    .qrop-pos-screen {
        top: 118px;
        right: 3%;
        width: 51%;
        min-height: 192px;
        padding: 10px;
    }

    .qrop-ticket {
        right: 15%;
        bottom: 17px;
        width: 44%;
        min-height: 145px;
        padding-inline: 10px;
    }

    .qrop-pickup-chip {
        right: 3%;
        bottom: 18px;
        padding: 7px;
        font-size: 6px;
    }

    .qrop-flow-dot-one {
        left: 46%;
    }

    .qrop-motion-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 20px;
    }

    .qrop-motion-flow::before {
        display: none;
    }

    .qrop-motion-flow li {
        padding-inline: 4px;
    }

    .qrop-motion-flow strong {
        font-size: 13px;
    }

    .qrop-motion-flow small {
        font-size: 10px;
    }

    .qrop-feature-mock {
        padding: 14px;
    }

    .qrop-businesses {
        gap: 12px;
    }

    .qrop-business-art {
        min-height: 115px;
    }

    .qrop-businesses h3 {
        padding: 14px 13px 0;
        font-size: 15px;
    }

    .qrop-businesses p {
        padding: 0 13px 15px;
        font-size: 12px;
    }

    .qrop-enquiry-flow {
        gap: 5px;
    }

    .qrop-enquiry-flow span {
        padding: 8px 7px;
        font-size: 7px;
    }
}