/* Example 18: clear touch gestures, concise copy and compact mobile surfaces. */
.use-viewport .demo-screen{touch-action:pan-x pan-y}
.use-note:empty,.use-note[hidden],#guide-note[hidden],.price-detail[hidden]{display:none!important}
.team-package{display:inline-block;margin:6px 0 10px;color:#9ee9dc;font-size:14px;line-height:1.5}
.campaign-scan-label{display:block;margin-top:8px;font-size:12px;line-height:1.4;color:#633b28}
.dashboard-scan-note a{text-decoration:underline;text-underline-offset:4px}

@media(max-width:1200px){
 .campaign-demo{display:grid;gap:20px;min-height:0;margin:26px auto 0;padding:8px 4px;max-width:370px}
 .campaign-print{width:calc(100% - 16px);max-width:285px;min-height:0;margin:0 auto 6px;padding:22px;transform:rotate(-2deg)}
 .campaign-print>span{font-size:21px}
 .campaign-print .ceramic{top:35px;right:-8px;transform:scale(.9) rotate(8deg)}
 .campaign-print p{font-size:27px!important;margin:90px 0 18px!important}
 .campaign-print img{width:80px;height:80px}
 .campaign-target{position:relative;inset:auto;width:100%;max-width:none;padding:20px;box-shadow:0 10px 30px #6f5d3d12}
 .campaign-target>span:first-child{font-size:11px}
 .campaign-target b{font-size:23px;margin:10px 0}
 .campaign-target p{font-size:16px;line-height:1.5;margin:8px 0 14px}
 .campaign-target .campaign-url{font-size:12px;overflow-wrap:anywhere}
}

@media(max-width:600px){
 main>.section{padding-block:44px}
 .intro{padding-block:36px 30px}
 .section h2{font-size:32px;line-height:1.15}
 .section-heading{margin-bottom:24px}
 .section-heading>p{margin-top:16px}
 .section .button,.intro .button{min-height:44px;padding:10px 14px;font-size:15px;line-height:1.4}
 .section .text-arrow,.intro .text-arrow{min-height:44px;font-size:15px}
 .use-slide .use-copy{padding:22px 20px}
 .use-slide .use-copy h3{font-size:30px;margin:14px 0}
 .use-slide .use-copy p{font-size:16px;line-height:1.6}
 .use-slide .use-copy .use-benefit{margin:16px 0;padding-top:14px}
 .use-copy .button{width:auto;max-width:100%;align-self:flex-start}
 .use-copy .use-note{margin-top:10px;font-size:14px;line-height:1.5}
 .use-copy .use-template{font-size:13px!important;line-height:1.5!important;margin:14px 0 0!important;padding-top:14px!important}
 .hospitality{gap:28px}
 .hospitality-accordion summary{min-height:56px;padding-block:16px;font-size:16px}
 .section .hospitality-accordion p{font-size:16px;line-height:1.6}
 .review-gallery{gap:28px}
 .review-template-label{padding-top:16px;font-size:21px}
 .review-gallery article>p{font-size:16px;line-height:1.6;margin-top:8px}
 .review-journey{gap:22px;margin-top:30px;padding-top:24px}
 .review-journey>div{display:grid;grid-template-columns:22px minmax(0,1fr);gap:6px 12px}
 .review-journey>div>span{grid-row:1/3;font-size:13px;padding-top:2px}
 .review-journey h3{font-size:20px;line-height:1.25;margin:0}
 .review-journey p{font-size:16px;line-height:1.6}
 .review-bottom{margin-top:22px}
 .team-workflow{margin-block:18px}
 .guide-tabs button{min-height:64px;padding:10px 12px;font-size:15px;line-height:1.4}
 .guide-panel{padding:20px 16px 0!important;gap:18px}
 .guide-visual{width:calc(100% + 32px);max-width:calc(100% + 32px);margin-inline:-16px}
 .guide-copy h3{font-size:26px;margin:12px 0;line-height:1.2}
 .guide-copy p{font-size:16px;line-height:1.6}
 .dashboard-scan-note{font-size:15px!important;line-height:1.6!important;margin-block:18px 0}
 #dashboard .template-ribbon{padding-top:32px;margin-top:32px}
 .template-ribbon .template-ribbon-copy{margin-bottom:24px}
 .gallery-controls{margin-top:12px}
 .dynamic-section .button{margin-top:8px;gap:16px}
 .pricing-toolbar{gap:14px;margin-bottom:20px;align-items:stretch}
 .pricing-label{font-size:14px;line-height:1.4;margin-bottom:6px}
 .segmented{padding:4px;gap:4px}
 .segmented button{font-size:15px;line-height:1.3;min-height:44px;padding:8px 10px}
 .segmented small{font-size:12px;line-height:1.3;margin:3px 0 0;display:block}
 .plan-grid article{padding:22px 20px;gap:0}
 .plan-grid article>span:first-child{display:none}
 .plan-grid h3{font-size:27px;line-height:1.2;margin:0 0 8px}
 .plan-grid .plan-audience{font-size:15px;line-height:1.5;min-height:0;margin:0 0 14px}
 .price-line{gap:6px}
 .price-line strong{font-size:35px;line-height:1.15}
 .price-line>span{font-size:14px}
 .plan-grid article>.price-tax{font-size:13px;line-height:1.4;margin:6px 0 14px}
 .plan-grid .price-detail{font-size:14px;line-height:1.5;min-height:0;padding-top:0;margin:0 0 14px}
 .plan-grid ul{font-size:15px;line-height:1.5;margin:0 0 18px}
 .plan-grid li{padding:7px 0}
 .plan-grid .button{width:100%;min-height:44px;padding:10px 14px;font-size:15px}
 .plans .pricing-footnote{font-size:14px!important;line-height:1.6!important;margin:18px 0}
 .price-comparison{margin-top:24px}
 .price-comparison>summary{min-height:56px;padding:16px;font-size:16px;line-height:1.5;align-items:center}
 .mobile-feature-group h3{font-size:15px;padding:14px 16px}
 .mobile-feature-row{padding:14px 16px;font-size:15px;gap:14px;grid-template-columns:minmax(0,1fr) 58px}
 .mobile-comparison-picker{padding:14px 16px}
 .mobile-comparison-picker label{font-size:14px}
 .mobile-comparison-picker select{font-size:15px;min-height:44px}
 .pricing-next{padding:24px 0 20px}
 .pricing-next h3{font-size:22px;margin-bottom:8px}
 .pricing-next p,.pricing-next a{font-size:16px;line-height:1.55}
 .pricing-next a{margin-top:12px}
 .purchase-dialog{padding:30px 20px 20px;width:calc(100% - 24px);max-width:440px;max-height:88svh}
 .purchase-dialog>.overline{font-size:12px}
 .purchase-dialog h2{font-size:27px;line-height:1.2;margin:12px 30px 12px 0}
 .purchase-dialog .purchase-total{font-size:18px;line-height:1.4;margin:0 0 14px}
 .purchase-dialog p{font-size:16px;line-height:1.55;margin:12px 0}
 .purchase-dialog>.button{min-height:44px;font-size:15px;line-height:1.4;padding:10px 14px;margin:8px 0 18px}
 .purchase-help{padding:16px 0}
 .purchase-help h3{font-size:16px;line-height:1.4;margin:0}
 .purchase-help>div{font-size:15px;gap:8px 22px}
 .purchase-help a{min-height:44px;display:inline-flex;align-items:center}
 .purchase-dialog .purchase-existing{font-size:14px;line-height:1.5;margin:14px 0 0}
 .faq-items{margin-top:24px}
 .faq summary{min-height:56px;padding-block:16px;font-size:16px;line-height:1.5}
 .faq details p{font-size:16px;line-height:1.6}
 .final-cta>div{gap:12px 24px}
 .footer-top>p{font-size:16px}
}

@media(max-width:360px){
 .section h2{font-size:30px}
 .plan-grid article{padding:20px 16px}
 .segmented button{padding-inline:6px}
 .price-line strong{font-size:33px}
 .campaign-print{padding:20px;max-width:265px}
 .campaign-print p{font-size:25px!important}
}

/* Compact controls; the package information and source comparison remain complete. */
.pricing-toolbar{display:grid;grid-template-columns:max-content max-content 1fr;justify-content:start;align-items:center;gap:18px 28px;margin-bottom:28px}
.pricing-label{font-size:14px;line-height:1.4;margin:0 0 7px;font-weight:600;color:var(--reading)}
.pricing-label>span{color:var(--secondary);font-weight:400}
.pricing-toolbar .segmented{display:flex;width:auto;padding:3px;gap:2px;border-radius:12px;background:var(--panel);border:1px solid var(--border)}
.pricing-toolbar .segmented button{flex:1 0 auto;white-space:nowrap;min-height:44px;padding:9px 17px;font-size:15px;line-height:1.2;border-radius:9px;transition:background 180ms ease,color 180ms ease,box-shadow 180ms ease}
.pricing-toolbar .segmented button[aria-pressed=true]{box-shadow:0 2px 5px #07163914}
.pricing-toolbar .segmented button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pricing-toolbar .period-short,.pricing-toolbar .tax-short{display:none}
.plans .pricing-saving{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:24px 0 0;justify-self:end;color:var(--accent);font-size:14px;line-height:1.5}
.pricing-saving svg{width:20px;height:20px;flex-shrink:0;margin-right:3px}
.pricing-saving strong{font-weight:600}
.price-comparison{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));border-radius:14px;background:var(--surface)}
.price-comparison>summary{display:grid;grid-template-columns:32px minmax(0,1fr) 36px;gap:16px;align-items:center;padding:22px 24px;background:color-mix(in srgb,var(--accent) 6%,var(--surface));border-radius:13px;transition:background 180ms ease}
.price-comparison>summary:hover{background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.price-comparison>summary>.comparison-title,.price-comparison[open]>summary>.comparison-title,.price-comparison[data-accordion-expanded]>summary>.comparison-title{display:block;font-size:inherit;color:var(--reading);transform:none;transition:none}
.comparison-title strong{display:block;font-size:19px;font-weight:600;line-height:1.4}
.comparison-title small{display:block;font-size:15px;line-height:1.5;color:var(--secondary);margin-top:4px;font-weight:400}
.comparison-symbol{width:30px;height:30px;color:var(--accent)}
.price-comparison>summary>.comparison-chevron,.price-comparison[open]>summary>.comparison-chevron,.price-comparison[data-accordion-expanded]>summary>.comparison-chevron{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--border);border-radius:50%;color:var(--accent);transform:none}
.comparison-chevron svg{width:20px;height:20px;transition:transform 300ms cubic-bezier(.22,1,.36,1)}
.price-comparison[data-accordion-expanded=true] .comparison-chevron svg{transform:rotate(180deg)}
.pricing-next{border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:12px;margin-top:24px;padding:25px 28px;gap:24px;background:var(--panel)}
.pricing-next h3{font-size:24px;line-height:1.3;font-weight:600;margin-bottom:8px}
.pricing-next p{font-size:16px;line-height:1.6;max-width:56ch}
.pricing-next .maatwerk-button{display:inline-flex;align-items:center;justify-content:center;gap:24px;flex-shrink:0;min-height:44px;padding:12px 18px;border:1px solid var(--accent);border-radius:8px;color:var(--reading);background:var(--surface);font-size:16px;line-height:1.3;font-weight:600;white-space:nowrap;margin:0;transition:background 180ms ease,box-shadow 180ms ease}
.pricing-next .maatwerk-button:hover{background:color-mix(in srgb,var(--accent) 8%,var(--surface));box-shadow:0 3px 12px #0716390b}
.maatwerk-button span{color:var(--accent)}

@media(max-width:1000px){
 .pricing-toolbar{grid-template-columns:max-content max-content;gap:10px 24px}
 .plans .pricing-saving{grid-column:1/-1;justify-self:start;margin:0}
}
@media(max-width:800px){
 .mobile-comparison-picker{padding:16px;background:var(--surface)}
 .comparison-picker-label{display:block;font-size:15px;font-weight:600;line-height:1.4;margin-bottom:10px}
 .comparison-plan-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:3px;border:1px solid var(--border);border-radius:10px;background:var(--panel)}
 .comparison-plan-tabs button{min-width:0;min-height:44px;border-radius:7px;padding:8px 4px;font-size:15px;line-height:1.3;font-weight:600;color:var(--secondary);background:transparent;transition:color 180ms ease,background 180ms ease}
 .comparison-plan-tabs button[aria-selected=true]{background:var(--active);color:var(--active-text)}
 .comparison-plan-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
 .plans .comparison-swipe-hint{display:flex;align-items:center;gap:7px;font-size:13px;line-height:1.5;margin:10px 0 0;color:var(--secondary)}
 .comparison-swipe-hint svg{width:20px;height:16px;flex-shrink:0;color:var(--accent)}
 .comparison-plan-viewport{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;touch-action:pan-x pan-y;scrollbar-width:none}
 .comparison-plan-viewport::-webkit-scrollbar{display:none}
 .comparison-plan-viewport:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
 #mobile-features{display:flex;align-items:flex-start}
 .comparison-plan-panel{flex:0 0 100%;width:100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
 .mobile-feature-row{font-size:16px;line-height:1.5}
}
@media(max-width:600px){
 .pricing-toolbar{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:10px 16px;margin-bottom:22px}
 .pricing-toolbar .pricing-label{font-size:14px;margin-bottom:6px}
 .pricing-toolbar .segmented{width:100%}
 .pricing-toolbar .segmented button{padding:9px 7px;font-size:15px;min-height:44px}
 .pricing-toolbar .period-long,.pricing-toolbar .tax-long{display:none}
 .pricing-toolbar .period-short,.pricing-toolbar .tax-short{display:inline}
 .plans .pricing-saving{font-size:13px;gap:3px;line-height:1.4}
 .pricing-saving svg{width:18px;height:18px}
 .plan-grid .plan-audience,.plan-grid ul{font-size:16px;line-height:1.55}
 .plan-grid li{padding-block:9px}
 .plan-grid .price-detail{font-size:15px;line-height:1.55}
 .plan-grid article>.price-tax{font-size:14px}
 .price-comparison>summary{grid-template-columns:25px minmax(0,1fr) 30px;gap:10px;padding:18px 14px}
 .comparison-symbol{width:24px;height:24px}
 .comparison-title strong{font-size:17px;line-height:1.4}
 .comparison-title small{font-size:14px;line-height:1.5;margin-top:6px}
 .price-comparison>summary>.comparison-chevron,.price-comparison[open]>summary>.comparison-chevron,.price-comparison[data-accordion-expanded]>summary>.comparison-chevron{width:30px;height:30px}
 .mobile-comparison-picker{padding:14px 12px}
 .comparison-plan-tabs button{font-size:14px}
 .plans .comparison-swipe-hint{align-items:flex-start;font-size:13px}
 .comparison-swipe-hint svg{margin-top:2px}
 .mobile-feature-group h3{font-size:16px;padding:16px}
 .mobile-feature-row{font-size:16px;padding:16px;gap:12px}
 .pricing-next{padding:22px 20px;margin-top:22px}
 .pricing-next h3{font-size:22px}
 .pricing-next p{font-size:16px}
 .pricing-next .maatwerk-button{margin-top:16px;padding:11px 16px;font-size:15px;width:auto}
}
body.quiet-mode .pricing-toolbar button,body.quiet-mode .price-comparison>summary,body.quiet-mode .comparison-chevron svg,body.quiet-mode .maatwerk-button,body.quiet-mode .comparison-plan-tabs button{transition:none}
@media(prefers-reduced-motion:reduce){.pricing-toolbar button,.price-comparison>summary,.comparison-chevron svg,.maatwerk-button,.comparison-plan-tabs button{transition:none}}