/*
 * Company pages (About, Demo, Contact), built on GoSaaS markup (about-us / features / app-landing / contact).
 * Neutral surfaces only: white, #F7F7F9 and near-black; MyCaly green is reserved for buttons, links and check icons.
 * Logical properties for RTL; everything collapses to one column at 375px without horizontal scroll.
 */

/* ---------- Shared bits ---------- */
.mc-kicker { color: var(--body-color); text-transform: uppercase; letter-spacing: .06em; }
.mc-answer-box { max-width: 820px; }
.mc-photo-stack > img, .mc-photo-stack > picture img { display: block; width: 100%; height: auto; border-radius: 15px; }
.mc-text-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--mc-green-700); }
.mc-text-link:hover { color: var(--heading-color); }

/* GoSaaS iconbox icons: dark glyph on a lightly tinted circle */
.cs_iconbox.cs_style_2 .cs_iconbox_icon { color: var(--heading-color); }
.cs_iconbox.cs_style_2 .cs_iconbox_icon svg { width: 26px; height: 26px; }
[dir="rtl"] .cs_iconbox.cs_style_2 .cs_iconbox_icon svg { transform: translate(8px, 12px); }

/* cs_list cs_style_1 in RTL (theme resets the padding; restore it on the start side) */
.cs_list.cs_style_1 .cs_list_icon { line-height: 0; }
[dir="rtl"] .cs_list.cs_style_1.cs_mp_0 li { padding-left: 0; padding-right: 44px; }
[dir="rtl"] .cs_list.cs_style_1.cs_mp_0 .cs_list_icon { left: auto; right: 0; }

/* Small browser frame around a product screenshot */
.mc-mini-browser { overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 24px 48px -20px rgba(10, 10, 16, .35), 0 0 0 1px rgba(10, 10, 16, .05); }
.mc-mini-browser-bar { display: flex; align-items: center; gap: 5px; height: 26px; padding-inline: 12px; background: var(--mc-surface); border-bottom: 1px solid var(--mc-line); }
.mc-mini-browser-bar span { width: 7px; height: 7px; border-radius: 50%; background: #D6D6DD; }
.mc-mini-browser-bar small { margin-inline-start: auto; font-size: 10px; color: var(--gray2-color); }
.mc-mini-browser img { display: block; width: 100%; height: auto; }

/* Small white floating note on a photo */
.mc-float-note {
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 270px;
  padding: 14px 18px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 20px 40px -18px rgba(10, 10, 16, .3);
}
.mc-float-note-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(26, 203, 140, .14); color: var(--mc-green-700); }
.mc-float-note strong { display: block; font-size: 15px; font-weight: 600; color: var(--heading-color); line-height: 1.3; }
.mc-float-note small { display: block; font-size: 13px; color: var(--body-color); }

/* ---------- About: hero ---------- */
.mc-about-head h1 { line-height: 1.12; }
.mc-about-lead { max-width: 680px; }
.mc-about-checks { margin-top: 26px; }
.mc-about-video { margin-bottom: 40px; }
.mc-about-video-btn {
  display: flex;
  width: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--heading-color);
  cursor: pointer;
}
.mc-about-video-btn .mc-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.mc-about-video-btn:hover .mc-cover { transform: scale(1.03); }
.mc-about-video-btn .cs_player_btn { z-index: 1; }
.mc-about-video-btn:focus-visible { outline: 3px solid var(--mc-green); outline-offset: 4px; }
.mc-about-video > .cs_feature_shape_3 { top: -60px; left: auto; inset-inline-start: -70px; z-index: 1; }
.mc-about-badges { z-index: 2; top: 40px; inset-inline-start: -30px; display: grid; justify-items: start; gap: 12px; }
.mc-about-badges .cs_iconbox_icon { line-height: 0; }
.mc-schedule-card {
  z-index: 2;
  bottom: -40px;
  inset-inline-end: -30px;
  width: 300px;
  padding: 20px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 30px 60px -24px rgba(10, 10, 16, .35);
}
.mc-schedule-head { margin-bottom: 14px; }
.mc-schedule-head small { display: block; font-size: 12px; color: var(--gray2-color); }
.mc-schedule-head strong { display: block; font-family: var(--heading-font); font-size: 17px; font-weight: 500; color: var(--heading-color); }
.mc-schedule-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.mc-schedule-list li { display: flex; align-items: center; gap: 10px; }
.mc-schedule-list time { flex: none; width: 40px; font-size: 12px; color: var(--gray2-color); }
.mc-schedule-list li > span { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 10px; background: var(--mc-surface); border-inline-start: 3px solid #D6D6DD; }
.mc-schedule-list li.is-active > span { border-inline-start-color: var(--mc-green); }
.mc-schedule-list strong { display: block; font-size: 13px; font-weight: 600; color: var(--heading-color); }
.mc-schedule-list small { display: block; font-size: 11px; color: var(--body-color); }
.mc-schedule-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--mc-line); font-size: 12px; }
.mc-schedule-foot span { display: inline-flex; align-items: center; gap: 6px; color: var(--mc-green-700); font-weight: 600; }
.mc-schedule-foot strong { color: var(--heading-color); }
@media (max-width: 1199px) {
  .mc-about-badges { inset-inline-start: 20px; top: 20px; }
  .mc-schedule-card { inset-inline-end: 20px; }
}
@media (max-width: 767px) {
  .mc-about-video > .cs_feature_shape_3, .mc-schedule-card { display: none; }
  .mc-about-video { margin-bottom: 0; }
  .mc-about-badges { position: static !important; display: flex; flex-wrap: wrap; margin-top: 16px; }
  .mc-about-badges .cs_iconbox.cs_style_3 { text-wrap: wrap; }
}

/* ---------- About: counters ---------- */
.cs_funfact_number .odometer { font-family: inherit; }
.cs_counter_shape_4 { top: 60px; inset-inline-end: 8%; }
@media (max-width: 991px) { .cs_counter_shape_3, .cs_counter_shape_4 { display: none; } }

/* ---------- About: "What is MyCaly?" ---------- */
.mc-photo-stack .mc-mini-browser { z-index: 2; bottom: -30px; inset-inline-end: -50px; width: 300px; }
.mc-photo-stack > .mc-float-note { top: 36px; inset-inline-start: -40px; }
@media (max-width: 1399px) { .mc-photo-stack .mc-mini-browser { inset-inline-end: -20px; } }
@media (max-width: 991px) {
  .mc-photo-stack .mc-mini-browser { inset-inline-end: 16px; width: 58%; max-width: 300px; }
  .mc-photo-stack > .mc-float-note { inset-inline-start: 16px; top: 16px; }
}

/* ---------- About: pillars (photo + 2×2 iconbox grid) ---------- */
.cs_card.cs_style_1.cs_type_7 .cs_card_thumbnail img { display: block; width: 100%; height: auto; border-radius: inherit; }
[dir="rtl"] .cs_card.cs_style_1.cs_type_7 .cs_card_content { padding-left: 0; padding-right: 85px; }
@media (max-width: 1399px) { [dir="rtl"] .cs_card.cs_style_1.cs_type_7 .cs_card_content { padding-right: 0; } }

/* ---------- About: story ---------- */
.mc-float-caption {
  z-index: 2;
  inset-inline: 24px;
  bottom: 24px;
  margin: 0;
  padding: 18px 22px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 20px 40px -18px rgba(10, 10, 16, .3);
  font-family: var(--heading-font);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--heading-color);
}
.mc-story-shape { top: -50px; inset-inline-end: -10px; z-index: 2; }
.mc-story-quote { margin: 0; padding-inline-start: 22px; border-inline-start: 3px solid var(--mc-green); font-weight: 500; line-height: 1.5; }
.mc-value-box { border: 1px solid var(--mc-line); box-shadow: none; }
.mc-story-closing { max-width: 780px; margin-top: clamp(56px, 7vw, 90px); font-family: var(--heading-font); font-weight: 500; line-height: 1.4; }
@media (max-width: 575px) {
  .mc-float-caption { inset-inline: 12px; bottom: 12px; padding: 14px 16px; font-size: 15px; }
  .mc-story-shape { display: none; }
}

/* ---------- About: MyCaly + Meet Hour ---------- */
.mc-about-duo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 24px; }
.mc-about-duo-plus { align-self: center; width: 56px; height: 56px; background: var(--heading-color); color: #fff; }
.mc-about-duo .cs_iconbox.cs_style_7 { border: 1px solid var(--mc-line); }
.mc-duo-brand { display: flex; align-items: center; gap: 16px; }
.mc-duo-logo { flex: none; width: 60px; height: 60px; border-radius: 15px; background: var(--mc-surface); color: var(--heading-color); }
.mc-duo-logo img { width: 30px; height: 30px; object-fit: contain; }
.mc-duo-tag { display: block; margin-top: 2px; font-size: 15px; color: var(--body-color); }
@media (max-width: 991px) {
  .mc-about-duo { grid-template-columns: 1fr; }
  .mc-about-duo-plus { justify-self: center; }
}

/* ---------- Demo: hero ---------- */
.mc-demo-hero h1 { line-height: 1.12; }
.mc-demo-checks { margin-top: 26px; }
.mc-demo-hero .mc-photo-stack { margin-inline-start: 40px; }
.cs_card.cs_style_1 .mc-demo-badge-top { top: 40px; right: auto; inset-inline-end: -60px; width: 210px; animation: none; z-index: 2; }
.cs_card.cs_style_1 .mc-demo-badge-bottom { bottom: 40px; left: auto; inset-inline-start: -60px; width: 270px; animation: none; z-index: 2; }
.mc-demo-badge-top img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 24px 48px -20px rgba(10, 10, 16, .35); }
.mc-demo-shape { top: -40px; inset-inline-start: -46px; z-index: 0; }
@media (max-width: 1399px) {
  .cs_card.cs_style_1 .mc-demo-badge-top { inset-inline-end: -24px; }
}
@media (max-width: 991px) {
  .mc-demo-hero .mc-photo-stack { margin-inline-start: 0; }
  .cs_card.cs_style_1 .mc-demo-badge-top { inset-inline-end: 12px; top: 16px; width: 38%; max-width: 210px; }
  .cs_card.cs_style_1 .mc-demo-badge-bottom { inset-inline-start: 12px; bottom: 16px; width: 52%; max-width: 270px; }
  .mc-demo-shape { display: none; }
}

/* ---------- Demo: product tour ---------- */
.mc-tour-tabs { background: #fff; border-color: var(--mc-line); }
.mc-pill-tabs button .mc-icon { vertical-align: -3px; }
.mc-tour-card { padding: clamp(24px, 4vw, 48px); border: 1px solid var(--mc-line); }
.mc-tour-icon { width: 56px; height: 56px; background: var(--mc-surface); color: var(--heading-color); }
.mc-interface { overflow: hidden; border-radius: 12px; border: 1px solid var(--mc-line); background: #fff; }
.mc-interface .mc-mini-browser-bar { height: 32px; }
.mc-interface-shot { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; padding: clamp(10px, 2vw, 20px); background: var(--mc-surface); }
.mc-interface-shot picture { display: contents; }
.mc-interface-shot img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 16px 32px -20px rgba(10, 10, 16, .3); }

/* ---------- Demo: static booking previews (neutral) ---------- */
.mc-demo-lead { max-width: 680px; }
.mc-meta-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; color: var(--body-color); }
.mc-meta-list li { display: flex; align-items: center; gap: 8px; }
.mc-meta-list .mc-icon { color: var(--heading-color); flex: none; }
.mc-slot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mc-slot-grid.mc-slot-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mc-slot { padding: 11px 8px; border-radius: 30px; border: 1px solid var(--mc-line); background: #fff; text-align: center; font-size: 14px; font-weight: 500; color: var(--heading-color); }
.mc-slot.is-active { background: var(--heading-color); border-color: var(--heading-color); color: #fff; }
.mc-portal { border-radius: 15px; box-shadow: none; }
.mc-portal-title { font-weight: 500; }
.mc-preview-fields { margin: 0 0 18px; display: grid; gap: 12px; }
.mc-preview-fields dt { margin-bottom: 6px; font-size: 15px; font-weight: 500; color: var(--heading-color); }
.mc-preview-fields dd { margin: 0; padding: 12px 20px; border: 1px solid var(--mc-line); border-radius: 30px; color: var(--gray2-color); background: #fff; }
.mc-confirm-card { padding: 18px 20px; border-radius: 15px; background: var(--mc-surface); border: 1px solid var(--mc-line); }
.mc-confirm-card > strong { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--heading-color); }
.mc-confirm-card > strong .mc-icon { color: var(--mc-green); flex: none; }
.mc-confirm-card > p { margin: 6px 0 12px; font-size: 14px; }
.mc-confirm-card dl { margin: 0; display: grid; gap: 6px; font-size: 14px; }
.mc-confirm-card dl div { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-confirm-card dt { font-weight: 600; color: var(--heading-color); }
.mc-confirm-card dd { margin: 0; color: var(--body-color); }
@media (max-width: 420px) { .mc-slot-grid.mc-slot-grid-3 { grid-template-columns: 1fr 1fr; } }

/* ---------- Demo: guided demo request ---------- */
.mc-demo-facts { display: grid; gap: 24px; }
.mc-demo-facts .cs_iconbox.cs_style_4.cs_type_1 .cs_iconbox_icon { background: var(--mc-surface); color: var(--heading-color); }
.mc-demo-facts .cs_iconbox.cs_style_4 { align-items: center; }
.mc-demo-picker { padding: clamp(24px, 4vw, 44px); border: 1px solid var(--mc-line); background: #fff; box-shadow: 0 0 30px 0 rgba(10, 10, 16, .04); }
.mc-demo-picker .mc-label { font-weight: 500; font-size: 15px; color: var(--heading-color); }

/* ---------- Contact ---------- */
.mc-contact-head { max-width: 900px; margin-inline: auto; }
.mc-contact-head h1 { line-height: 1.12; }
.mc-contact-lead { max-width: 680px; }
.mc-contact-box .cs_iconbox_icon { line-height: 0; }
.mc-contact-box address { font-style: normal; }
.mc-contact-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.mc-contact-lines a { display: inline-flex; align-items: center; gap: 8px; word-break: break-word; color: var(--heading-color); }
.mc-contact-lines a .mc-icon { color: var(--mc-green-700); flex: none; }
.mc-contact-lines a:hover { color: var(--mc-green-700); }
.mc-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mc-social a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--heading-color); transition: background .2s ease, color .2s ease; }
.mc-social a:hover { background: var(--mc-green); color: #fff; }

.mc-reply-note { display: flex; align-items: center; gap: 8px; }
.mc-reply-note .mc-icon { flex: none; color: var(--mc-green-700); }
.mc-contact-photo img { display: block; width: 100%; height: 440px; object-fit: cover; object-position: top; border-radius: 15px; }
.mc-form-card { padding: clamp(24px, 4vw, 44px); border: 1px solid var(--mc-line); background: #fff; box-shadow: 0 0 30px 0 rgba(10, 10, 16, .04); }
.mc-contact-form .mc-label { margin-bottom: 8px; font-size: 16px; font-weight: 400; color: var(--heading-color); }
.mc-contact-form .mc-input { width: 100%; min-height: 54px; padding: 12px 22px; border: 1px solid var(--border-color); border-radius: 30px; background: #fff; box-shadow: none; }
.mc-contact-form .mc-input:focus { border-color: var(--heading-color); box-shadow: none; outline: 0; }
.mc-contact-form textarea.mc-input { resize: vertical; min-height: 150px; border-radius: 20px; }
.mc-contact-form altcha-widget { display: block; }
.mc-contact-form .altcha { max-width: 100%; border: 1px solid var(--border-color); border-radius: 15px; background: #fff; }
.mc-contact-form .altcha-footer, .mc-contact-form .altcha-logo { display: none; }
.mc-contact-form .cs_btn .mc-icon { margin-inline-start: 8px; }

.mc-contact-support { padding: 40px 0; }
.mc-contact-support .cs_support_text { max-width: 760px; }
.mc-contact-support .cs_btn.cs_style_1 { margin-inline: 0; }
[dir="rtl"] .cs_support_content_wrapper .cs_support_text { padding-left: 0; padding-right: 132px; }
[dir="rtl"] .cs_support_content_wrapper .cs_support_text img { left: auto; right: 0; }
[dir="rtl"] .cs_btn .fa-arrow-right.mc-flip-rtl { transform: scaleX(-1); }
@media (max-width: 575px) {
  [dir="rtl"] .cs_support_content_wrapper .cs_support_text { padding-right: 0; }
  .mc-contact-support .cs_btn.cs_style_1 { margin-inline: auto; }
}

/* Centred page heads keep the answer paragraph centred at every width */
.mc-about-head .mc-answer-box, .mc-contact-head .mc-answer-box { text-align: center; }
.mc-float-note small, .mc-float-note strong { line-height: 1.4; }
.mc-demo-facts .cs_iconbox.cs_style_4 { flex-direction: row; gap: 18px; }
.mc-demo-facts .cs_iconbox.cs_style_4.cs_type_1 .cs_iconbox_icon { width: 56px; height: 56px; }
.cs_card.cs_style_1.mc-demo-hero .cs_card_content .mc-actions .cs_btn.cs_style_1 { margin-top: 0; }