/* Shared public-page refinements. Product rules never affect the home hero. */
/* Uniform public-site paragraphs above the existing 700px mobile breakpoint.
   Intentional override of page-specific font sizes; all other properties stay intact. */
@media screen and (min-width:701px) {
    body[data-page] p { font-size:17px !important; }
}
#main .eyebrow { font-size:15px; }
#main p { color:#000000 !important; }
#main .dark-section .section-heading > p { color:#ffffff !important; }
#main :is(.restaurant-solution-page,.cafe-solution-page,.qsr-solutions-page) .eyebrow {
    font-size:15px;
    color:var(--color-primary);
}
#main :is(.restaurant-solution-page,.cafe-solution-page,.qsr-solutions-page) :is(h1,h2) :is(span,em) {
    color:#80604b;
    font-style:normal;
}
#main :is(.restaurant-final-cta,.cafe-final-cta,.cloud-challenges,.cloud-closing,.bars-closing) :is(h1,h2) :is(span,em) {
    color:#c4dccb;
}
#main :is(.restaurant-final-cta,.cafe-final-cta,.cloud-closing,.bars-closing) .eyebrow {
    color:var(--color-on-dark);
}
#main :is(.restaurant-final-cta,.cafe-final-cta,.cloud-closing,.bars-closing) p {
    color:var(--color-on-dark) !important;
}
#main :is(h1,h2) > span { color:#80604b; }
#main :is(.milestones-heading,.faq-section) { --marketing-section-title-size:clamp(28px,2.8vw,42px); }
#main .faq-section-title > span { color:#80604b; }
#main .faq-section h2.faq-section-title {
    font-size:clamp(28px,2.8vw,42px);
    line-height:1.2;
    color:#172b22;
    text-align:center;
    margin:16px auto 28px;
    text-wrap:balance;
}
/* Match the homepage typography even on solution pages without page-readability.css. */
#main .milestones-heading h2 {
    font-size:clamp(28px,2.8vw,42px); line-height:1.22; font-weight:700;
    letter-spacing:-.025em; text-wrap:balance; overflow-wrap:anywhere;
}
#main[data-product] .product-hero-heading { grid-column:1 / -1; min-width:0; }
#main[data-product] .pos-page .pos-hero h1 {
    font-size:clamp(38px,4vw,60px);
    line-height:1.12;
    font-weight:700;
    max-width:none;
    margin:14px 0 0;
    text-wrap:balance;
    overflow-wrap:break-word;
}
#main[data-product] .pos-page .eyebrow { font-size:15px; }
#main[data-product] .product-hero-heading h1 .hero-heading-accent { color:#80604b; }
#main[data-product] .pos-page .pos-hero .pos-split { row-gap:26px; }
#main[data-product] .pos-page .pos-section h3 { font-size:23px; line-height:1.35; }
#main[data-product] .pos-page .pos-feature-pair > article > h3 { font-size:28px; }
#main[data-product] .pos-page :is(.smart-businesses,.dine-businesses) h3 { font-size:20px; }
#main[data-product] .pos-page :is(.dine-benefits,.qrop-businesses) h3 { font-size:19px; }
#main[data-product] .pos-page p { color:#293b30; font-weight:400; }
#main[data-product] .pos-page .pos-hero-copy :is(.dm-hero-highlight,.pos-hero-highlight) p { color:#293b30; font-weight:400; }
#main[data-product] .pos-page .dark-section p { color:#e3ece6; }
#main[data-product] .product-section-title { color:#172b22; }
#main[data-product] .product-section-title > span { color:#80604b; }
#main[data-product] .pos-page .enquiry-lead { font-size:23px; line-height:1.4; margin:0 0 24px; }
#main[data-product="pos-billing"] .pos-enquiry .section-heading,
#main[data-product="qr-ordering-pos"] .pos-enquiry .section-heading { text-align:left; margin-left:0; }
#main[data-product="pos-billing"] .pos-enquiry .section-heading > p,
#main[data-product="qr-ordering-pos"] .pos-enquiry .section-heading > p { margin-inline:0; }
#main[data-product] .outlet-card {
    display:flex; flex-direction:column; height:100%; min-width:0; box-sizing:border-box;
    border:1px solid #d4e1d6; border-radius:22px;
    background:#fff; box-shadow:0 8px 26px #17392308;
    position:relative;
}
#main[data-product] .outlet-card > div:last-child:not(:first-child) { display:flex; flex-direction:column; flex:1; }
#main[data-product] .outlet-card .outlet-link {
    display:block; margin-top:auto; padding-top:24px;
    color:#245c45; font-size:15px; font-weight:650; line-height:1.5;
    text-decoration:underline; text-underline-offset:4px;
}
#main[data-product] .outlet-link::after { content:""; position:absolute; inset:0; border-radius:22px; }
#main[data-product] .qrop-businesses .outlet-link { padding:0 18px 22px; }
#main[data-product] .outlet-card .outlet-link.text-link { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; min-height:44px; background:#438760; border:1px solid #438760; border-radius:9px; color:#fff; text-decoration:none; }
#main[data-product] .qrop-businesses .outlet-link.text-link { margin-right:18px; margin-bottom:22px; margin-left:18px; }
#main[data-product] .outlet-card:focus-within { outline:3px solid #245c45; outline-offset:4px; }
.outlet-link .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
    #main[data-product] .outlet-card { transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
    #main[data-product] .outlet-card:hover { transform:translateY(-4px); border-color:#8aad96; box-shadow:0 14px 30px #17392314; }
}
/* Grow the ticket within its existing illustration, without scaling the container. */
#main[data-product="qr-ordering-pos"] .qrop-ticket { max-width:228px; width:44%; padding:20px 16px 16px; }
@media(max-width:980px) {
    #main[data-product] .product-hero-heading { grid-column:auto; }
}
@media(max-width:600px) {
    #main[data-product] .pos-page .pos-hero h1 { font-size:clamp(34px,9vw,42px); }
    #main[data-product] .pos-page .eyebrow { font-size:15px; }
    #main[data-product] .pos-page .pos-section h3 { font-size:22px; }
    #main[data-product] .pos-page .pos-feature-pair > article > h3 { font-size:25px; }
    #main[data-product] .pos-page :is(.smart-businesses,.dine-businesses) h3 { font-size:20px; }
    #main[data-product] .pos-page :is(.dine-benefits,.qrop-businesses) h3 { font-size:19px; }
    #main[data-product] .pos-businesses { grid-template-columns:1fr; }
    #main[data-product="qr-ordering-pos"] .qrop-hero-visual { min-height:610px; }
    #main[data-product="qr-ordering-pos"] .qrop-ticket {
        left:50%; right:auto; bottom:60px; transform:translateX(-50%) rotate(-4deg);
        max-width:228px; width:64%; padding:20px 16px 16px;
    }
}