body.oeralonline.r-page {
  --display: Bricolage;
  --paper: #fff;
  --ink: #202f49;
  --muted: #526075;
  --brand: #2348a0;
  --sand: #f1ede4;
  --pale-blue: #eaf0fd;
  --line: #d9e0ed;
  --radius: 7px;
}
.r-page [hidden] { display: none !important; }
.r-wrap { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.r-page h1, .r-page h2, .r-page h3 { font-weight: 600; }
.r-header { padding-block: 29px; }
.r-header__inner, .r-brand { display: flex; align-items: center; }
.r-header__inner { justify-content: space-between; gap: 25px; }
.r-brand { gap: 13px; }
.r-header .brand { font-size: 27px; }
.r-nav { gap: 31px; font-size: 14px; }
.r-nav__contact { display: inline-flex; align-items: center; gap: 18px; padding: 10px 17px; border: 1px solid var(--line); border-radius: 6px; }
.r-nav__contact svg { width: 17px; }
.r-hero { padding-block: 50px 77px; overflow: hidden; }
.r-hero__layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; }
.r-intro { color: var(--brand); font-size: 15px; font-weight: 600; margin-bottom: 22px; }
.r-hero h1 { font-size: clamp(60px, 5.8vw, 84px); letter-spacing: -.065em; line-height: 1.06; }
.r-description { max-width: 410px; font-size: 18px; line-height: 1.75; color: var(--muted); margin-block: 27px 30px; }
.r-cta { border-radius: 6px; min-height: 56px; font-size: 14px; gap: 20px; padding-inline: 22px; }
.r-location { margin: 19px 0 0; font-size: 12px; color: var(--muted); }
.r-work { position: relative; min-width: 0; padding-top: 2px; }
.r-example-switch { display: flex; gap: 7px; justify-content: flex-end; margin-bottom: 18px; }
.r-example-switch button { padding: 8px 15px; border: 1px solid var(--line); border-radius: 40px; background: #fff; color: var(--muted); cursor: pointer; font-size: 12px; }
.r-example-switch button[aria-pressed=true] { background: var(--brand); color: #fff; border-color: var(--brand); }
.r-example { padding-top: 61px; position: relative; }
.r-wish { position: absolute; top: 0; left: -22px; z-index: 2; width: 240px; padding: 15px 21px; background: var(--sand); border-radius: 13px 13px 13px 0; transform: rotate(-3deg); box-shadow: 0 3px 0 #d7cfc03d; }
.r-wish > span { display: block; font-size: 10px; color: var(--muted); margin-bottom: 5px; }
.r-wish p { font-size: 17px; font-family: Bricolage, DM, sans-serif; line-height: 1.3; font-weight: 550; margin: 0; }
.r-drawn-arrow { position: absolute; width: 80px; height: 65px; left: -48px; top: 60px; color: var(--brand); transform: rotate(15deg); }
.r-website { background: var(--pale-blue); padding: 35px 25px 0; border-radius: 13px 13px 70px 13px; overflow: hidden; position: relative; }
.r-website::after { content: ''; position: absolute; right: -40px; top: 45px; width: 160px; height: 160px; border: 28px solid #d8e3fb; border-radius: 50%; pointer-events: none; }
.r-website a { display: block; position: relative; z-index: 1; }
.r-website .browser-shot { transform: rotate(1.3deg) translateY(12px); transform-origin: bottom left; box-shadow: 0 12px 24px #26396016; border-radius: 6px; }
.r-website .browser-shot img { aspect-ratio: 1425/990; }
.r-decisions { display: flex; gap: 8px 18px; flex-wrap: wrap; padding: 16px 0 10px; }
.r-decisions span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink); }
.r-decisions svg { width: 16px; height: 16px; color: var(--brand); }
.r-demo-caption { display: flex; justify-content: space-between; gap: 15px; align-items: center; font-size: 11px; color: var(--muted); }
.r-demo-caption a { font-weight: 600; font-size: 12px; color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }
.r-demo-caption a > span[aria-hidden] { display: inline-block; margin-left: 4px; text-decoration: none; }
.r-offer { background: var(--sand); padding-block: 64px 32px; }
.r-section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 25px; margin-bottom: 37px; }
.r-section-heading h2 { font-size: clamp(31px, 3vw, 43px); letter-spacing: -.05em; }
.r-section-heading > p { font-size: 14px; color: var(--muted); margin: 0; }
.r-benefits { display: grid; grid-template-columns: repeat(4, 1fr); }
.r-benefits article { padding-inline: 27px; border-left: 1px solid #d8d1c6; }
.r-benefits article:first-child { padding-left: 0; border-left: 0; }
.r-benefits article:last-child { padding-right: 0; }
.r-benefit-icon { width: 31px; height: 31px; color: var(--brand); margin-bottom: 18px; }
.r-benefits h3 { font-size: 23px; margin-bottom: 12px; letter-spacing: -.035em; }
.r-benefits p { font-size: 14px; color: var(--muted); line-height: 1.7; margin: 0; max-width: 220px; }
.r-inclusions { margin-top: 38px; border-top: 1px solid #d8d1c6; padding-top: 19px; }
.r-inclusions > summary { display: flex; gap: 12px; align-items: center; justify-content: center; font-size: 13px; font-weight: 500; list-style: none; }
.r-inclusions > summary > span { font-size: 20px; line-height: 1; }
.r-inclusions[open] > summary > span { transform: rotate(45deg); }
.r-inclusions__body { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 45px; padding-block: 28px 8px; }
.r-inclusions__body p { color: var(--muted); font-size: 14px; margin: 0; }
.r-inclusions__body strong { color: var(--ink); font-weight: 600; }
.r-process { padding-block: 74px 78px; }
.r-process .r-section-heading { margin-bottom: 38px; }
.r-steps { padding: 0; margin: 0; list-style: none; display: grid; grid-template-columns: repeat(3,1fr); }
.r-steps li { position: relative; padding-right: 52px; }
.r-steps li:last-child { padding-right: 0; }
.r-steps li:not(:last-child)::before { content: ''; position: absolute; left: 60px; right: 24px; top: 21px; height: 1px; background: var(--line); }
.r-step-number { display: flex; width: 43px; height: 43px; align-items: center; justify-content: center; font-size: 17px; background: var(--pale-blue); border-radius: 50%; font-family: Bricolage, DM, sans-serif; color: var(--brand); margin-bottom: 21px; }
.r-steps h3 { font-size: 25px; margin-bottom: 13px; }
.r-steps p { color: var(--muted); font-size: 14px; line-height: 1.75; margin: 0; max-width: 300px; }
.r-contact { background: var(--pale-blue); padding-block: 72px; position: relative; }
.r-contact__layout { display: grid; grid-template-columns: 1fr .94fr; gap: 120px; align-items: start; }
.r-contact h2 { font-size: clamp(38px, 4vw, 57px); letter-spacing: -.055em; max-width: 430px; line-height: 1.08; }
.r-contact__copy > p { margin-block: 21px 30px; max-width: 380px; color: var(--muted); font-size: 16px; }
.r-contact-questions { max-width: 420px; }
.r-contact-questions details { border-top: 1px solid #c5d3ee; padding-block: 14px; }
.r-contact-questions summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 15px; font-size: 13px; font-weight: 500; }
.r-contact-questions summary > span { font-size: 20px; line-height: 1; }
.r-contact-questions details[open] summary > span { transform: rotate(45deg); }
.r-contact-questions details p { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 13px 16px 0 0; }
.r-form { background: #fff; border-radius: 12px; padding: 27px; }
.r-form label { font-size: 12px; margin-bottom: 15px; }
.r-form input, .r-form textarea { border-color: #ced6e5; padding-block: 10px; font-size: 13px; background: #fff; }
.r-form textarea { min-height: 73px; }
.r-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.r-website-field { margin-block: 0 16px; }
.r-website-field summary { list-style: none; color: var(--muted); font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.r-website-field summary > span { text-decoration: none; }
.r-form-notice { color: var(--muted); font-size: 11px; margin-block: 0 12px; }
.r-form .r-cta { width: 100%; font-size: 13px; min-height: 51px; }
.r-footer { padding-block: 34px; }
.r-footer__inner { display: flex; align-items: center; gap: 30px; }
.r-footer .brand { font-size: 27px; }
.r-footer__inner > p { color: var(--muted); font-size: 12px; margin: 0; }
.r-footer__inner > div { margin-left: auto; font-size: 10px; color: var(--muted); display: flex; gap: 19px; }
.r-footer__inner > div a { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1100px) {
  .r-wrap { width: calc(100% - 64px); }
  .r-hero__layout { gap: 43px; grid-template-columns: .92fr 1.08fr; }
  .r-hero h1 { font-size: 65px; }
  .r-description { font-size: 17px; }
  .r-wish { width: 220px; left: -13px; }
  .r-drawn-arrow { left: -38px; width: 65px; }
  .r-website { padding-inline: 20px; }
  .r-benefits article { padding-inline: 20px; }
  .r-benefits h3 { font-size: 21px; }
  .r-benefits p { font-size: 14px; }
  .r-steps li { padding-right: 35px; }
  .r-contact__layout { gap: 60px; }
  .r-footer__inner { gap: 20px; flex-wrap: wrap; }
}
@media (max-width: 799px) {
  .r-wrap { width: calc(100% - 40px); }
  .r-header { padding-block: 22px; }
  .r-header__inner { flex-wrap: wrap; gap: 20px; }
  .r-brand { gap: 11px; }
  .r-header .brand { font-size: 25px; }
  .r-nav { width: 100%; padding-top: 10px; gap: 0; }
  .r-nav a { padding-block: 12px; }
  .r-nav__contact { border: 0; border-radius: 0; justify-content: space-between; }
  .r-hero { padding-block: 27px 40px; }
  .r-hero__layout { grid-template-columns: 1fr; gap: 36px; }
  .r-intro { font-size: 13px; margin-bottom: 15px; }
  .r-hero h1 { font-size: clamp(56px, 10.5vw, 80px); }
  .r-description { max-width: 440px; font-size: 16px; margin-block: 20px 23px; }
  .r-cta { font-size: 13px; padding-inline: 20px; min-height: 53px; gap: 17px; }
  .r-location { font-size: 11px; margin-top: 15px; }
  .r-work { width: 100%; max-width: 540px; margin-inline: auto; padding-top: 0; }
  .r-example-switch { margin-bottom: 14px; gap: 6px; }
  .r-example-switch button { font-size: 11px; padding: 7px 13px; }
  .r-example { padding-top: 58px; }
  .r-wish { width: 215px; left: 4px; padding: 13px 17px; }
  .r-wish p { font-size: 16px; }
  .r-drawn-arrow { left: -13px; top: 56px; width: 54px; height: 52px; transform: rotate(-7deg); }
  .r-website { padding: 32px 19px 0; border-radius: 10px 10px 50px 10px; }
  .r-decisions { gap: 8px 15px; padding-top: 13px; }
  .r-decisions span { font-size: 11px; gap: 4px; }
  .r-demo-caption { font-size: 11px; gap: 10px; }
  .r-demo-caption a { font-size: 11px; }
  .r-offer { padding-block: 43px 25px; }
  .r-section-heading { display: block; margin-bottom: 29px; }
  .r-section-heading h2 { font-size: 35px; }
  .r-section-heading > p { font-size: 12px; margin-top: 12px; }
  .r-benefits { grid-template-columns: 1fr 1fr; gap: 28px 25px; }
  .r-benefits article, .r-benefits article:first-child, .r-benefits article:last-child { padding: 0; border: 0; }
  .r-benefit-icon { width: 28px; height: 28px; margin-bottom: 10px; }
  .r-benefits h3 { font-size: 21px; margin-bottom: 8px; }
  .r-benefits p { font-size: 14px; line-height: 1.7; }
  .r-inclusions { margin-top: 26px; padding-top: 17px; }
  .r-inclusions > summary { justify-content: space-between; font-size: 12px; }
  .r-inclusions__body { grid-template-columns: 1fr; gap: 17px; padding-top: 23px; }
  .r-inclusions__body p { font-size: 13px; }
  .r-process { padding-block: 46px; }
  .r-process .r-section-heading { margin-bottom: 30px; }
  .r-steps { grid-template-columns: 1fr; gap: 26px; }
  .r-steps li { padding: 0 0 0 56px; }
  .r-steps li:last-child { padding-right: 0; }
  .r-step-number { position: absolute; left: 0; top: 0; width: 35px; height: 35px; font-size: 15px; margin: 0; }
  .r-steps li:not(:last-child)::before { left: 17px; top: 48px; bottom: -13px; right: auto; width: 1px; height: auto; }
  .r-steps h3 { font-size: 23px; margin-bottom: 8px; padding-top: 3px; }
  .r-steps p { font-size: 14px; max-width: 470px; }
  .r-contact { padding-block: 45px; }
  .r-contact__layout { grid-template-columns: 1fr; gap: 26px; }
  .r-contact h2 { font-size: 43px; max-width: 500px; }
  .r-contact__copy > p { font-size: 14px; max-width: 500px; margin-block: 17px 23px; }
  .r-contact-questions { max-width: none; }
  .r-contact-questions summary { font-size: 14px; }
  .r-contact-questions details p { font-size: 14px; }
  .r-form { padding: 22px; }
  .r-form-row { gap: 12px; }
  .r-form label { font-size: 12px; }
  .r-form input, .r-form textarea { font-size: 15px; padding-inline: 10px; }
  .r-form .r-cta { font-size: 12px; }
  .r-footer { padding-block: 28px; }
  .r-footer__inner { flex-wrap: wrap; gap: 15px; }
  .r-footer .brand { font-size: 25px; }
  .r-footer__inner > p { width: 100%; font-size: 11px; }
  .r-footer__inner > div { margin: 5px 0 0; gap: 18px; font-size: 10px; flex-wrap: wrap; }
}
@media (max-width: 360px) {
  .r-wrap { width: calc(100% - 32px); }
  .r-header .brand { font-size: 23px; }
  .r-brand { gap: 9px; }
  .r-hero h1 { font-size: 51px; }
  .r-description { font-size: 15px; }
  .r-cta { padding-inline: 16px; font-size: 12px; }
  .r-benefits { gap: 24px 18px; }
  .r-benefits h3 { font-size: 20px; }
  .r-benefits p { font-size: 14px; }
  .r-section-heading h2 { font-size: 32px; }
  .r-decisions { gap: 6px 12px; }
  .r-decisions span { font-size: 11px; }
  .r-contact h2 { font-size: 39px; }
  .r-form { padding: 18px; }
  .r-form-row { grid-template-columns: 1fr; gap: 0; }
  .r-form .r-cta { padding-inline: 11px; gap: 10px; font-size: 11px; }
}