/* Roboto is used by the original page's icon lists (loaded there via the
   Elementor kit's Google-Fonts link, which non-Elementor pages don't get). */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

/* ==========================================================================
   oo-pricing.css — Elementor-free rebuild of the /pricing/ page as native
   Gutenberg core blocks. Builds on oo-casestudy.css (the page root carries
   both .oo-casestudy and .oo-pricing, which provides the Open Sans base,
   full-width .site-main, hidden page title and the .oo-animate system).
   All rules are scoped under .oo-pricing → safe to enqueue site-wide.
   Palette: navy #464D6A · slate #547A9E · teal #00E4BD · teal-dark #00866F
            ink #262B45 · line #E5E5E5 · band #F8F8F8
   ========================================================================== */

/* ---- Inner width wrapper (one consistent content width for all sections) --
   Mirrors the site header's content box (max-width 1400px + 64px side padding,
   24px below 1024px) so the content edge lines up with the logo/nav. */
.oo-pricing .oo-p-inner {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 64px;
  box-sizing: border-box;
}
@media (max-width: 1023px) {
  .oo-pricing .oo-p-inner { padding-inline: 24px; }
}

/* ---- S1 Hero ------------------------------------------------------------ */
.oo-pricing .oo-p-hero { padding-top: 64px; padding-bottom: 12px; }
.oo-pricing h1.oo-p-h1 {
  font-size: 39px;
  line-height: 40px;
  font-weight: 400 !important;
  color: #464D6A;
  margin: 0 0 16px;
}
.oo-pricing .oo-p-hero-sub { margin: 0; font-weight: 500; }

/* ---- S2 Pricing cards (modern) ------------------------------------------ */
.oo-pricing .oo-p-cardsec { padding-top: 28px; padding-bottom: 72px; }

/* dynamic billing values: yearly shown by default, monthly under .oo-p-monthly.
   The class sits on the page root (.oo-pricing) so ALL sections sync with the
   toggle — pricing cards, user scale and the Cloud-Office add-on box. */
.oo-pricing .oo-p-dyn--m { display: none; }
.oo-pricing.oo-p-monthly .oo-p-dyn--y { display: none; }
.oo-pricing.oo-p-monthly .oo-p-dyn--m { display: inline; }

/* billing toggle — only shown once JS flagged the section (.oo-p-js) */
.oo-pricing .oo-p-toggle {
  display: none;
  margin: 0 auto 30px;
  padding: 5px;
  width: max-content;
  background: #F1F3F5;
  border-radius: 999px;
}
.oo-pricing.oo-p-js .oo-p-toggle { display: flex; }
.oo-pricing .oo-p-toggle__btn {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 9px 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #4A6D90; /* ≥4.5:1 on the #F1F3F5 pill */
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.oo-pricing .oo-p-toggle__btn.is-active {
  background: #fff;
  color: #262B45;
  box-shadow: 0 2px 8px rgba(70, 77, 106, .18);
}
/* compact left-aligned variant (Cloud-Office section) */
.oo-pricing .oo-p-toggle--sm { margin: 0 0 16px; }
.oo-pricing .oo-p-toggle--sm .oo-p-toggle__btn { padding: 7px 14px; font-size: 13px; }
.oo-pricing .oo-p-save {
  background: #00E4BD;
  color: #262B45;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 9px;
}

/* user-count scale: 1 2 3 4 | 5 6 7 ∞ */
.oo-pricing .oo-p-scale {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 22px;
  margin: 0 auto 40px;
}
.oo-pricing .oo-p-scale__nums {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 3px solid rgba(0, 228, 189, .35);
}
.oo-pricing .oo-p-scale__seg--teams .oo-p-scale__nums { border-bottom-color: #00E4BD; }
.oo-pricing .oo-p-scale__nums span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: #464D6A;
  background: #fff;
  border: 2px solid rgba(0, 228, 189, .55);
}
.oo-pricing .oo-p-scale__seg--teams .oo-p-scale__nums span {
  background: #00E4BD;
  border-color: #00E4BD;
  color: #262B45;
}
.oo-pricing .oo-p-scale__label {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #464D6A;
}
.oo-pricing .oo-p-scale__divider {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border-left: 2px dashed #C6CBD4;
  padding-left: 0;
  width: 0;
  position: relative;
}
.oo-pricing .oo-p-scale__divider span {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #547A9E;
}

/* cards */
.oo-pricing .oo-p-cards { gap: 28px; align-items: stretch; }
.oo-pricing .oo-p-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #E9ECEF;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(70, 77, 106, .08);
  padding: 36px 32px 28px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.oo-pricing .oo-p-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(70, 77, 106, .14);
}
.oo-pricing .oo-p-card--best { border: 2px solid #00E4BD; }
.oo-pricing .oo-p-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  background: #00E4BD;
  color: #262B45;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 999px;
  padding: 8px 16px;
  white-space: nowrap;
}
.oo-pricing h2.oo-p-card-title {
  font-size: 30px;
  line-height: 1.25;
  font-weight: 500 !important;
  color: #464D6A;
  margin: 0 0 2px;
}
.oo-pricing .oo-p-card-for {
  margin: 0 0 22px;
  font-size: 15px;
  font-weight: 600;
  color: #547A9E;
}
/* icons live in CSS (data-URIs) so the texts stay plain editable blocks */
.oo-pricing .oo-p-storage {
  position: relative;
  margin: 0 0 18px;
  background: #E9FCF8;
  border-radius: 10px;
  padding: 13px 16px 13px 48px;
  font-size: 15px;
  font-weight: 600;
  color: #464D6A;
  line-height: 1.45;
}
.oo-pricing .oo-p-storage::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%20fill%3D%22%2300CBA8%22%3E%3Cpath%20d%3D%22M576%20304v96c0%2026.51-21.49%2048-48%2048H48c-26.51%200-48-21.49-48-48v-96c0-26.51%2021.49-48%2048-48h480c26.51%200%2048%2021.49%2048%2048zm-48-80a79.557%2079.557%200%200%201%2030.777%206.165L462.25%2085.374A48.003%2048.003%200%200%200%20422.311%2064H153.689a48%2048%200%200%200-39.938%2021.374L17.223%20230.165A79.557%2079.557%200%200%201%2048%20224h480zm-48%2096c-17.673%200-32%2014.327-32%2032s14.327%2032%2032%2032%2032-14.327%2032-32-14.327-32-32-32zm-96%200c-17.673%200-32%2014.327-32%2032s14.327%2032%2032%2032%2032-14.327%2032-32-14.327-32-32-32z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
.oo-pricing .oo-p-features {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.oo-pricing .oo-p-features li {
  position: relative;
  padding-left: 27px;
  list-style: none;
  font-family: Roboto, sans-serif; /* matches the original icon-list font */
  font-size: 16px;
  font-weight: 500;
  line-height: 30px;
  color: #464D6A;
}
.oo-pricing .oo-p-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 17px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%20fill%3D%22%2300CBA8%22%3E%3Cpath%20d%3D%22M352%20320c-22.608%200-43.387%207.819-59.79%2020.895l-102.486-64.054a96.551%2096.551%200%200%200%200-41.683l102.486-64.054C308.613%20184.181%20329.392%20192%20352%20192c53.019%200%2096-42.981%2096-96S405.019%200%20352%200s-96%2042.981-96%2096c0%207.158.79%2014.13%202.276%2020.841L155.79%20180.895C139.387%20167.819%20118.608%20160%2096%20160c-53.019%200-96%2042.981-96%2096s42.981%2096%2096%2096c22.608%200%2043.387-7.819%2059.79-20.895l102.486%2064.054A96.301%2096.301%200%200%200%20256%20416c0%2053.019%2042.981%2096%2096%2096s96-42.981%2096-96-42.981-96-96-96z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
.oo-pricing .oo-p-features li.oo-ic-shield::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22%2300CBA8%22%3E%3Cpath%20d%3D%22M466.5%2083.7l-192-80a48.15%2048.15%200%200%200-36.9%200l-192%2080C27.7%2091.1%2016%20108.6%2016%20128c0%20198.5%20114.5%20335.7%20221.5%20380.3%2011.8%204.9%2025.1%204.9%2036.9%200C360.1%20472.6%20496%20349.3%20496%20128c0-19.4-11.7-36.9-29.5-44.3zM256.1%20446.3l-.1-381%20175.9%2073.3c-3.3%20151.4-82.1%20261.1-175.8%20307.7z%22%2F%3E%3C%2Fsvg%3E");
}
/* price block pinned to the bottom zone so both cards align */
.oo-pricing .oo-p-pricebox {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #EFF1F4;
}
.oo-pricing .oo-p-pricerow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0 4px;
}
.oo-pricing .oo-p-priceval {
  font-size: 48px;
  line-height: 1.15;
  font-weight: 600;
  color: #464D6A;
}
.oo-pricing .oo-p-per {
  font-size: 15px;
  font-weight: 500;
  color: #547A9E;
}
.oo-pricing .oo-p-billnote {
  margin: 0 0 22px;
  font-size: 13.5px;
  font-weight: 500;
  color: #6B7288; /* ≥4.5:1 on white */
  line-height: 1.5;
}
/* buttons: kill the theme's link underline */
.oo-pricing .wp-block-button__link { text-decoration: none; }
/* mint button (shared: card TRY buttons + SEE HOW IT WORKS) */
.oo-pricing .oo-p-btn .wp-block-button__link {
  background-color: #00E4BD;
  color: #262B45;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-radius: 8px;
  padding: 14px 24px;
}
.oo-pricing .oo-p-btn .wp-block-button__link:hover { background-color: #00CBA8; color: #262B45; }
.oo-pricing .oo-p-buynow { text-align: center; margin: 14px 0 0; }
.oo-pricing .oo-p-buynow a {
  color: #00866F;
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
}
.oo-pricing .oo-p-buynow a:hover { text-decoration: underline; }

/* ---- S3 ONLYOFFICE band -------------------------------------------------- */
.oo-pricing .oo-p-ooband {
  background-color: #F8F8F8;
  border-top: 1px solid #E5E5E5;
  padding: 72px 0 68px; /* side gutters come from .oo-p-inner */
}
.oo-pricing .oo-p-oocols { gap: 48px; align-items: center; }
.oo-pricing .oo-p-oo-text { flex-basis: 50%; }
.oo-pricing .oo-p-oo-text h2 { margin-bottom: 24px; }
.oo-pricing .oo-p-oo-logo { margin: 0 0 18px; }
.oo-pricing .oo-p-oo-logo img { width: 252px; height: auto; }
.oo-pricing .oo-p-oo-media { flex-basis: 50%; }
.oo-pricing .oo-p-oo-img { margin: 0; }
.oo-pricing .oo-p-oo-img img { max-width: 520px; width: 100%; height: auto; }
/* Cloud-Office add-on price box (card look, matches the pricing cards) */
.oo-pricing .oo-p-addon {
  background: #fff;
  border: 1px solid #E9ECEF;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(70, 77, 106, .06);
  padding: 20px 22px;
  margin: 6px 0 24px;
}
.oo-pricing .oo-p-addon__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 600;
  color: #464D6A;
}
.oo-pricing .oo-p-addon__per { font-size: 15px; font-weight: 500; color: #547A9E; }
.oo-pricing .oo-p-addon__alt {
  margin: 6px 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #547A9E;
}
.oo-pricing .oo-p-addon__contact { margin: 0; font-size: 14px; }
.oo-pricing .oo-p-see { justify-content: flex-start; margin-top: 0; }
.oo-pricing .oo-p-btn--sm .wp-block-button__link { font-size: 14px; padding: 12px 24px; }

/* ---- S4 Feature grid ----------------------------------------------------- */
.oo-pricing .oo-p-featsec { padding-top: 80px; padding-bottom: 56px; }
.oo-pricing .oo-p-featgrid { gap: 46px; }
.oo-pricing .oo-p-featcol h3.wp-block-heading {
  font-size: 24px;
  line-height: 1.4;
  font-weight: 500 !important;
  color: #464D6A;
  margin: 0 0 14px;
}
.oo-pricing .oo-p-featcol p { margin: 0 0 26px; }
.oo-pricing hr.oo-p-feat-sep {
  border: 0;
  border-top: 1px solid #E5E5E5;
  background: none;
  width: 100%;
  margin: 0 0 26px;
}

/* ---- S5 FAQ (grey full-bleed band like the Cloud-Office section) ---------- */
.oo-pricing .oo-p-faqsec {
  background-color: #F8F8F8;
  border-top: 1px solid #E5E5E5;
  padding: 72px 0 88px;
}
.oo-pricing h2.oo-p-faq-title { margin-bottom: 40px; }
.oo-pricing details.oo-p-faq { margin-bottom: 10px; }
.oo-pricing .oo-p-faq summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 4px 40px 4px 0;
  font-size: 20px;
  line-height: 1.4;
  color: #00755F; /* ≥4.5:1 on the #F8F8F8 band */
}
.oo-pricing .oo-p-faq summary::-webkit-details-marker { display: none; }
/* + / − indicator (matches the original custom accordion) */
.oo-pricing .oo-p-faq summary::before,
.oo-pricing .oo-p-faq summary::after {
  content: '';
  position: absolute;
  top: 50%;
  background-color: #547A9E;
  transition: all .3s;
}
.oo-pricing .oo-p-faq summary::before { right: 18px; width: 1px; height: 16px; margin-top: -9px; }
.oo-pricing .oo-p-faq summary::after  { right: 10px; width: 16px; height: 1px; margin-top: -2px; }
.oo-pricing details.oo-p-faq[open] summary::before { transform: rotate(90deg); }
.oo-pricing .oo-p-faq-a {
  color: #4A6D90; /* ≥4.5:1 on the #F8F8F8 band */
  padding: 15px 0;
  font-size: 16px;
}
.oo-pricing .oo-p-faq-a p { color: #4A6D90; margin: 0 0 14px; }
.oo-pricing .oo-p-faq-a p:last-child { margin-bottom: 0; }
.oo-pricing .oo-p-faq-a a { color: #00755F; }

/* ---- S6 CTA band ---------------------------------------------------------- */
.oo-pricing .oo-p-cta { background-color: #00E4BD; padding: 0; }
.oo-pricing .oo-p-ctacols { gap: 0; align-items: stretch; margin: 0; }
.oo-pricing .oo-p-cta-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 48px 40px;
}
.oo-pricing .oo-p-cta-text {
  color: #262B45;
  font-size: 24px;
  line-height: 32px;
  margin: 0 0 32px;
}
.oo-pricing .oo-p-cta-btnwrap { justify-content: center; }
.oo-pricing .oo-p-cta-btn .wp-block-button__link {
  background-color: #fff;
  color: #262B45;
  font-size: 20px;
  font-weight: 500;
  border-radius: 0;
  padding: 12px 24px;
}
.oo-pricing .oo-p-cta-btn .wp-block-button__link:hover { background-color: #262B45; color: #fff; }
.oo-pricing .oo-p-cta-media { margin: 0; }
.oo-pricing .oo-p-cta-video { margin: 0; height: 100%; }
.oo-pricing .oo-p-cta-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 781px) {
  /* core columns stack below 782px */
  .oo-pricing .oo-p-cards { gap: 34px; }
  .oo-pricing h1.oo-p-h1 { font-size: 30px; line-height: 1.2; }
  .oo-pricing .oo-p-priceval { font-size: 40px; }
  .oo-pricing .oo-p-toggle__btn { padding: 8px 12px; font-size: 13px; gap: 6px; }
  .oo-pricing .oo-p-save { font-size: 10px; padding: 3px 7px; }
  .oo-pricing .oo-p-scale { gap: 14px; margin-bottom: 34px; }
  .oo-pricing .oo-p-scale__nums { gap: 6px; }
  .oo-pricing .oo-p-scale__nums span { width: 28px; height: 28px; font-size: 13px; }
  .oo-pricing .oo-p-scale__label { font-size: 12.5px; }
  .oo-pricing .oo-p-oo-img img { max-width: 100%; }
  .oo-pricing .oo-p-cta-left { padding: 40px 20px; }
  .oo-pricing .oo-p-cta-video video { aspect-ratio: 16 / 9; height: auto; }
}