/* OfferFlow product page. Loaded only on product pages. */
.offerflow-page { --of-green:#244e42; --of-pale:#e9eeea; }
.offerflow-page figure { margin:0; }
.of-hero { display:grid; grid-template-columns:1fr 1.2fr; gap:48px; align-items:center; padding-block:calc(var(--header) + 64px) 64px; }
.of-wordmark { display:flex; align-items:center; gap:15px; margin-top:22px; font-size:25px; font-weight:650; letter-spacing:-.04em; color:var(--of-green); }
.of-wordmark span { font-size:29px; font-weight:400; }
.of-hero h1 { margin-block:18px 24px; font-size:clamp(38px,3.65vw,54px); line-height:1.08; font-weight:550; letter-spacing:-.045em; text-wrap:balance; }
.of-hero .eyebrow { font-size:10px; }
.of-hero .lead { font-size:17px; }
.of-hero .primary { background:var(--of-green); }
.of-hero .primary:hover { background:#183c32; }
.of-note { margin-top:24px; color:var(--muted); font-size:13px; line-height:1.65; max-width:900px; }
.of-hero .of-note { max-width:460px; }
.of-login { margin-top:10px; font-size:13px; }
.of-figure { min-width:0; border:1px solid #cbd6ce; border-radius:12px; background:#f7faf7; overflow:hidden; box-shadow:0 18px 45px #163a2b08; }
.of-image-label { display:flex; gap:9px; align-items:center; padding:13px 17px; font-size:10px; font-weight:650; letter-spacing:.035em; color:#385647; background:#e8f0e9; }
.of-dot { width:6px; height:6px; border-radius:50%; background:#456e54; flex-shrink:0; }
.of-image-link { display:block; }
.of-image-link:focus-visible { outline-offset:-4px; }
.of-image-link img { width:100%; height:auto; display:block; }
.of-figure figcaption { padding:17px 20px; border-top:1px solid #cbd6ce; display:grid; gap:5px; color:#4b6158; font-size:11px; line-height:1.5; }
.of-figure figcaption strong { color:#244e42; font-size:13px; font-weight:600; }
.of-figure figcaption .text-link { font-size:12px; justify-self:start; padding-block:5px; }
html[lang=de] .of-demo-language { display:none; }
.of-jump-wrap { border-block:1px solid var(--line); background:#f0f2ee; }
.of-jump { display:flex; flex-wrap:wrap; gap:12px 36px; padding-block:12px; }
.of-jump a { min-height:44px; display:flex; align-items:center; font-size:14px; font-weight:600; color:var(--of-green); }
.of-jump a:hover { text-decoration:underline; text-underline-offset:5px; }
.of-section { padding-block:88px; scroll-margin-top:22px; }
.offerflow-page section[id] { scroll-margin-top:24px; }
.offerflow-page .section-heading h2 { max-width:850px; font-size:clamp(32px,3.7vw,51px); text-wrap:balance; }
.offerflow-page .section-intro { max-width:740px; font-size:17px; margin-top:22px; }
.of-steps { margin:44px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.of-steps li { border-top:1px solid #bac8bf; padding-top:20px; }
.of-step-number,.of-card-number { font-size:12px; color:#506b5a; }
.of-steps h3 { font-size:21px; font-weight:600; letter-spacing:-.025em; margin:20px 0 12px; }
.of-steps p,.of-feature-list p,.of-cards p { color:var(--muted); font-size:15px; line-height:1.75; }
.of-callout { display:flex; gap:18px; margin-top:40px; padding:25px 28px; border-left:3px solid #4b725d; background:#eaf0e9; }
.of-callout h3 { font-size:16px; font-weight:600; margin-bottom:7px; }
.of-callout p { font-size:14px; color:#496154; max-width:900px; }
.of-check { color:#3b634e; font-size:19px; }
.of-marketing { background:#e9eeea; }
.of-marketing-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:48px; align-items:start; margin-top:42px; }
.of-feature-list { display:grid; gap:26px; }
.of-feature-list article { border-top:1px solid #c0cec4; padding-top:20px; }
.of-feature-list h3,.of-cards h3 { font-size:22px; line-height:1.3; letter-spacing:-.025em; font-weight:550; margin-bottom:14px; }
.of-marketing .of-callout { background:#f7faf6; }
.of-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; }
.of-ai .of-cards article { background:#fff; border:1px solid var(--line); border-radius:8px; padding:28px; }
.of-card-number { display:block; margin-bottom:25px; }
.of-connections { background:#172d26; color:#fff; }
.of-connections .eyebrow { color:#b2c8bd; }
.of-connections .of-cards article { border-top:1px solid #50665b; padding-top:22px; }
.of-connections p:not(.eyebrow) { color:#c5d4cc; }
.of-faq { display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; }
.of-faq h2 { font-size:clamp(30px,3vw,42px); font-weight:550; letter-spacing:-.035em; line-height:1.15; max-width:400px; }
.of-faq details { border-top:1px solid var(--line); }
.of-faq details:last-child { border-bottom:1px solid var(--line); }
.of-faq summary { cursor:pointer; padding-block:22px; font-weight:550; font-size:16px; line-height:1.5; }
.of-faq summary:focus-visible { outline:3px solid #608da6; outline-offset:4px; }
.of-faq details p { padding:0 0 22px; font-size:15px; color:var(--muted); }
.of-closing h2 { font-size:clamp(34px,4.4vw,60px); }
@media(max-width:1100px) { .of-hero { gap:28px; } .of-hero .actions { flex-direction:column; align-items:flex-start; } .of-steps { gap:20px; } .of-marketing-grid { gap:30px; } }
@media(max-width:900px) {
 .of-hero { grid-template-columns:1fr; gap:36px; padding-top:calc(var(--header) + 40px); }
 .of-hero-copy { max-width:650px; } .of-hero h1 { max-width:680px; font-size:clamp(38px,6vw,58px); }
 .of-hero .actions { flex-direction:row; } .of-hero-figure { max-width:760px; }
 .of-steps { grid-template-columns:repeat(2,1fr); gap:32px; }
 .of-marketing-grid { grid-template-columns:1fr; } .of-feature-list { grid-template-columns:repeat(3,1fr); gap:24px; }
 .of-cards { gap:16px; } .of-ai .of-cards article { padding:22px; }
 .of-faq { grid-template-columns:1fr; gap:32px; }
}
@media(max-width:600px) {
 .of-hero { padding-block:104px 38px; gap:28px; } .of-wordmark { margin-top:18px; font-size:24px; }
 .of-hero h1 { font-size:38px; line-height:1.1; margin-block:15px 20px; } .of-hero .lead { font-size:16px; }
 .of-hero .actions { margin-top:24px; gap:10px; } .of-hero .actions .button { width:100%; }
 .of-hero .of-note { font-size:12px; margin-top:18px; } .of-image-label { padding:11px 12px; font-size:9px; }
 .of-figure figcaption { padding:13px 14px; font-size:11px; } .of-figure figcaption strong { font-size:12px; }
 .of-jump { gap:0 23px; padding-block:8px; } .of-jump a { font-size:13px; }
 .of-section { padding-block:52px; } .offerflow-page .section-heading h2 { font-size:33px; margin-top:16px; }
 .offerflow-page .section-intro { font-size:16px; }
 .of-steps { grid-template-columns:1fr; gap:24px; margin-top:30px; } .of-steps h3 { margin-top:12px; }
 .of-callout { padding:20px; gap:12px; margin-top:30px; } .of-callout p { font-size:14px; }
 .of-marketing-grid { gap:30px; margin-top:28px; } .of-feature-list,.of-cards { grid-template-columns:1fr; gap:22px; }
 .of-feature-list h3,.of-cards h3 { font-size:22px; } .of-card-number { margin-bottom:15px; }
 .of-cards { margin-top:30px; } .of-faq summary { padding-block:19px; }
}

/* Store visitors: pricing, setup and product-specific support. */
.of-plan-grid {display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:36px;}
.of-plan-grid article {border-top:2px solid var(--of-green);padding-top:24px;}
.of-plan-grid h3 {font-size:24px;}.of-plan-grid p {margin-top:16px;line-height:1.7;color:var(--muted);}
.of-plan-grid .of-plan-price {font-size:30px;color:var(--of-green);font-weight:600;}
.of-price-table {width:100%;max-width:800px;border-collapse:collapse;margin-top:40px;font-size:16px;text-align:left;}
.of-price-table caption {text-align:left;font-weight:600;margin-bottom:18px;}
.of-price-table th,.of-price-table td {padding:14px 12px;border-bottom:1px solid var(--line);}
.of-document-links {display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:26px;}
.of-document-links a {padding-block:10px;color:var(--of-green);text-decoration:underline;text-underline-offset:4px;}
.of-guide-list {max-width:900px;margin-top:32px;}
.of-guide details {border-top:1px solid var(--line);}
.of-guide details:last-child {border-bottom:1px solid var(--line);}
.of-guide summary {cursor:pointer;padding-block:22px;font-size:18px;font-weight:550;line-height:1.5;}
.of-guide summary:focus-visible {outline:3px solid #608da6;outline-offset:4px;}
.of-guide details p {padding:0 0 24px;color:var(--muted);font-size:16px;line-height:1.8;overflow-wrap:anywhere;}
@media(max-width:600px){.of-plan-grid{grid-template-columns:1fr;gap:30px}.of-price-table{font-size:14px}.of-price-table th,.of-price-table td{padding:12px 6px}.of-document-links{display:grid;gap:4px}}

/* Auto-Engine demo: HTML/CSS scenes instead of a video download. */
.of-movie { min-width:0; color:#f4f7f8; background:#0d1827; padding:27px; border-radius:13px; box-shadow:0 22px 60px #0d182718; }
.of-movie-top { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:10px; letter-spacing:.08em; color:#b2c8c1; }
.of-movie-counter { font-variant-numeric:tabular-nums; white-space:nowrap; color:#c8ded4; }
.of-movie h2 { font-size:23px; font-weight:550; letter-spacing:-.025em; line-height:1.3; margin-top:22px; }
.of-movie-example { color:#a9bcb8; font-size:11px; margin-top:7px; }
.of-scenes { display:grid; margin-top:8px; }
.of-scene { grid-area:1/1; min-width:0; display:grid; grid-template-rows:235px auto 1fr; transition:opacity .35s ease,transform .35s ease; }
.of-scene[aria-hidden=true] { visibility:hidden; opacity:0; transform:translateY(7px); pointer-events:none; }
.of-scene[aria-hidden=false] { visibility:visible; opacity:1; transform:none; }
.of-scene>h3 { font-size:20px; font-weight:550; letter-spacing:-.02em; line-height:1.3; margin-bottom:10px; }
.of-scene>p { color:#b7c8ce; font-size:14px; line-height:1.6; }
.of-scene-visual { display:flex; gap:20px; align-items:center; justify-content:center; min-width:0; padding-block:22px; }
.of-demo-card { background:#f2f5f0; color:#193229; border:1px solid #cadad0; border-radius:9px; padding:21px; width:100%; }
.of-demo-card .of-demo-title { font-size:18px; font-weight:600; line-height:1.35; letter-spacing:-.02em; }
.of-demo-card p { font-size:13px; }
.of-demo-card .of-demo-kicker { font-size:10px; color:#486151; margin-bottom:9px; text-transform:uppercase; letter-spacing:.05em; }
.of-demo-card strong { display:block; font-size:21px; font-weight:550; margin-bottom:8px; }
.of-demo-symbol { float:right; font-size:25px; color:#416b53; }
.of-demo-pill { display:inline-block; background:#dce9d7; border:1px solid #bed3b5; border-radius:4px; padding:6px 9px; color:#284a32; font-size:11px; margin-top:13px; }
.of-request { max-width:340px; width:94%; transform:rotate(-2deg); box-shadow:9px 10px 0 #ffffff09; }
.of-demo-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; }
.of-demo-options .of-demo-card { padding:18px 15px; min-height:180px; position:relative; }
.of-demo-options .of-demo-kicker { font-size:9px; }
.of-demo-options .of-demo-price { font-size:25px; font-weight:600; margin-top:17px; line-height:1.25; }
.of-demo-price small { font-size:10px; font-weight:400; display:block; color:#486151; margin-top:3px; }
.of-upgrade { background:#dcebcf; border-color:#b7d09f; }
.of-demo-options .of-demo-pill { padding:4px 7px; font-size:10px; margin-top:10px; }
.of-demo-room-icon { color:#72947c; position:absolute; bottom:15px; right:15px; font-size:29px; }
.of-engine-core { display:flex; align-items:center; flex-direction:column; justify-content:center; width:144px; min-width:120px; height:144px; position:relative; border:1px solid #5b867b; background:#16372f; border-radius:50%; }
.of-core-mark { font-size:35px; color:#c9e5c0; line-height:1; margin-bottom:10px; }
.of-engine-core strong { font-size:11px; letter-spacing:.08em; }
.of-engine-core>span:last-child { font-size:9px; color:#b4cfc3; margin-top:6px; }
.of-engine-core::before { content:''; position:absolute; inset:-7px; border:1px dashed #87b6a0; border-radius:50%; opacity:.65; }
.of-movie[data-playing=true] .of-scene[aria-hidden=false] .of-engine-core::before { animation:of-orbit 12s linear infinite; }
@keyframes of-orbit { to { transform:rotate(360deg); } }
.of-engine-checks { padding:0; margin:0; list-style:none; display:grid; gap:14px; }
.of-engine-checks li { display:flex; align-items:center; gap:8px; font-size:12px; color:#d0e2d8; line-height:1.5; }
.of-engine-checks li>span:first-child { color:#bddea2; font-size:15px; }
.of-reminder { max-width:380px; }
.of-reminder>p:last-child { margin-top:16px; color:#486151; font-size:11px; }
.of-booked { max-width:340px; text-align:center; }
.of-booked .of-demo-title { margin-top:11px; }
.of-booked>p { margin-top:6px; }
.of-success-mark { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; background:#244e42; color:white; border-radius:50%; font-size:21px; }
.of-voucher { text-align:center; max-width:350px; border:1px dashed #aacba0; background:#e3edda; }
.of-voucher-line { display:block; color:#527048; font-size:25px; margin-bottom:8px; }
.of-voucher p:last-child { font-size:11px; color:#486151; margin-top:11px; }
.of-movie-controls { margin-top:24px; padding-top:17px; border-top:1px solid #34434e; }
.of-movie-steps { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; }
.of-movie-steps button { background:transparent; border:1px solid transparent; color:#b6c8cc; padding:7px 2px; min-height:46px; border-radius:5px; font-size:11px; line-height:1.5; }
.of-movie-steps button>span { display:block; }
.of-movie-steps button>span:first-child { font-size:10px; margin-bottom:4px; color:#9eafb8; }
.of-movie-steps button[aria-current=step] { background:#26473c; border-color:#6c927c; color:#f1fae9; }
.of-movie-steps button[aria-current=step]>span:first-child { color:#d3e4c5; }
.of-movie-steps button:hover { border-color:#71857d; }
.of-movie-toggle { display:block; margin-top:10px; margin-left:auto; background:transparent; border:0; color:#e2ecdf; text-decoration:underline; text-underline-offset:5px; min-height:44px; padding:6px 0 6px 16px; font-size:12px; }
.of-movie button:focus-visible { outline-color:#d4e9b8; }
.of-movie-note { margin-top:13px; padding-top:13px; border-top:1px solid #34434e; color:#b0c2c5; font-size:10px; line-height:1.7; }
.of-engine-features article { border-top:1px solid #bdccc0; padding-top:23px; }
.of-benefits { background:#e9eeea; }
.of-benefit-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px 50px; margin-top:42px; }
.of-benefit-grid article { border-top:1px solid #bbcabf; padding-block:24px 6px; }
.of-benefit-grid .of-benefit-tag { text-transform:uppercase; letter-spacing:.08em; font-size:10px; color:#496850; font-weight:600; }
.of-benefit-grid h3 { font-size:25px; line-height:1.3; margin-block:12px; letter-spacing:-.03em; font-weight:550; }
.of-benefit-grid p:last-child { font-size:15px; color:var(--muted); line-height:1.75; }
.of-dashboard { display:grid; grid-template-columns:.7fr 1.3fr; gap:48px; align-items:center; }
.of-dashboard .section-heading h2 { font-size:clamp(28px,3vw,42px); margin-top:18px; }
@media(max-width:1100px) { .of-movie { padding:22px; } .of-scene-visual { gap:15px; } .of-engine-core { width:120px; height:120px; } .of-engine-checks li { font-size:11px; } }
@media(max-width:900px) { .of-movie { max-width:650px; width:100%; padding:27px; } .of-dashboard { grid-template-columns:1fr; gap:30px; } .of-engine-core { width:144px; height:144px; } }
@media(max-width:600px) {
 .of-movie { padding:20px 17px; } .of-movie-top { font-size:9px; }
 .of-movie h2 { font-size:21px; margin-top:19px; }
 .of-scene { grid-template-rows:235px auto 1fr; }
 .of-scene>h3 { font-size:19px; } .of-scene>p { font-size:13px; }
 .of-demo-options { gap:8px; } .of-demo-options .of-demo-card { padding:15px 10px; min-height:177px; }
 .of-demo-options .of-demo-card .of-demo-title { font-size:16px; }
 .of-demo-options .of-demo-price { font-size:24px; }
 .of-demo-options .of-demo-pill { font-size:9px; padding-inline:4px; }
 .of-demo-card .of-demo-kicker { letter-spacing:0; }
 .of-engine-core { width:112px; height:112px; min-width:112px; }
 .of-core-mark { font-size:29px; } .of-engine-core strong { font-size:10px; }
 .of-engine-core>span:last-child { font-size:8px; }
 .of-engine-checks { gap:13px; } .of-engine-checks li { font-size:10px; gap:6px; }
 .of-movie-steps { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
 .of-movie-steps button { min-height:44px; font-size:11px; padding:6px 2px; }
 .of-movie-steps button>span:first-child { margin-bottom:1px; }
 .of-movie-controls { margin-top:19px; }
 .of-benefit-grid { grid-template-columns:1fr; gap:22px; margin-top:30px; }
 .of-benefit-grid h3 { font-size:23px; }
 .of-engine-features .of-card-number { margin-bottom:14px; }
}
@media(prefers-reduced-motion:reduce) { .of-scene { transition:none; } .of-engine-core::before { animation:none!important; } }