/* Occasivo advertising (2.2.0): placements, the Advertise page, the campaign builder and the advertiser page.
   Colours come from the active theme (--forest, --orange ...) with the Occasivo palette as the fallback. */

:root {
  --oa-forest: var(--forest, #123c32);
  --oa-forest-2: #225446;
  --oa-orange: var(--orange, #ee7952);
  --oa-orange-ink: #a8401b;
  --oa-ink: var(--ink, #182e27);
  --oa-cream: var(--cream, #f8f7f2);
  --oa-muted: var(--muted, #5f6a62);
  --oa-line: var(--line, #e1e5dc);
  --oa-sage: var(--sage, #edf1e8);
  --oa-sage-2: #cdd9c8;
  --oa-radius: 18px;
}

/* ------------------------------------------------------------------ shared pieces */
.oc-hub *, .oc-ad-builder * { box-sizing: border-box; }
.oc-tier-badge { display: inline-block; font: 700 10px/1 Manrope, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 6px 9px; border-radius: 4px; background: var(--oa-sage); color: var(--oa-forest); }
.oc-tier-exclusive .oc-tier-badge { background: var(--oa-orange); color: var(--oa-ink); }
.oc-tier-premium .oc-tier-badge { background: var(--oa-forest); color: var(--oa-cream); }
.oc-tier-standard .oc-tier-badge { background: var(--oa-sage); color: var(--oa-forest); box-shadow: inset 0 0 0 1px var(--oa-sage-2); }

/* Availability: a symbol and words, never colour alone. */
.oc-avail { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--oa-forest); }
.oc-avail::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.oc-avail.is-open::before { background: currentColor; }
.oc-avail.is-limited { color: #8a4a00; }
.oc-avail.is-limited::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.oc-avail.is-waitlist { color: #7a2a1f; }
.oc-avail.is-waitlist::before { border-radius: 2px; background: repeating-linear-gradient(45deg, currentColor 0 2px, transparent 2px 4px); }
.oc-avail.is-choose { color: var(--oa-muted); font-weight: 500; }
.oc-avail.is-choose::before { border-style: dashed; }

/* ------------------------------------------------------------------ adverts as they appear on the site */
.oc-advert-intro { max-width: 800px; margin: 0 0 48px; }
.oc-advert-intro h2 { font-size: clamp(36px, 5vw, 68px); line-height: 1.05; letter-spacing: -2px; }
.oc-advert-intro .btn { margin: 12px 18px 12px 0; }
.oc-advert-intro .arrow-link { display: inline-block; }
.oc-ad-slot { margin: 28px 0; }
.oc-ad-slot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.oc-display-ad { background: #fff; border: 1px solid #dce4d8; border-radius: 20px; overflow: hidden; color: var(--oa-ink); min-width: 0; }
.oc-ad-disclosure { display: flex; justify-content: space-between; gap: 12px; padding: 10px 18px; font: 600 10px/1.5 system-ui, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: #5b655d; border-bottom: 1px solid var(--oa-sage); }
.oc-ad-disclosure span { letter-spacing: 0; text-transform: none; text-align: right; }
.oc-ad-art { display: block; background: var(--oa-sage); overflow: hidden; }
.oc-ad-art img { width: 100%; height: 100%; display: block; object-fit: contain; max-width: 100%; }
.oc-ad-square .oc-ad-art { aspect-ratio: 1; }
.oc-ad-landscape .oc-ad-art { aspect-ratio: 2; }
.oc-ad-portrait .oc-ad-art { aspect-ratio: 2/3; }
.oc-ad-banner .oc-ad-art { aspect-ratio: 728/90; }
.oc-ad-panorama .oc-ad-art { aspect-ratio: 4; }
.oc-ad-copy { padding: 22px; }
.oc-ad-copy h3 { font-size: 23px; margin: 8px 0; }
.oc-ad-copy p { font-size: 14px; line-height: 1.7; }
.oc-ad-copy .eyebrow { font-size: 10px; }

/* Tile spaces never stretch into giant squares on wide screens. */
.oc-slot-home_feature .oc-ad-slot-grid, .oc-slot-discovery .oc-ad-slot-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 360px)); justify-content: start; }

/* Exclusive spaces read as sponsorships: the title band, then category and city sponsors. */
.oc-slot-home_title { margin: 0; padding: 0; }
.oc-slot-home_title .oc-ad-slot-grid, .oc-slot-category_sponsor .oc-ad-slot-grid, .oc-slot-city_sponsor .oc-ad-slot-grid { display: block; }
.oc-ad-place-home_title, .oc-ad-place-category_sponsor, .oc-ad-place-city_sponsor { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: stretch; border-radius: 14px; }
.oc-ad-place-home_title { background: var(--oa-forest); border-color: var(--oa-forest); color: var(--oa-cream); }
.oc-ad-place-home_title .oc-ad-disclosure { color: #c4d1c6; border-color: #2d5a4c; }
.oc-ad-place-home_title .oc-ad-art { background: #0e3027; }
.oc-ad-place-home_title .oc-ad-copy .eyebrow { color: #c4d1c6; }
.oc-ad-place-home_title .arrow-link { color: var(--oa-cream); border-color: #7fa08f; }
.oc-ad-place-category_sponsor, .oc-ad-place-city_sponsor { border-left: 5px solid var(--oa-orange); }
.oc-ad-place-home_title .oc-ad-disclosure, .oc-ad-place-category_sponsor .oc-ad-disclosure, .oc-ad-place-city_sponsor .oc-ad-disclosure { grid-column: 1 / -1; }
.oc-ad-place-home_title .oc-ad-copy, .oc-ad-place-category_sponsor .oc-ad-copy, .oc-ad-place-city_sponsor .oc-ad-copy { display: flex; flex-direction: column; justify-content: center; padding: 20px 26px; }
.oc-ad-place-home_title .oc-ad-copy h3 { color: var(--oa-cream); }
.oc-ad-place-home_title .oc-ad-copy .arrow-link, .oc-ad-place-category_sponsor .oc-ad-copy .arrow-link, .oc-ad-place-city_sponsor .oc-ad-copy .arrow-link { align-self: flex-start; }
.oc-ad-place-home_title .oc-ad-art, .oc-ad-place-category_sponsor .oc-ad-art, .oc-ad-place-city_sponsor .oc-ad-art { aspect-ratio: auto; min-height: 90px; display: grid; place-items: center; }
.oc-ad-place-home_title .oc-ad-art img, .oc-ad-place-category_sponsor .oc-ad-art img, .oc-ad-place-city_sponsor .oc-ad-art img { height: auto; max-height: 260px; }

.oc-ad-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: start; }
.oc-ad-board .oc-ad-banner, .oc-ad-board .oc-ad-panorama { grid-column: span 3; }
.oc-ad-board .oc-ad-banner .oc-ad-copy, .oc-ad-board .oc-ad-panorama .oc-ad-copy { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 20px; }
.oc-ad-board .oc-ad-banner .oc-ad-copy .eyebrow, .oc-ad-board .oc-ad-panorama .oc-ad-copy .eyebrow { grid-column: 1 / -1; margin: 0; }

/* The prompt shown where nobody has booked yet. It is the shop window for the space. */
.oc-ad-open { padding: 22px 28px; border: 1.5px dashed #6f8c7d; border-radius: 16px; display: flex; align-items: center; gap: 22px; background: linear-gradient(110deg, var(--oa-sage), #fff6ec); color: var(--oa-forest); text-decoration: none; transition: border-color .2s, background .2s; }
.oc-ad-open:hover { border-color: var(--oa-forest); border-style: solid; }
.oc-ad-open span { font-size: 10px; letter-spacing: 1.5px; font-weight: 700; }
.oc-ad-open strong { font: 650 22px/1.2 Manrope, system-ui, sans-serif; letter-spacing: -.02em; flex: 1; }
.oc-ad-open small { font-size: 13px; font-weight: 600; white-space: nowrap; }

.oc-table-scroll { overflow-x: auto; position: relative; } /* positioned, so the hidden labels inside it are clipped with the table */
.oc-rate-table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 25px 0; }
.oc-rate-table th, .oc-rate-table td { text-align: left; padding: 16px 18px; border-bottom: 1px solid #dce4d8; vertical-align: top; }
.oc-rate-table thead { background: var(--oa-forest); color: #fff; }
.oc-rate-table th small { display: block; font-weight: 400; font-size: 11px; margin-top: 5px; }
.oc-rate-table td small { font-size: 11px; color: var(--oa-muted); margin-left: 4px; }
.oc-rate-table tbody th { font-weight: 650; }
.oc-ad-format-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin: 35px 0; }
.oc-ad-format-grid article { padding: 18px; border: 1px solid #dce4d8; border-radius: 14px; background: #fff; }
.oc-ad-format-grid h3 { font-size: 17px; }
.oc-ad-format-grid p { font-size: 12px; }
.oc-format-sample { display: grid; place-items: center; border-radius: 8px; background: var(--oa-forest); color: var(--oa-cream); min-height: 25px; margin-bottom: 14px; }
.oc-format-sample span { font-size: 10px; padding: 6px; text-align: center; }
.oc-portal-art { max-width: 300px !important; height: auto !important; max-height: 300px; object-fit: contain; }
.oc-renew-notice { padding: 18px 22px; margin: 20px 0; border-left: 3px solid var(--oa-orange); background: #fff2e8; border-radius: 10px; }
.oc-recommendations h2 { font-size: 34px; }
.oc-recommendations .vendor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ------------------------------------------------------------------ the Advertise page */
.oc-hub { max-width: 1240px; margin: 0 auto; color: var(--oa-ink); }
.oc-hub .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--oa-forest); background: var(--oa-forest); color: #fff; border-radius: 7px; padding: 14px 22px; font-weight: 600; text-decoration: none; transition: transform .2s, background .2s; }
.oc-hub .btn:hover { transform: translateY(-2px); background: var(--oa-forest-2); }
.oc-hub .btn.small { font-size: 12px; padding: 11px 16px; }
.oc-hub .btn.outline { background: transparent; color: var(--oa-forest); }
.oc-hub .btn.outline:hover { background: var(--oa-sage); }
.oc-hub .btn.light { background: var(--oa-cream); color: var(--oa-forest); border-color: var(--oa-cream); }
.oc-hub .btn.light:hover { background: #fff; }
.oc-hub .btn.ghost { background: transparent; color: var(--oa-cream); border-color: #7fa08f; }
.oc-hub .btn.ghost:hover { background: #ffffff14; }
.oc-hub-section { padding: 72px 0 0; }
.oc-hub-head { max-width: 760px; margin-bottom: 30px; }
.oc-hub-head h2 { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: 12px; }
.oc-hub-head p { color: var(--oa-muted); font-size: 15px; margin: 0; max-width: 640px; }
.oc-hub-note { font-size: 13px; color: var(--oa-muted); margin: 10px 0 0; max-width: 760px; }
.oc-hub-fine { font-size: 12px; color: var(--oa-muted); max-width: 820px; margin-top: 22px; }

/* Hero: a dark panel with the one idea the page is about — position sets price. */
.oc-hub-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; background: var(--oa-forest); color: var(--oa-cream); border-radius: 24px; padding: 60px; margin-top: 8px; overflow: hidden; }
.oc-hub-hero h1 { font-size: clamp(36px, 4.2vw, 62px); line-height: 1.06; letter-spacing: -.04em; margin: 0 0 22px; color: var(--oa-cream); }
.oc-hub-hero h1 em { color: #f6b79c; }
.oc-hub-lead { font-size: 16px; line-height: 1.75; color: #cbd8cd; max-width: 520px; }
.oc-hub-cta { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; margin: 28px 0 0; }
.oc-hub-hero .btn { background: var(--oa-orange); border-color: var(--oa-orange); color: var(--oa-ink); }
.oc-hub-hero .btn:hover { background: #f58b68; }
.oc-hub-hero .btn.outline { background: transparent; border-color: #7fa08f; color: var(--oa-cream); }
.oc-hub-hero .btn.outline:hover { background: #ffffff14; }
.oc-hub-wa, .oc-hub-link { font-size: 13px; font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 2px; text-decoration: none; }
.oc-hub-hero .oc-hub-wa { color: #cbd8cd; }
.oc-hub-proof { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 8px; font-size: 14px; color: #dbe6dd; }
.oc-hub-proof li { padding-left: 24px; position: relative; }
.oc-hub-proof li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--oa-orange); border-bottom: 2px solid var(--oa-orange); transform: rotate(-45deg); }
.oc-hub-offer { margin: 26px 0 0; padding: 14px 18px; border: 1px solid #4b7566; border-radius: 12px; font-size: 14px; background: #ffffff0d; color: #f6e2d8; max-width: 520px; }
.oc-hub-offer strong { color: #ffd1bd; }

.oc-hub-hero-art { background: var(--oa-cream); color: var(--oa-ink); border-radius: 18px; padding: 26px 26px 22px; }
.oc-ladder-title { font-size: 17px; letter-spacing: -.02em; margin: 0 0 18px; }
.oc-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.oc-rung a { display: grid; grid-template-columns: minmax(120px, 34%) 1fr 98px; align-items: center; gap: 12px; padding: 8px 8px; margin: 0 -8px; border-radius: 8px; text-decoration: none; color: inherit; }
.oc-rung a:hover, .oc-rung a:focus-visible { background: var(--oa-sage); }
.oc-rung-name { font-size: 13px; font-weight: 650; line-height: 1.3; }
.oc-rung-bar { height: 12px; border-radius: 3px; background: var(--oa-sage-2); position: relative; overflow: hidden; }
.oc-rung-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 3px; background: #8fa797; }
.oc-rung.oc-tier-premium .oc-rung-bar::after { background: var(--oa-forest); }
.oc-rung.oc-tier-exclusive .oc-rung-bar::after { background: var(--oa-orange); }
.oc-rung-price { font: 700 14px/1 Manrope, system-ui, sans-serif; letter-spacing: -.02em; text-align: right; white-space: nowrap; }
.oc-rung-price small { font-weight: 500; font-size: 10px; color: var(--oa-muted); }
.oc-ladder-note { margin: 16px 0 0; font-size: 11px; color: var(--oa-muted); line-height: 1.6; }
@media (prefers-reduced-motion: no-preference) {
  .oc-rung-bar::after { transform-origin: left; animation: oc-grow .9s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes oc-grow { from { transform: scaleX(0); } }
}

/* Price period switch */
.oc-seg { display: inline-flex; padding: 4px; margin: 0 0 26px; border: 1px solid var(--oa-line); border-radius: 999px; background: #fff; gap: 2px; }
.oc-seg[hidden] { display: none; }
.oc-seg button { border: 0; background: transparent; padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--oa-muted); }
.oc-seg button[aria-checked="true"] { background: var(--oa-forest); color: #fff; }

/* Page wireframes with real price tags */
.oc-wire-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0 0 44px; }
.oc-wire { margin: 0; }
.oc-wire figcaption { font-size: 13px; font-weight: 650; margin-bottom: 10px; }
.oc-wire-page { background: #fff; border: 1px solid var(--oa-line); border-radius: 14px; padding: 12px; display: grid; gap: 8px; box-shadow: 0 10px 28px #123c3210; }
.oc-wire-page i, .oc-wire-page span { display: block; background: var(--oa-line); border-radius: 3px; }
.w-nav { display: flex; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--oa-line); }
.w-nav i { width: 28px; height: 6px; }
.w-nav i:first-child { width: 44px; background: var(--oa-forest); }
.w-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.w-hero span { height: 56px; }
.w-hero span:last-child { background: var(--oa-sage-2); }
.w-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.w-tiles span { height: 30px; }
.w-filter { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.w-filter span { height: 14px; }
.w-text { display: grid; gap: 6px; }
.w-text span { height: 8px; }
.w-text span:nth-child(2) { width: 82%; }
.w-text span:nth-child(3) { width: 90%; }
.w-text span:nth-child(4) { width: 60%; }
.w-foot { height: 14px; background: var(--oa-sage); border-radius: 3px; }
.w-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.w-spot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; text-decoration: none; font-size: 11px; line-height: 1.25; transition: transform .2s, box-shadow .2s; }
.w-spot b { font-weight: 700; }
.w-spot i { background: transparent; font-style: normal; font-weight: 700; white-space: nowrap; border-radius: 0; }
.w-spot.w-exclusive { background: var(--oa-orange); color: var(--oa-ink); }
.w-spot.w-premium { background: var(--oa-forest); color: var(--oa-cream); }
.w-spot.w-standard { background: var(--oa-sage); color: var(--oa-forest); outline: 1.5px dashed #6f8c7d; outline-offset: -2px; }
.w-spot:hover, .w-spot.is-hot, .w-spot:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px #123c3233; }

/* Tier groups and space cards */
.oc-tier-group { margin: 0 0 36px; }
.oc-tier-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.oc-tier-head p { margin: 0; font-size: 14px; color: var(--oa-muted); }
.oc-space-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 18px; }
.oc-space { background: #fff; border: 1px solid var(--oa-line); border-radius: var(--oa-radius); padding: 24px; display: flex; flex-direction: column; scroll-margin-top: 110px; transition: box-shadow .2s, border-color .2s; }
.oc-space.is-hot, .oc-space:target { border-color: var(--oa-forest); box-shadow: 0 0 0 3px #123c3226; }
.oc-space.oc-tier-exclusive { border-top: 5px solid var(--oa-orange); }
.oc-space.oc-tier-premium { border-top: 5px solid var(--oa-forest); }
.oc-space.oc-tier-standard { border-top: 5px solid var(--oa-sage-2); }
.oc-space h3 { font-size: 21px; margin-bottom: 8px; }
.oc-space-copy { font-size: 14px; color: var(--oa-muted); margin-bottom: 14px; }
.oc-price { margin: 0 0 16px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.oc-price strong { font: 700 34px/1 Manrope, system-ui, sans-serif; letter-spacing: -.04em; }
.oc-price small { font-size: 12px; color: var(--oa-muted); }
.oc-space-facts { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 0; font-size: 13px; flex: 1; }
.oc-space-facts li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--oa-line); }
.oc-space-facts li > span { color: var(--oa-muted); font-size: 12px; }
.oc-space .btn { align-self: flex-start; }

/* Calendar */
.oc-cal { border-collapse: separate; border-spacing: 4px; min-width: 760px; width: 100%; font-size: 12px; }
.oc-cal th { font-weight: 600; text-align: left; padding: 2px 4px; white-space: nowrap; font-size: 11px; color: var(--oa-muted); }
.oc-cal tbody th { color: var(--oa-ink); font-size: 13px; padding-right: 14px; }
.oc-cal td { height: 30px; min-width: 38px; border-radius: 5px; border: 1.5px solid var(--oa-sage-2); background: #fff; }
.oc-cal td.is-partial { background: repeating-linear-gradient(135deg, var(--oa-forest) 0 3px, #fff 3px 8px); border-color: var(--oa-forest); }
.oc-cal td.is-full { background: var(--oa-forest); border-color: var(--oa-forest); }
.oc-legend { display: flex; gap: 22px; flex-wrap: wrap; margin: 14px 0 0; font-size: 12px; color: var(--oa-muted); }
.oc-legend span { display: inline-flex; align-items: center; gap: 8px; }
.oc-legend span::before { content: ""; width: 18px; height: 14px; border-radius: 4px; border: 1.5px solid var(--oa-sage-2); background: #fff; }
.oc-legend .is-partial::before { background: repeating-linear-gradient(135deg, var(--oa-forest) 0 3px, #fff 3px 8px); border-color: var(--oa-forest); }
.oc-legend .is-full::before { background: var(--oa-forest); border-color: var(--oa-forest); }

/* Packages */
.oc-pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.oc-pack { background: #fff; border: 1px solid var(--oa-line); border-radius: var(--oa-radius); padding: 24px; display: flex; flex-direction: column; }
.oc-pack h3 { font-size: 21px; margin-bottom: 8px; }
.oc-pack > p:not(.oc-pack-price) { font-size: 14px; color: var(--oa-muted); }
.oc-pack ul { list-style: none; padding: 0; margin: 4px 0 18px; font-size: 13px; flex: 1; }
.oc-pack li { padding: 8px 0 8px 22px; border-top: 1px solid var(--oa-line); position: relative; }
.oc-pack li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 10px; height: 6px; border-left: 2px solid var(--oa-forest); border-bottom: 2px solid var(--oa-forest); transform: rotate(-45deg); }
.oc-pack-price { margin: 0 0 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.oc-pack-price strong { font: 700 30px/1 Manrope, system-ui, sans-serif; letter-spacing: -.04em; }
.oc-pack-price s { color: var(--oa-muted); font-size: 14px; }
.oc-pack-price small { flex-basis: 100%; font-size: 12px; color: var(--oa-muted); }
.oc-pack-price small.oc-from { flex-basis: auto; font-size: 13px; }
.oc-pack .btn { align-self: flex-start; }
.oc-pack:last-child { background: var(--oa-forest); color: var(--oa-cream); border-color: var(--oa-forest); }
.oc-pack:last-child > p:not(.oc-pack-price), .oc-pack:last-child .oc-pack-price s, .oc-pack:last-child .oc-pack-price small { color: #c4d1c6; }
.oc-pack:last-child li { border-color: #2d5a4c; }
.oc-pack:last-child li::before { border-color: var(--oa-orange); }
.oc-pack:last-child .btn { background: var(--oa-orange); border-color: var(--oa-orange); color: var(--oa-ink); }

/* Report sample */
.oc-report-demo { background: #fff; border: 1px solid var(--oa-line); border-radius: var(--oa-radius); padding: 26px; max-width: 760px; position: relative; }
.oc-sample { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 5px 10px; border-radius: 4px; background: #fff2e8; color: var(--oa-orange-ink); margin-bottom: 18px; }
.oc-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.oc-stat-row > div { background: var(--oa-sage); border-radius: 12px; padding: 14px 16px; }
.oc-stat-row small { display: block; font-size: 12px; color: var(--oa-muted); }
.oc-stat-row strong { font: 700 28px/1.2 Manrope, system-ui, sans-serif; letter-spacing: -.03em; }
.oc-spark { display: block; width: 100%; height: 90px; }
.oc-spark-fill { fill: #123c3222; }
.oc-spark-line { stroke: var(--oa-forest); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.oc-portal-stats .oc-spark { height: 64px; }

/* Why, steps, FAQ */
.oc-why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--oa-line); }
.oc-why-grid article { padding: 26px 28px 26px 0; border-bottom: 1px solid var(--oa-line); }
.oc-why-grid article:nth-child(3n+2), .oc-why-grid article:nth-child(3n) { padding-left: 28px; border-left: 1px solid var(--oa-line); }
.oc-why-grid h3 { font-size: 19px; margin-bottom: 8px; }
.oc-why-grid p { font-size: 14px; color: var(--oa-muted); margin: 0; }
.oc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; counter-reset: ocstep; }
.oc-steps li { border-top: 3px solid var(--oa-forest); padding-top: 16px; }
.oc-steps li b { display: block; font: 700 12px/1 Manrope, system-ui, sans-serif; color: var(--oa-orange-ink); margin-bottom: 12px; }
.oc-steps h3 { font-size: 20px; margin-bottom: 6px; }
.oc-steps p { font-size: 14px; color: var(--oa-muted); margin: 0; }
.oc-faq-list { max-width: 820px; border-top: 1px solid var(--oa-line); }
.oc-faq-list details { border-bottom: 1px solid var(--oa-line); }
.oc-faq-list summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; font: 650 17px/1.4 Manrope, system-ui, sans-serif; letter-spacing: -.02em; position: relative; }
.oc-faq-list summary::-webkit-details-marker { display: none; }
.oc-faq-list summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font-size: 24px; font-weight: 400; color: var(--oa-forest); }
.oc-faq-list details[open] summary::after { content: "\2212"; }
.oc-faq-list details p { margin: 0 0 20px; color: var(--oa-muted); font-size: 15px; max-width: 680px; }

.oc-hub-final { margin: 72px 0 8px; background: #fff2e8; border: 1px solid #f5d5c3; border-radius: 24px; padding: 48px 56px; display: grid; grid-template-columns: 1fr auto; gap: 18px 40px; align-items: center; }
.oc-hub-final h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 8px; }
.oc-hub-final p { margin: 0; color: #5b4b43; }
.oc-hub-final .oc-hub-cta { margin: 0; justify-content: flex-end; }
.oc-hub-final .oc-hub-fine { grid-column: 1 / -1; margin: 6px 0 0; }
.oc-hub-final .oc-hub-link { color: var(--oa-forest); }
.oc-hub-final .btn.ghost { color: var(--oa-forest); border-color: var(--oa-forest); }
.oc-hub-final .btn.ghost:hover { background: #ffffff99; }
.oc-hub-final .btn.light { background: var(--oa-forest); color: #fff; border-color: var(--oa-forest); }

/* ------------------------------------------------------------------ the campaign builder */
form.oc-ad-builder.oc-form { max-width: 1240px; padding: 0; border: 0; background: transparent; margin: 20px 0; }
.oc-b-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.oc-b-main { display: grid; gap: 20px; min-width: 0; }
fieldset.oc-b-step { border: 1px solid var(--oa-line); border-radius: var(--oa-radius); background: #fff; padding: 26px 28px 28px; margin: 0; min-width: 0; }
.oc-b-step > legend { float: left; width: 100%; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; align-items: center; font: 650 21px/1.2 Manrope, system-ui, sans-serif; letter-spacing: -.03em; }
.oc-b-step > legend > span { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 50%; background: var(--oa-forest); color: #fff; display: grid; place-items: center; font: 700 12px/1 Manrope, system-ui, sans-serif; letter-spacing: 0; }
.oc-b-step > legend > small { font: 400 13px/1.4 'DM Sans', system-ui, sans-serif; letter-spacing: 0; color: var(--oa-muted); }
.oc-b-step > legend + * { clear: both; }
.oc-b-intro { margin-bottom: 26px; }
.oc-b-intro h2 { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -.04em; }
.oc-b-note { font-size: 13px !important; color: var(--oa-muted) !important; margin: 14px 0 0 !important; }

.oc-ad-builder .oc-pick { display: block; position: relative; margin: 0 !important; font-size: inherit !important; font-weight: inherit !important; cursor: pointer; }
.oc-ad-builder .oc-pick > input { position: absolute !important; opacity: 0; width: 1px !important; height: 1px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; pointer-events: none; }
.oc-pick-body { display: grid; gap: 4px; align-content: start; height: 100%; padding: 16px 18px; border: 1.5px solid var(--oa-sage-2); border-radius: 14px; background: #fff; transition: border-color .15s, background .15s, box-shadow .15s; }
.oc-pick:hover .oc-pick-body { border-color: #7fa08f; }
.oc-pick > input:checked + .oc-pick-body { border-color: var(--oa-forest); background: #f3f7f0; box-shadow: 0 0 0 2px var(--oa-forest) inset; }
.oc-pick > input:focus-visible + .oc-pick-body { outline: 3px solid #e9875e; outline-offset: 3px; }
.oc-pick > input:disabled + .oc-pick-body { opacity: .5; background: repeating-linear-gradient(135deg, #f5f5f0 0 6px, #fff 6px 12px); cursor: not-allowed; }
.oc-pick-body strong { font: 650 16px/1.3 Manrope, system-ui, sans-serif; letter-spacing: -.02em; }
.oc-pick-body small { font-size: 12.5px; color: var(--oa-muted); line-height: 1.5; font-weight: 400; }

.oc-b-shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.oc-shape .oc-pick-body { align-content: end; justify-items: start; }
.oc-shape-thumb { display: block; width: 100%; max-height: 74px; border-radius: 5px; background: linear-gradient(135deg, var(--oa-sage-2), var(--oa-sage)); border: 1px solid #b8c8b9; margin-bottom: 8px; }
.oc-shape .oc-shape-thumb[style*="728/90"] { max-height: 20px; }
.oc-pick > input:checked + .oc-pick-body .oc-shape-thumb { background: linear-gradient(135deg, var(--oa-forest), var(--oa-forest-2)); border-color: var(--oa-forest); }

.oc-b-places { display: grid; gap: 10px; }
.oc-place { display: grid; gap: 0; }
.oc-place .oc-pick-body { gap: 8px; }
.oc-place-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.oc-place-head > strong { flex: 1 1 180px; }
.oc-place-meta { margin-left: auto; display: grid; justify-items: end; gap: 3px; text-align: right; }
.oc-place-price { font: 700 17px/1.1 Manrope, system-ui, sans-serif; font-style: normal; letter-spacing: -.02em; white-space: nowrap; }
.oc-place-price small { font-size: 11px; font-weight: 500; color: var(--oa-muted); margin-right: 3px; }
.oc-share { font-size: 12px; color: var(--oa-muted); }
.oc-fit-note { font-size: 12px; font-weight: 600; color: var(--oa-orange-ink); }
.oc-place[data-fits="0"] .oc-pick-body > strong, .oc-place[data-fits="0"] .oc-place-head strong { color: var(--oa-ink); }
.oc-place.oc-tier-exclusive .oc-pick-body { border-left: 5px solid var(--oa-orange); }
.oc-place.oc-tier-premium .oc-pick-body { border-left: 5px solid var(--oa-forest); }
.oc-place.oc-tier-standard .oc-pick-body { border-left: 5px solid var(--oa-sage-2); }
label.oc-target { display: block; margin: 8px 0 0 !important; padding: 14px 18px; background: var(--oa-sage); border-radius: 12px; font-size: 13px !important; }
label.oc-target[hidden] { display: none; }
label.oc-target select { margin-top: 6px; max-width: 420px; }

.oc-b-periods { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.oc-period-save { font-style: normal; font-size: 12px; font-weight: 700; color: var(--oa-forest); min-height: 1.2em; }
label.oc-b-start { max-width: 360px; }
label.oc-b-start small { display: block; margin-top: 8px; font-weight: 400; font-size: 12px; color: var(--oa-muted); }

.oc-ad-dimensions { font-weight: 600; color: var(--oa-forest) !important; }

/* Summary */
.oc-b-summary { position: sticky; top: 104px; display: grid; gap: 12px; }
.oc-sum-card { background: var(--oa-forest); color: var(--oa-cream); border-radius: 22px; padding: 26px; }
.oc-sum-card .eyebrow { color: #c4d1c6; margin-bottom: 16px; }
.oc-ad-mock { margin: 0 0 18px; }
.oc-ad-mock > small { display: block; margin-top: 8px; font-size: 11px; color: #a9bcae; }
.oc-sum-card .oc-ad-image-preview { display: grid; place-items: center; background: linear-gradient(135deg, #f6b79c, #e9c9a6); aspect-ratio: 1; max-height: 220px; width: 100%; margin: 0 auto; overflow: hidden; border-radius: 10px; transition: aspect-ratio .2s; }
.oc-sum-card .oc-ad-image-preview strong { font: italic 400 22px/1.1 Georgia, serif; text-align: center; color: var(--oa-forest); padding: 8px; }
.oc-sum-card .oc-ad-image-preview img { width: 100%; height: 100%; object-fit: contain; }
.oc-sum-card .oc-ad-image-preview[data-wide] strong { font-size: 13px; padding: 2px 8px; }
.oc-sum-card .oc-ad-image-preview[data-wide] strong br { display: none; }
.oc-sum-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: 13px; }
.oc-sum-lines li { padding: 11px 0; border-top: 1px solid #2d5a4c; display: grid; gap: 3px; }
.oc-sum-lines li .l-top { display: flex; justify-content: space-between; gap: 12px; }
.oc-sum-lines li strong { font-weight: 650; }
.oc-sum-lines li .l-price { font-weight: 700; white-space: nowrap; }
.oc-sum-lines li s { color: #a9bcae; margin-right: 6px; font-weight: 400; }
.oc-sum-lines li small { color: #b7c8bb; font-size: 12px; }
.oc-sum-lines li.is-wait small.l-when { color: #ffd1bd; }
.oc-sum-lines li.is-empty { color: #b7c8bb; border-top: 0; }
.oc-sum-card .oc-sum-discounts { margin: 6px 0 0; font-size: 13px; color: #ffd1bd; min-height: 0; }
.oc-sum-card .oc-sum-discounts:empty { display: none; }
.oc-sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid #4b7566; margin-top: 12px; padding-top: 14px; }
.oc-sum-total span { font-size: 13px; color: #c4d1c6; }
.oc-sum-card .oc-ad-price-preview { font: 700 34px/1 Manrope, system-ui, sans-serif; letter-spacing: -.04em; background: transparent; padding: 0; margin: 0; color: var(--oa-cream); border-radius: 0; }
.oc-sum-card .oc-sum-sub { margin: 6px 0 0; font-size: 12px; color: #b7c8bb; text-align: right; }
.oc-sum-notices { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; font-size: 12.5px; }
.oc-sum-notices li { padding: 9px 12px; border-radius: 8px; background: #ffffff12; color: #e3ece5; }
.oc-sum-notices li.is-error { background: #7a2a1f; color: #fff; }
.oc-sum-card .form-note { color: #a9bcae; font-size: 11.5px; margin: 14px 0 0; }
.oc-b-wa { display: block; text-align: center; font-size: 13px; font-weight: 600; color: var(--oa-forest); padding: 12px; border: 1px solid var(--oa-sage-2); border-radius: 12px; background: #fff; text-decoration: none; }
.oc-b-wa:hover { background: var(--oa-sage); }
.oc-b-bar { display: none; }

/* ------------------------------------------------------------------ the advertiser's private page */
.oc-portal-stats { background: #fff; border: 1px solid var(--oa-line); border-radius: var(--oa-radius); padding: 22px; margin: 22px 0; max-width: 760px; }
.oc-portal-stats h3 { margin-bottom: 14px; }
.oc-portal-stats .oc-stat-row strong { font-size: 24px; }
.oc-portal-quote { padding: 14px 18px; background: var(--oa-sage); border-radius: 10px; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1060px) {
  .oc-hub-hero { grid-template-columns: 1fr; padding: 44px 36px; gap: 36px; }
  .oc-wire-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-why-grid article, .oc-why-grid article:nth-child(3n+2), .oc-why-grid article:nth-child(3n) { padding: 24px 24px 24px 0; border-left: 0; }
  .oc-why-grid article:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--oa-line); }
  .oc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-b-layout { grid-template-columns: 1fr; }
  .oc-b-summary { position: static; }
  .oc-b-bar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: var(--oa-forest); color: #fff; box-shadow: 0 -8px 24px #0003; }
  .oc-b-bar span { font-size: 12px; color: #c4d1c6; }
  .oc-b-bar strong { font: 700 20px/1 Manrope, system-ui, sans-serif; margin-right: auto; }
  .oc-b-bar a { color: var(--oa-ink); background: var(--oa-orange); border-radius: 7px; padding: 10px 16px; font-size: 13px; font-weight: 700; text-decoration: none; }
  form.oc-ad-builder { padding-bottom: 76px; }
  body.oc-has-bar .oc-whatsapp, body.oc-has-bar [class*="whatsapp-float"] { bottom: 88px !important; }
  .oc-ad-format-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oc-ad-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-ad-board .oc-ad-banner, .oc-ad-board .oc-ad-panorama { grid-column: span 2; }
  .oc-ad-board .oc-ad-banner .oc-ad-copy, .oc-ad-board .oc-ad-panorama .oc-ad-copy { display: block; }
  .oc-ad-open { flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .oc-hub-hero { padding: 30px 20px; border-radius: 18px; }
  .oc-hub-section { padding-top: 52px; }
  .oc-wire-grid { grid-template-columns: 1fr; }
  .oc-why-grid, .oc-steps { grid-template-columns: 1fr; }
  .oc-why-grid article, .oc-why-grid article:nth-child(2n) { padding: 20px 0; border-left: 0; }
  .oc-hub-final { grid-template-columns: 1fr; padding: 32px 22px; }
  .oc-hub-final .oc-hub-cta { justify-content: flex-start; }
  .oc-rung a { grid-template-columns: 1fr auto; row-gap: 6px; }
  .oc-rung-bar { grid-column: 1 / -1; grid-row: 2; }
  .oc-space { padding: 20px; }
  .oc-space-facts li { grid-template-columns: 1fr; gap: 2px; }
  .oc-stat-row { gap: 8px; }
  .oc-stat-row strong { font-size: 22px; }
  fieldset.oc-b-step { padding: 20px 16px 22px; }
  .oc-place-meta { margin-left: 0; justify-items: start; text-align: left; flex-basis: 100%; grid-auto-flow: column; justify-content: space-between; align-items: center; }
  .oc-ad-place-home_title, .oc-ad-place-category_sponsor, .oc-ad-place-city_sponsor { grid-template-columns: 1fr; }
  .oc-ad-board, .oc-ad-format-grid, .oc-recommendations .vendor-grid { grid-template-columns: 1fr; }
  .oc-ad-board .oc-ad-banner, .oc-ad-board .oc-ad-panorama { grid-column: span 1; }
  .oc-ad-open { padding: 20px; display: block; }
  .oc-ad-open > * { display: block; margin: 8px 0; }
  .oc-ad-format-grid .oc-format-sample { max-height: 200px; }
  .oc-ad-disclosure { font-size: 9px; }
  .oc-ad-copy { padding: 18px; }
  .oc-rate-table th, .oc-rate-table td { padding: 12px; min-width: 110px; }
  .oc-rate-table { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .oc-hub .btn, .w-spot, .oc-space, .oc-pick-body, .oc-sum-card .oc-ad-image-preview { transition: none; }
}
@media (forced-colors: active) {
  .oc-cal td.is-full, .oc-legend .is-full::before { background: CanvasText; }
  .oc-cal td.is-partial, .oc-legend .is-partial::before { background: repeating-linear-gradient(135deg, CanvasText 0 3px, Canvas 3px 8px); }
  .oc-pick > input:checked + .oc-pick-body { outline: 3px solid Highlight; }
}

/* ------------------------------------------------------------------ other */
.oc-referral-consent { position: fixed; z-index: 9999; bottom: 20px; left: 20px; max-width: 530px; padding: 24px; border: 1px solid #cad8c4; background: var(--oa-cream); box-shadow: 0 10px 60px #123c3233; border-radius: 18px; color: var(--oa-ink); }
.oc-referral-consent p { font: 14px/1.6 system-ui, sans-serif; }
.oc-referral-consent form { display: flex; gap: 10px; flex-wrap: wrap; }
.oc-partner-hero h2 { font-size: clamp(36px, 5vw, 68px); line-height: 1.1; }
.oc-partner-hero > .btn { margin: 20px 20px 30px 0; }
@media (max-width: 600px) { .oc-referral-consent { left: 12px; right: 12px; bottom: 12px; padding: 18px; } }