/* =====================================================================
   Overclock /aiops — updates from Figma (Overclock-Ads, nodes 1112:5275
   desktop and 1114:9379 mobile). Layered on top of the live site's
   compiled CSS; breakpoints mirror the live site (640 / 860 / 1024 / 1312).
   ===================================================================== */

:root {
  --oc-ink: #010101;
  --oc-teal: #0b7f6e;
  --oc-teal-bright: #08a991;
  --oc-line: #d4d4d4;
  --oc-line-warm: #d4d1cc;
  --oc-sand: #e9decc;
  --oc-paper: #f9f7f4;
  --oc-muted: #747474;
  --oc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Shared --------------------------------------------------------------- */
.oc-h2 {
  margin: 0;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.14;
  color: var(--oc-ink);
}

.oc-acc-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
  transition: background-color 150ms ease, transform 150ms ease;
}
.oc-acc-btn:hover { background: rgba(var(--fg-rgb), 0.04); }
.oc-acc-btn:active { transform: scale(0.99); }
.oc-acc-icon { flex-shrink: 0; color: var(--oc-ink); display: inline-flex; }
.oc-plus-v { transition: opacity 200ms ease; }
.oc-acc-item.is-open .oc-plus-v { opacity: 0; }
.oc-acc-item.is-open > .oc-acc-btn { background: var(--surface); }

.oc-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 300ms ease-in-out, opacity 300ms ease-in-out;
}
.oc-acc-item.is-open > .oc-acc-panel { grid-template-rows: 1fr; opacity: 1; }
.oc-acc-inner { min-height: 0; overflow: hidden; }

/* Carousel controls (shared by What you get + Feedback) */
.oc-controls {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 25px;
  background: #fff;
  border: 1px solid var(--oc-line);
}
.oc-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 36px;
  margin: 0 -12px;
  color: var(--oc-ink);
  background: none;
  border: 0;
  cursor: pointer;
  transition: opacity 150ms ease;
}
.oc-arrow:disabled { opacity: 0.3; cursor: default; }
.oc-dots { display: flex; align-items: center; gap: 2px; }
.oc-dot {
  width: 6px;
  height: 6.5px;
  background: #fff;
  border: 1px solid #000;
  box-shadow: 0 3px 0 0 #000;
  transition: width 300ms var(--oc-ease);
}
.oc-dot.is-active { width: 32px; }

/* ===================================================================
   What you get
   =================================================================== */
.oc-wyg { padding-top: 32px; }
.oc-wyg .oc-h2 { margin-bottom: 16px; }

.oc-wyg-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--oc-line);
}
.oc-wyg-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px 14px 22px 23px;
  border-left: 1px solid var(--oc-line);
}
.oc-wyg-card:first-child { border-left: 0; }
.oc-wyg-check {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 23px;
  line-height: 28px;
  color: var(--oc-teal);
}
.oc-wyg-text { display: flex; flex-direction: column; gap: 10px; }
.oc-wyg-title { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.14; color: #000; }
.oc-wyg-desc { margin: 0; font-size: 16px; line-height: 1.5; color: #000; }
.oc-wyg-controls { display: none; }

@media (min-width: 1312px) { .oc-wyg { padding-top: 64px; } }

@media (min-width: 860px) and (max-width: 1199px) {
  .oc-wyg-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-wyg-card:nth-child(3) { border-left: 0; }
  .oc-wyg-card:nth-child(n + 3) { border-top: 1px solid var(--oc-line); }
}

/* Mobile: horizontal carousel (Figma 1114:9558) */
@media (max-width: 859px) {
  .oc-wyg-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-right: -16px;
    border-right: 0;
  }
  .oc-wyg-track::-webkit-scrollbar { display: none; }
  .oc-wyg-card {
    flex: 0 0 287px;
    scroll-snap-align: start;
    border-left: 0;
    border-right: 1px solid var(--oc-line);
  }
  .oc-wyg-card:last-child { margin-right: 16px; }
  .oc-wyg-title { font-size: 24px; }
  .oc-wyg-controls { display: inline-flex; height: 38px; border-top: 0; }
}

/* ===================================================================
   Session Breakdown
   =================================================================== */
.oc-modules { padding: 32px 0 24px; }
@media (min-width: 1312px) { .oc-modules { padding: 64px 0 32px; } }

.oc-panel { border: 1px solid var(--oc-line-warm); overflow: hidden; }
.oc-mod-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: #fff;
  color: var(--oc-ink);
}
.oc-mod-intro { margin: 0; font-size: 18px; line-height: 1.5; }

.oc-mod-cols { display: flex; flex-direction: column; background: var(--oc-paper); }
.oc-mod-col { flex: 1 1 0; min-width: 0; }

.oc-mod-btn { min-height: 61px; padding: 8px 16px; }
.oc-mod-num {
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.234;
  letter-spacing: -0.48px;
  color: var(--oc-teal);
  min-width: 18px;
}
.oc-mod-title { flex: 1 1 0; min-width: 0; font-size: 18px; font-weight: 500; line-height: 1.22; color: var(--oc-ink); }
.oc-mod-desc { margin: 0; padding: 0 16px 24px 44px; font-size: 16px; line-height: 1.5; color: var(--oc-ink); }

@media (min-width: 860px) {
  .oc-mod-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    padding: 32px;
  }
  .oc-mod-head .oc-h2 { white-space: nowrap; }
  .oc-mod-intro { max-width: 616px; }
  .oc-mod-cols { flex-direction: row; align-items: flex-start; }
  .oc-mod-btn { padding: 16px 24px; }
  .oc-mod-col:first-child .oc-mod-btn:first-child { min-height: 72px; }
  .oc-mod-desc { padding: 0 32px 24px 52px; }
}

/* ===================================================================
   Featured fellow (Abdulla)
   =================================================================== */
.oc-fellow { padding: 32px 0; }
.oc-fellow-inner { display: flex; flex-direction: column; }
.oc-fellow-copy { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.oc-quote-mark { width: 34px; height: 28px; }
.oc-fellow-quote {
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.14;
  color: var(--oc-ink);
}
.oc-fellow-quote .inline-block { white-space: pre; }
.oc-fellow-attr { display: flex; align-items: center; gap: 28px; }
.oc-fellow-thumb {
  width: 90px;
  height: 91px;
  flex-shrink: 0;
  overflow: hidden;
  background: #e2e2e2;
}
.oc-fellow-thumb img { width: 100%; height: 113%; object-fit: cover; object-position: top center; }
.oc-fellow-meta { display: flex; flex-direction: column; gap: 8px; }
.oc-fellow-name { margin: 0; font-size: 16px; color: #333; }
.oc-fellow-role { margin: 0; font-size: 14px; line-height: 1.2; color: #555; }
.oc-fellow-portrait { display: none; }

@media (min-width: 1024px) {
  .oc-fellow-inner { flex-direction: row; align-items: center; gap: 64px; padding: 0 32px; }
  .oc-fellow-copy { flex: 1 1 0; }
  .oc-quote-mark { width: 41px; height: 34px; margin-bottom: 30px; }
  .oc-fellow-quote { font-size: 38px; }
  .oc-fellow-thumb { display: none; }
  .oc-fellow-portrait {
    display: flex;
    justify-content: center;
    flex: 0 0 398px;
  }
  .oc-fellow-portrait img { width: 307px; height: 345px; object-fit: cover; object-position: bottom; }
}
@media (min-width: 1312px) {
  .oc-fellow-inner { padding: 0 32px; }
  .oc-fellow-quote { font-size: 44px; max-width: 800px; }
}

/* ===================================================================
   Feedback From The Field
   =================================================================== */
.oc-feedback { padding: 24px 0; }
@media (min-width: 1312px) { .oc-feedback { padding: 32px 0; } }

.oc-fb-head {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  padding: 16px;
  background: var(--oc-sand);
}
.oc-fb-label {
  margin: 0;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--oc-muted);
}

.oc-fb-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border: 1px solid var(--oc-line-warm);
  border-top: 0;
  background: #fff;
}
.oc-fb-track::-webkit-scrollbar { display: none; }
.oc-t-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 32px;
  background: #fff;
  border-right: 1px solid var(--oc-line-warm);
}
.oc-t-quote { margin: 0; font-size: 20px; line-height: 1.35; color: #000; }
.oc-t-attr { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.oc-t-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.oc-t-name { margin: 0; font-size: 16px; color: #000; }
.oc-t-role { margin: 0; font-size: 12px; line-height: 1.3; color: var(--oc-muted); }

.oc-fb-bar {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  height: 51px;
  background: #fff;
  border: 1px solid var(--oc-line-warm);
  border-top: 0;
}
.oc-fb-count {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  font-size: 18px;
  color: #000;
}
.oc-fb-controls { padding: 0 15px; }

@media (min-width: 860px) {
  .oc-fb-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 104px;
    padding: 0 32px;
  }
  .oc-fb-label { font-size: 12px; white-space: nowrap; }
  .oc-t-card { flex-basis: calc(100% / 2.2); }
  .oc-fb-count { width: 107px; padding: 0; }
  .oc-fb-controls { padding: 0 25px; }
}
@media (min-width: 1312px) {
  .oc-t-card { flex-basis: calc(100% / 2.65); }
}

/* ===================================================================
   FAQ
   =================================================================== */
.oc-faq { padding-bottom: 32px; }
.oc-faq-list {
  position: relative;
  margin-top: -1px;
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  background: #fff;
  overflow: hidden;
}
.oc-faq-col { flex: 1 1 0; min-width: 0; }
.oc-faq-btn { padding: 16px; }
.oc-faq-q { flex: 1 1 0; min-width: 0; font-size: 16px; font-weight: 500; line-height: 1.33; color: var(--oc-ink); }
.oc-faq-a {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--oc-sand);
  border-bottom: 1px solid var(--oc-ink);
}
.oc-faq-fade { display: none; }
.oc-faq-more { display: none; }

/* Mobile: first 6 questions + "See all" (Figma 1114:9955) */
@media (max-width: 859px) {
  .oc-faq-list:not(.is-expanded) { max-height: 540px; }
  .oc-faq-list:not(.is-expanded) .oc-faq-fade {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 80%);
    pointer-events: none;
  }
  .oc-faq-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: -1px;
    padding: 18px 24px 22px;
    font-size: 18px;
    font-weight: 500;
    color: var(--oc-teal);
    background: #fff;
    border: 1px solid #ddd;
    border-top: 0;
    cursor: pointer;
  }
  .oc-faq-more[aria-expanded="true"] svg { transform: rotate(180deg); }
}

@media (min-width: 860px) {
  .oc-faq-list { flex-direction: row; align-items: flex-start; }
  .oc-faq-btn { padding: 24px; min-height: 76px; }
  .oc-faq-col:last-of-type .oc-faq-btn { min-height: 89px; }
  .oc-faq-q { font-size: 18px; }
  .oc-faq-a { padding: 32px; }
}

/* ===================================================================
   Hero image (Figma 1112:5852 / 1114:9387)
   =================================================================== */
.oc-hero-img { object-position: 50% 50% !important; }
.oc-hero-img.oc-hero-img--figma { object-position: 62% 50% !important; }
@media (max-width: 859px) {
  .oc-hero-img { object-position: 100% 50% !important; } /* mobile: hero images right-aligned */
  .oc-hero-img.oc-hero-img--figma { object-position: 72% 50% !important; }
}

/* Reveal-on-scroll (restores the live site's Framer Motion entrances) */
[data-r-armed] {
  transition: opacity 0.6s var(--oc-ease), transform 0.7s var(--oc-ease);
  will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
  [data-r-armed] { transition: none; }
}

/* ===================================================================
   Spacing + mobile adjustments to match Figma 1114:9379
   =================================================================== */
.oc-faq { padding-top: 32px; }

/* Hero bold line wraps after "workmates," like Figma */
@media (min-width: 860px) {
  #hero strong { max-width: 510px; }
}

/* Testimonial cards keep their own height on mobile */
@media (max-width: 859px) {
  .oc-fb-track { align-items: flex-start; }
}

/* Pricing heading shown at every width (Figma shows it on mobile) */
.oc-price-head { display: flex !important; }
@media (max-width: 1310px) {
  .oc-price-head { max-width: 1000px; }
  .oc-price-head h2 { font-size: 36px; }
}

/* Price + seat stepper side by side from 360px (live switched at 420px) */
@media (min-width: 360px) and (max-width: 419px) {
  .oc-price-row { flex-direction: row !important; align-items: flex-end !important; justify-content: space-between !important; }
  .oc-seat-box { width: 156px !important; flex-shrink: 0; }
}

/* FAQ header on mobile: title only */
@media (max-width: 859px) {
  .oc-faq-art, .oc-faq-desc { display: none !important; }
}

/* Contact on mobile: left aligned, no telephone illustration, name + email side by side */
@media (max-width: 639px) {
  .oc-contact-art { display: none !important; }
  .oc-contact-info { align-items: flex-start !important; padding: 32px 16px !important; }
  .oc-contact-left { text-align: left !important; justify-content: flex-start !important; }
  .oc-contact-row { flex-direction: row !important; gap: 12px !important; }
}

@media (max-width: 859px) {
  .oc-fb-track { transition: height 300ms var(--oc-ease); }
}
/* Price + USD stay on one line next to the seat stepper on small phones */
@media (max-width: 419px) {
  .oc-price-row .font-heading.text-\[44px\] { font-size: 40px; }
  .oc-price-row .flex-wrap { flex-wrap: nowrap; }
}

/* ===================================================================
   Open accordion state — matches the live site's .modules-active-row
   (sand row, white header, minus icon, 24/32px text padding)
   =================================================================== */
.oc-icon-minus { display: none; }
.oc-acc-item.is-open .oc-icon-plus { display: none; }
.oc-acc-item.is-open .oc-icon-minus { display: block; }

.oc-mod-col .oc-acc-item.is-open { background: #e9decc; }
.oc-mod-col .oc-acc-item.is-open > .oc-acc-btn { background: var(--surface); }
.oc-mod-desc { padding: 24px; }
@media (min-width: 640px) { .oc-mod-desc { padding: 32px; } }
@media (min-width: 860px) { .oc-mod-desc { padding: 32px; } }

/* FAQ open state — matches the live site (warm grey question + black rule, sand answer) */
.oc-faq-col .oc-acc-item.is-open > .oc-acc-btn {
  background: #f7f4ee;
  border-bottom: 1px solid #010101;
}
.oc-faq-col .oc-acc-btn:hover { background: rgba(247, 244, 238, 0.6); }

/* Divider between the Session Breakdown header and the session list */
.oc-mod-head { border-bottom: 1px solid #d4d1cc; }

/* ===================================================================
   Featured quote photos — live site images (1476×2082), never stretched.
   Desktop: whole photo, object-fit contain, grayscale like the live site.
   Mobile thumb: cropped (cover) to the head, proportions kept.
   =================================================================== */
.oc-fellow-thumb { background: #e3e3e3; }
.oc-fellow-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 12% !important;
  filter: grayscale(1);
}
@media (min-width: 1024px) {
  .oc-fellow-portrait { align-self: flex-end; }
  .oc-fellow-portrait img {
    width: 307px !important;
    height: 433px !important;
    max-width: none;
    object-fit: contain !important;
    object-position: bottom center !important;
    filter: grayscale(1);
  }
}

/* ===================== Live chat panel (rebuilt from live site) ===================== */
.oc-chat{position:fixed;z-index:55;display:flex;flex-direction:column;overflow:hidden;border:1px solid #666;background:#fff;
  box-shadow:0 12px 16px -4px rgba(10,13,18,.08),0 4px 6px -2px rgba(10,13,18,.03),0 2px 2px -1px rgba(10,13,18,.04);
  left:0;right:0;top:0;height:100dvh;opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease}
.oc-chat[hidden]{display:none}
.oc-chat.is-open{opacity:1;transform:none}
@media (min-width:768px){
  .oc-chat{left:auto;top:auto;right:20px;bottom:84px;height:620px;width:min(460px,calc(100vw - 40px));max-height:calc(100dvh - 104px)}
}
html.oc-chat-open body{overscroll-behavior:contain}
@media (max-width:767px){html.oc-chat-open,html.oc-chat-open body{overflow:hidden}}
.oc-chat-head{display:flex;flex-shrink:0;align-items:flex-start;gap:16px;border-bottom:1px solid #666;padding:14px 20px;background:#e9decc}
.oc-chat-who{display:flex;flex:1;align-items:center;gap:12px;min-width:0}
.oc-chat-avatar{position:relative;width:40px;height:40px;flex-shrink:0;overflow:hidden;border-radius:9999px}
.oc-chat-avatar--lg{width:48px;height:48px}
.oc-chat-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.oc-chat-who-text{display:flex;flex-direction:column;min-width:0}
.oc-chat-name{font-size:18px;font-weight:600;line-height:28px;letter-spacing:-.36px;color:#181d27;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.oc-chat-status{display:flex;align-items:center;gap:6px;font-size:15px;line-height:22px;letter-spacing:-.32px;color:#535862;margin:0}
.oc-chat-dot{width:7px;height:7px;flex-shrink:0;border-radius:9999px;background:#0b7f6e}
.oc-chat-icon{margin-top:2px;width:24px;height:24px;flex-shrink:0;color:#181d27;cursor:pointer;background:none;border:0;padding:0;border-radius:9999px;transition:opacity .15s}
.oc-chat-icon:hover{opacity:.6}
.oc-chat-icon svg{width:100%;height:100%;display:block}
.oc-chat-restart{width:22px;height:22px}
.oc-chat-icon[hidden]{display:none}
.oc-chat-body{position:relative;display:flex;flex:1;flex-direction:column;gap:20px;overflow-y:auto;overscroll-behavior:contain;padding:14px 20px;
  background-color:#fff;background-image:radial-gradient(circle,rgba(0,0,0,.10) 1px,transparent 1px);background-size:20px 20px}
.oc-chat-row{display:flex;align-items:flex-end;gap:8px}
.oc-chat-row--team{padding-right:52px}
.oc-chat-row--visitor{justify-content:flex-end;padding-left:52px}
.oc-chat-bubble{min-width:0;border:1px solid #181d27;padding:8px 12px}
.oc-chat-bubble p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:16px;line-height:24px;letter-spacing:-.32px}
.oc-chat-bubble--team{background:#fff}.oc-chat-bubble--team p{color:#181d27}
.oc-chat-bubble--visitor{background:#0b7f6e}.oc-chat-bubble--visitor p{color:#fff}
.oc-chat-quick{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:flex-end;gap:8px;padding-left:52px}
.oc-chat-q{flex-shrink:0;cursor:pointer;border:1px solid #010101;padding:10px 12px;box-shadow:0 4px 0 #010101;background:var(--cta-secondary-bg,#fff);transition:background-color .15s,transform .15s,box-shadow .15s}
.oc-chat-q span{font-size:15px;line-height:normal;white-space:nowrap;color:#010101}
.oc-chat-q:hover{background:var(--cta-secondary-hover,#d3fff9)}
.oc-chat-q--primary{background:var(--cta-inner,#0b7f6e)}
.oc-chat-q--primary span{font-weight:600;color:#fff}
.oc-chat-q--primary:hover{background:var(--cta-hover,#0fa38d)}
.oc-chat-q:active,.oc-chat-send:active:not(:disabled),.oc-chat-cta:active:not(:disabled){transform:translateY(4px);box-shadow:none}
.oc-chat-pill-row{display:flex;justify-content:center;padding:2px 0}
.oc-chat-pill{border:1px solid #010101;background:#e9decc;padding:4px 12px;font-size:12px;font-weight:500;color:#181d27}
.oc-chat-lead{margin-left:48px;display:flex;flex-direction:column;gap:8px;border:1px solid #010101;background:#f9f7f4;padding:12px;box-shadow:0 4px 0 #010101}
.oc-chat-lead>div:first-child{display:flex;flex-direction:column}
.oc-chat-lead-title{font-size:15px;font-weight:600;color:#181d27}
.oc-chat-lead-sub{font-size:13px;color:#535862}
.oc-chat-lead input{width:100%;border:1px solid #010101;background:#fff;padding:8px 10px;font-size:15px;outline:none;color:#181d27;border-radius:0}
.oc-chat-lead-err{font-size:12px;color:#dc2626}
.oc-chat-lead-err[hidden]{display:none}
.oc-chat-lead-actions{margin-top:2px;display:flex;align-items:center;gap:8px}
.oc-chat-cta{flex:1;cursor:pointer;border:1px solid #010101;background:var(--cta-inner,#0b7f6e);padding:8px 12px;font-size:14px;font-weight:600;color:#fff;box-shadow:0 4px 0 #010101;transition:background-color .15s,transform .15s,box-shadow .15s}
.oc-chat-cta:hover:not(:disabled){background:var(--cta-hover,#0fa38d)}
.oc-chat-cta:disabled{cursor:not-allowed;opacity:.4}
.oc-chat-cta--full{width:100%;padding:10px 12px}
.oc-chat-notnow{cursor:pointer;background:none;border:0;padding:8px;font-size:12px;color:#535862;transition:color .15s}
.oc-chat-notnow:hover{color:#181d27}
.oc-chat-fallback{border:1px solid #010101;background:#e9decc;padding:14px;box-shadow:0 4px 0 #010101}
.oc-chat-fallback p{margin:4px 0 10px;font-size:13px;line-height:1.375;color:#535862}
.oc-chat-foot{flex-shrink:0;border-top:1px solid #666;padding:14px 20px;background:#0b7f6e}
.oc-chat-error{margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid #010101;background:#fff;padding:6px 10px;font-size:13px;color:#dc2626}
.oc-chat-error[hidden]{display:none}
.oc-chat-error button{cursor:pointer;background:none;border:0;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.025em;color:#dc2626}
.oc-chat-form{display:flex;align-items:flex-end;gap:8px}
.oc-chat-input{display:flex;flex:1;align-items:center;border:1px solid #010101;background:#fff;padding:2px 10px;filter:drop-shadow(0 4px 0 #010101)}
.oc-chat-input textarea{min-height:40px;height:44px;width:100%;resize:none;background:transparent;border:0;padding:8px 0;font-size:16px;line-height:24px;letter-spacing:-.32px;outline:none;color:#181d27}
.oc-chat-input textarea::placeholder{color:rgba(24,29,39,.45)}
.oc-chat-send{display:flex;width:44px;height:44px;flex-shrink:0;align-items:center;justify-content:center;border:1px solid #010101;background:var(--cta-secondary-bg,#fff);padding:10px;box-shadow:0 4px 0 #010101;color:#181d27;cursor:pointer;transition:background-color .15s,transform .15s,box-shadow .15s}
.oc-chat-send svg{width:20px;height:20px}
.oc-chat-send:hover:not(:disabled){background:var(--cta-secondary-hover,#d3fff9)}
.oc-chat-send:disabled{cursor:not-allowed;opacity:.4}

/* Feedback cards: long quotes are clamped with "Read more" (set by main.js) */
.oc-t-quote.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.oc-t-more { align-self: flex-start; margin-top: -16px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 16px; font-weight: 600; line-height: 1.4; color: #0b7f6e; text-decoration: underline; text-underline-offset: 3px; }
.oc-t-more:hover { color: #010101; }
.oc-t-more[hidden] { display: none; }

/* ===================== Landing-page switcher (internal tool) ===================== */
.oc-sw{font-family:var(--font-body),Inter,system-ui,sans-serif}
.oc-sw-fab{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:90;display:flex;align-items:center;padding:16px 8px;border:1px solid #e5e5e5;border-left:0;border-radius:0 8px 8px 0;background:#fff;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);cursor:pointer;transition:opacity .15s ease-out,background-color .15s}
.oc-sw-fab:hover{background:#fafafa}
.oc-sw-fab span{writing-mode:vertical-rl;font-size:11px;font-weight:500;letter-spacing:.025em;color:#737373}
.oc-sw.is-open .oc-sw-fab{opacity:0;pointer-events:none}
.oc-sw-panel{position:fixed;left:0;top:50%;z-index:90;width:300px;max-width:calc(100vw - 16px);max-height:80vh;display:flex;flex-direction:column;background:#fff;border:1px solid #e5e5e5;border-left:0;border-radius:0 12px 12px 0;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);overflow:hidden;color:#262626;
  transform:translate(-100%,-50%);opacity:0;pointer-events:none;transition:transform .25s cubic-bezier(.32,.72,0,1),opacity .25s cubic-bezier(.32,.72,0,1)}
.oc-sw.is-open .oc-sw-panel{transform:translate(0,-50%);opacity:1;pointer-events:auto}
.oc-sw-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #f0f0f0}
.oc-sw-head span{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#737373}
.oc-sw-x{display:flex;width:28px;height:28px;align-items:center;justify-content:center;border:0;background:none;color:#a3a3a3;border-radius:6px;cursor:pointer}
.oc-sw-x:hover{background:#f5f5f5;color:#404040}
.oc-sw-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.oc-sw-row{padding:16px;border-bottom:1px solid #f0f0f0}
.oc-sw-row--lead{background:#fafafa}
.oc-sw-row h4{margin:0 0 10px;font-size:15px;font-weight:500;color:#262626}
.oc-sw-row h4 span{color:#a3a3a3;font-weight:400}
.oc-sw-row p{margin:-4px 0 12px;font-size:12px;line-height:1.45;color:#737373}
.oc-sw-pills{display:flex;flex-wrap:wrap;gap:8px}
.oc-sw-pill{border:1px solid #e5e5e5;background:#fff;color:#404040;border-radius:9999px;padding:7px 14px;font-size:13px;cursor:pointer;transition:background-color .15s,border-color .15s}
.oc-sw-pill:hover{border-color:#a3a3a3}
.oc-sw-pill.is-on{background:#262626;border-color:#262626;color:#fff}
.oc-sw-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.oc-sw-thumb{display:flex;flex-direction:column;gap:6px;padding:4px 4px 8px;border:1px solid #e5e5e5;border-radius:8px;background:#fff;cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s}
.oc-sw-thumb:hover{border-color:#a3a3a3}
.oc-sw-thumb.is-on{border-color:#262626;box-shadow:0 0 0 1px #262626}
.oc-sw-thumb img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:5px;display:block;background:#eee}
.oc-sw-thumb span{padding:0 4px;font-size:12px;line-height:1.3;color:#404040}
.oc-sw-thumb em{font-style:normal;color:#0b7f6e;font-weight:600}
.oc-sw-link{display:flex;gap:8px}
.oc-sw-link input{flex:1;min-width:0;border:1px solid #e5e5e5;border-radius:6px;padding:6px 8px;font-size:12px;color:#525252;background:#fafafa}

/* Hero audience line: keep the ">" next to the text when it wraps (longer Job copy) */
.styles-module__gAgepG__details { flex-wrap: nowrap; }
@media (max-width: 1023px) { .styles-module__gAgepG__details { justify-content: center; } .styles-module__gAgepG__details span { text-align: center; } }