/* ==========================================================================
   Reel.io — palette override + Reel.io-only components
   --------------------------------------------------------------------------
   Loads AFTER assets/css/styles.css (the Simian 2026 global stylesheet), the
   same arrangement the Simian Lite site uses.

   Two jobs, in this order:
     1. Remap the brand tokens so every Simian component renders in Reel.io's
        colours. No component rules are duplicated — retuning the tokens
        repaints the nav, buttons, mega-menu, footer and pricing plans at once.
     2. Add the components Simian has no equivalent for.

   Palette sourced from the existing site's css/reelio.css, by usage:
     #445e93  slate blue, the dominant brand colour (128 occurrences)
     #232c33  charcoal, the dark end of the old header gradient
     #26c485  green, the "Try for Free" CTA
     #68c9e8  light blue accent
     #19394e / #193359  supporting dark blues
   The old header used  linear-gradient(to right, #232c33, #445e93).

   When the Simian site's styles.css changes, re-copy it wholesale. Nothing in
   this file edits it in place, so the two never conflict.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Palette
   -------------------------------------------------------------------------- */
:root {
  /* Simian's token names, repointed at Reel.io's brand. */
  --simian-blue:  #445e93;   /* was #043f57 — nav, headings, dark heroes */
  --color-2:      #68c9e8;   /* light blue accent                        */
  --accent-green: #26c485;   /* was #4afa60 — Reel.io's CTA green        */

  /* Reel.io-specific, used only by the components below. */
  --reelio-slate:      #445e93;
  --reelio-slate-dark: #374d78;
  --reelio-charcoal:   #232c33;
  --reelio-navy:       #19394e;
  --reelio-green:      #26c485;
  --reelio-green-dark: #1fa76f;
  --reelio-sky:        #68c9e8;
  --reelio-border:     #dfe5ee;
  --reelio-tint:       #eef1f7;   /* section wash, slate-derived */
  --reelio-tint-sky:   #e4f2f8;   /* section wash, sky-derived   */
}

/* Simian hard-codes its own blue ramp into hover states. */
.btn--primary:hover { background: var(--reelio-slate-dark); color: var(--white); }
.btn--light:hover   { background: #eaf0f9; }
.cookie-bar__btn--solid:hover { background: var(--reelio-green-dark); }

/* CTAs use the brand green. White label matches the existing site's
   .cta-links__primary (white on #26c485), carried over deliberately. */
.btn--green         { background: var(--reelio-green); color: var(--white); }
.btn--green:hover   { background: var(--reelio-green-dark); color: var(--white); }
/* Secondary CTA — solid slate, pairs with the green primary (hero + closing). */
.btn--slate         { background: var(--reelio-slate); color: var(--white); }
.btn--slate:hover   { background: var(--reelio-slate-dark); color: var(--white); }
.nav__cta,
.nav__links a.nav__cta       { background: var(--reelio-green); color: var(--white); }
.nav__cta:hover,
.nav__links a.nav__cta:hover { background: var(--reelio-green-dark); color: var(--white); }

/* A second, quieter nav action for "Sign in" — the old site paired the green
   CTA with a plain link, so this keeps that pairing. */
.nav__signin {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-nav);
  font-weight: var(--weight-regular);
  color: var(--simian-blue);
  padding: 10px 6px;
  white-space: nowrap;
}
.nav__signin:hover { color: var(--reelio-charcoal); }

/* Ecosystem cards: Reel.io's own card takes the brand gradient, matching how
   the Simian site tints each product's card. */
.mega-card--reelio { background: linear-gradient(180deg, #232c33 0%, #445e93 100%); }

/* --------------------------------------------------------------------------
   2. Hero image
   Held to the container width rather than run edge to edge — at full bleed the
   app screenshot dominated the fold and pushed the first content section off
   screen. Matches Simian's .hero__media, which caps at 1261px.
   -------------------------------------------------------------------------- */
.hero__bleed { width: 100%; margin-top: 36px; padding-inline: var(--container-pad); }
.hero__bleed img,
.hero__bleed video {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  margin-inline: auto;
}
/* Home hero runs wider than the standard cap and bleeds toward the edges, the
   way the Figma mockup does, with breathing room before the first band. */
/* Home hero title runs to two lines like the Figma; the shared 864px cap wraps
   the second line, so widen it here (homepage only). */
.hero--home .hero__title { max-width: 1040px; }
/* Consistent wrapping — titles balance into even lines, paragraphs avoid
   orphan last words, and the hero's hard break is dropped on small screens so
   the headline flows naturally (BA: "headline/text/callouts weren't wrapping
   properly, half do half don't" on mobile). */
.h1, .h2, .hero__title, .hero__sub, .story__copy h2,
.fhero__title, .rhero__title, .prband__head h2, .prcol__title { text-wrap: balance; }
.body, .story__copy p, .prcol__text, .plan__tagline { text-wrap: pretty; }
@media (max-width: 640px) { .hero--home .hero__title br { display: none; } }
.hero--home .hero__sub { max-width: 880px; }
.hero__bleed--wide { margin-top: 44px; padding-bottom: 72px; padding-inline: 24px; }
.hero .hero__bleed--wide img,
.hero .hero__bleed--wide video { max-width: min(1440px, 82vw); }
@media (max-width: 600px) { .hero__bleed { padding-inline: 20px; } .hero__bleed--wide { padding-bottom: 40px; } }

/* --------------------------------------------------------------------------
   3. Story sections — the alternating copy/media rows used down the home and
   feature pages. Same component as the Simian Lite build; each section sits on
   its own wash that fades to white, the way Simian's .media / .review do.
   -------------------------------------------------------------------------- */
.story {
  padding: 92px 0;
  background-repeat: no-repeat;
  background-image: linear-gradient(180deg, var(--reelio-tint) 0, var(--white) 430px);
}
/* Flat white blocks (feature pages) — no top wash. */
.story--plain { background-image: none; background-color: var(--white); }

/* Footer CTA subtext (under the callout heading). */
.site-footer__cta .h2 { margin-bottom: 16px; }
.site-footer__cta-sub {
  margin: 0 0 28px; max-width: 760px;
  font-size: var(--fs-body); font-weight: var(--weight-light); line-height: 1.4; color: #55627a;
}

/* Deep sections invert: a full-height charcoal→slate diagonal, not a wash that
   fades to white. White heading, light body, a green accent rule under the h2. */
.story--deep {
  background-image: linear-gradient(180deg, var(--reelio-charcoal) 0%, var(--reelio-slate) 100%);
  color: rgba(255, 255, 255, 0.82);
}
.story--deep .story__copy h2 { color: var(--white); }
/* The Simian brand logo is dark artwork; whiten it on the deep (dark) section
   so it reads on the charcoal wash (BA: "black Simian logo reads poorly"). */
.story--deep .story__brand { filter: brightness(0) invert(1); }
.story--deep .story__copy p,
.story--deep .story__copy .bullets { color: rgba(255, 255, 255, 0.82); }
.story--deep .story__copy p strong { color: var(--white); font-weight: var(--weight-bold); }
.story--deep .story__copy .bullets li::marker { color: var(--reelio-green); }

/* Build Relationships band: a lighter periwinkle-blue gradient (Figma) instead
   of the charcoal deep wash. White heading/body still inherited from .story--deep. */
.story--blue { background-image: linear-gradient(180deg, #466094 0%, #94a2c1 100%); }

/* Rows whose graphic should read larger (Connect the dots, Build relationships):
   give the media column the greater share on whichever side it sits. */
.story--bigmedia:not(.story--flip) .story__row { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); column-gap: 52px; }
.story--bigmedia.story--flip .story__row      { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); column-gap: 52px; }

/* Green accent line beneath the copy (Most Opportunities) — small, bold, green.
   Needs a high-specificity selector: .story--deep .story__copy p (0,2,1) was
   overriding both the colour and the size, leaving it white at body size. */
.story .story__copy p.story__accent {
  margin-top: 20px; color: var(--reelio-green);
  font-size: 18px; font-weight: var(--weight-bold); line-height: 1.3;
}

/* Full-width card grid that can sit under a story row (Build Relationships,
   Know What's Driving). Four across on desktop, then two, then one. */
.cardgrid {
  list-style: none; margin: 56px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px;
}
.pcard { border-radius: 22px; padding: 36px 34px 40px; }
.pcard__ico { display: block; margin-bottom: 22px; }
.pcard__icon { width: 40px; height: 40px; display: block; }
.pcard__title { font-size: 26px; font-weight: var(--weight-bold); margin: 0 0 10px; line-height: 1.1; }
.pcard__text  { font-size: var(--fs-body-sm); font-weight: var(--weight-light); line-height: 1.35; margin: 0; }
.cardgrid--light .pcard {
  background: linear-gradient(180deg, var(--white) 0%, var(--reelio-tint) 100%);
  box-shadow: 0 14px 40px rgba(35, 44, 51, 0.10);
}
.cardgrid--light .pcard__title { color: var(--reelio-charcoal); }
.cardgrid--light .pcard__text  { color: #55627a; }
.cardgrid--light .pcard__ico   { color: var(--reelio-slate); }
.cardgrid--dark .pcard {
  background: linear-gradient(180deg, var(--reelio-charcoal) 0%, var(--reelio-slate) 100%);
}
.cardgrid--dark .pcard__title { color: var(--white); }
.cardgrid--dark .pcard__text  { color: rgba(255, 255, 255, 0.82); }
.cardgrid--dark .pcard__ico   { color: #8fb3e0; }

/* Centred pull-quote and the ecosystem footnote line. The pull-quote (Know
   What's Driving) is a short, bold, smaller line per Figma. */
.story__quote {
  max-width: 1100px; margin: 52px auto 0; text-align: center;
  font-size: 18px; font-weight: var(--weight-bold); line-height: 1.4;
  color: var(--reelio-charcoal);
}
.story--deep .story__quote { color: var(--white); }
.story__footnote {
  max-width: 1100px; margin: 44px auto 0; text-align: center;
  font-size: 24px; font-weight: var(--weight-light); line-height: 1.35;
  color: rgba(255, 255, 255, 0.75);
}

.story__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: 64px;
}
/* Order, not markup order, so the DOM stays in reading order. */
.story--flip .story__copy  { order: 2; }
.story--flip .story__media { order: 1; }

.story__copy h2 { font-size: var(--fs-h2); font-weight: var(--weight-light); line-height: 1.02; margin-bottom: 20px; }
.story__copy p  { font-size: var(--fs-body); font-weight: var(--weight-light); line-height: 1.35; }
.story__copy .bullets {
  margin-top: 18px; padding-left: 22px; list-style: disc;
  font-size: var(--fs-body-sm); font-weight: var(--weight-light); line-height: 1.5;
}
.story__copy .bullets li + li { margin-top: 8px; }
.story__copy .btn { margin-top: 28px; }
.story__media img { width: 100%; height: auto; border-radius: 14px; }

/* --------------------------------------------------------------------------
   4. Long-form content template (terms, policies, academy)
   -------------------------------------------------------------------------- */
.doc { padding: 72px 0 96px; }
.doc__inner { max-width: 820px; margin-inline: auto; }
.doc__inner h2 {
  font-size: 30px; font-weight: var(--weight-regular); line-height: 1.2;
  margin: 48px 0 16px; color: var(--reelio-charcoal);
}
.doc__inner h3 { font-size: 22px; font-weight: var(--weight-regular); margin: 32px 0 12px; }
.doc__inner p,
.doc__inner li {
  font-size: 17px; font-weight: var(--weight-light); line-height: 1.7; color: #303a41;
}
.doc__inner p { margin-bottom: 16px; }
.doc__inner ul, .doc__inner ol { margin: 0 0 18px 22px; }
.doc__inner ul { list-style: disc; }
.doc__inner ol { list-style: decimal; }
.doc__inner li { margin-bottom: 8px; }
.doc__inner a { color: var(--simian-blue); text-decoration: underline; }
.doc__inner table { width: 100%; border-collapse: collapse; margin: 20px 0 26px; }
.doc__inner th, .doc__inner td {
  border: 1px solid var(--reelio-border); padding: 12px 14px;
  font-size: 15px; font-weight: var(--weight-light); text-align: left; vertical-align: top;
}
.doc__inner th { background: var(--reelio-tint); font-weight: var(--weight-regular); }
.doc__updated { font-size: 15px; color: var(--muted); margin-bottom: 8px; }

/* Interior page heading.
   The gradient goes on <body>, NOT on this band — that way it starts at the
   very top of the page behind the floating nav card and fades out down the
   page, the way Simian's dark-hero pages work. Painting it on .page-head
   instead leaves a white strip above it where the header sits, and painting it
   on the sticky header would pin the colour to the viewport so it never
   scrolls away. Sections below the fade are on white already.

   Set  $body_class = 'page-dark';  on any page using .page-head. */
body.page-dark {
  background-color: var(--white);
  background-image: linear-gradient(180deg,
      var(--reelio-charcoal) 0,
      var(--reelio-slate) 250px,
      var(--white) 430px);
  background-repeat: no-repeat;
}
.page-head {
  background: transparent;
  padding: 40px 0 56px;
  color: var(--white);
}
.page-head .h1 { color: var(--white); }
.page-head__sub { color: rgba(255,255,255,0.92); font-weight: var(--weight-light); margin-top: 16px; max-width: 720px; }

/* --------------------------------------------------------------------------
   5. Features sub-nav — the row of feature links the old site showed under the
   hero on every /features/* page.
   -------------------------------------------------------------------------- */
.fnav { border-bottom: 1px solid var(--reelio-border); background: var(--white); }
.fnav__row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.fnav__item {
  padding: 18px 22px;
  font-size: var(--fs-body-sm);
  font-weight: var(--weight-regular);
  color: #4a5966;
  border-bottom: 3px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.fnav__item:hover { color: var(--simian-blue); }
.fnav__item.is-active { color: var(--simian-blue); border-bottom-color: var(--reelio-green); }

/* --------------------------------------------------------------------------
   6. Responsive — Simian's breakpoints are 1200 / 900 / 600.
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .story__row { column-gap: 40px; }
  .story { padding: 76px 0; }
}

@media (max-width: 1024px) {
  .cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 900px) {
  .story__row { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .story--flip .story__copy,
  .story--flip .story__media { order: 0; }
  .story { padding: 60px 0; background-image: linear-gradient(180deg, var(--reelio-tint) 0, var(--white) 300px); }
  .story--deep { background-image: linear-gradient(160deg, var(--reelio-charcoal) 0%, var(--reelio-slate) 100%); }
  .hero__bleed { margin-top: 32px; }
  .doc__inner h2 { font-size: 26px; }
  .cardgrid { margin-top: 40px; }
  .story__quote, .story__footnote { margin-top: 40px; font-size: 24px; }
}

@media (max-width: 600px) {
  .fnav__item { padding: 14px 14px; font-size: 15px; }
  .page-head { padding: 52px 0 46px; }
  .doc { padding: 48px 0 64px; }
  .cardgrid { grid-template-columns: minmax(0, 1fr); }
  .pcard { padding: 30px 26px; }
  .cta-band { padding: 64px 0; }
  .cta-band__title { font-size: 30px; }
}

/* --------------------------------------------------------------------------
   Closing CTA band (above the footer)
   -------------------------------------------------------------------------- */
.cta-band {
  padding: 104px 0;
  background: linear-gradient(180deg, var(--reelio-tint) 0%, var(--white) 60%);
  text-align: center;
}
.cta-band__inner { max-width: 900px; }
.cta-band__title {
  font-size: var(--fs-h3); font-weight: var(--weight-light); line-height: 1.05;
  color: var(--reelio-charcoal); margin: 0 0 18px;
}
.cta-band__sub {
  font-size: var(--fs-body); font-weight: var(--weight-light); line-height: 1.4;
  color: #55627a; margin: 0 auto 30px; max-width: 760px;
}
.cta-band__actions { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.cta-band__note { margin-top: 22px; font-size: 16px; font-weight: var(--weight-light); color: #6b7688; }

/* --------------------------------------------------------------------------
   7. Compare dropdown / Features dropdown in the nav
   styles.css positions .mega with left:0; right:0 against .nav, which is what
   makes the Products panel span the whole nav card. A short link list needs
   its own positioning context, hence position:relative on the item.
   -------------------------------------------------------------------------- */
.nav__item--drop { position: relative; }
.nav__item--dropdown { position: relative; }
/* Caret on the Features link (it's a real link now, not a mega-trigger button). */
.nav__item--dropdown > .nav__link { display: inline-flex; align-items: center; gap: 7px; }
.nav__item--dropdown > .nav__link::after {
  content: ""; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s ease;
}
.nav__item--dropdown:hover > .nav__link::after,
.nav__item--dropdown:focus-within > .nav__link::after { transform: translateY(1px) rotate(-135deg); }
/* Sit a touch lower and shift left so items line up under "Features".
   ::before bridges the gap so the hover state doesn't drop between them. */
.nav__item--dropdown .mega--list { top: calc(100% + 7px); left: -14px; }
.nav__item--dropdown .mega--list::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; }
.mega--list {
  top: 100%; left: 0; right: auto;
  width: max-content; min-width: 240px;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--reelio-border);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(35, 44, 51, 0.16);
}
.mega--list::after { display: none; }
.mega__list { display: flex; flex-direction: column; gap: 2px; }
.mega__list a {
  display: block; padding: 12px 16px; border-radius: 8px;
  font-size: 18px; font-weight: var(--weight-light);
  color: var(--ink); white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.mega__list a:hover { background: #f1f5fb; color: var(--simian-blue); }

/* styles.css swaps in the hamburger at <=1024, sized for the Simian nav's four
   items. Reel.io carries six (Products, Features, Pricing, Webinars, Sign in,
   Try for Free), so the bar runs out of room ~1100px and wraps to two lines in
   the window between there and the hamburger. Tighten the gaps over just that
   range rather than moving the shared breakpoint for all three sites. */
@media (min-width: 1025px) and (max-width: 1140px) {
  .nav { padding: 16px 20px; gap: 16px; }
  .nav__links { gap: 22px; }
}

/* Inside the mobile menu (styles.css collapses .mega to position:static at
   <=1024) this is no longer a floating panel, it is just another stacked
   section — so drop the panel chrome. Left as a small indent so the links
   still read as children of "Features" rather than siblings of it. */
@media (max-width: 1024px) {
  .mega--list {
    min-width: 0; width: 100%;
    padding: 0; border: 0; box-shadow: none; border-radius: 0;
  }
  .mega__list a { padding: 11px 0 11px 14px; font-size: 16px; border-radius: 0; white-space: normal; }
}

/* --------------------------------------------------------------------------
   8. Pricing + FAQ
   .plan / .pricing__grid / .plan-toggle come from styles.css; only the Reel.io
   specifics are here.
   -------------------------------------------------------------------------- */
.pricing__grid--two { grid-template-columns: repeat(2, minmax(0, 480px)); justify-content: center; }
.plan--pro .plan__top        { background: linear-gradient(180deg, #445e93 0%, #2f4470 100%); }
.plan--enterprise .plan__top { background: linear-gradient(180deg, #232c33 0%, #12181d 100%); }
.plan--pro .plan__badge      { color: var(--reelio-green); }
.plan--pro .plan__for span   { background: rgba(0,0,0,0.28); }
.plan__top                   { min-height: 0; padding-bottom: 30px; }

/* Billing switch. styles.css styles .plan-toggle a; these are <button>s
   because nothing navigates, so the same treatment is restated here. */
.plan-toggle { display: inline-flex; background: #f2f5fa; border-radius: var(--radius-pill); padding: 7px; margin-bottom: 40px; gap: 4px; }
.plan-toggle button {
  border: 0; cursor: pointer; background: transparent;
  padding: 12px 34px;
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--fs-body-sm);
  font-weight: var(--weight-light);
  color: var(--simian-blue);
  transition: background .18s ease, color .18s ease;
}
.plan-toggle button.is-active { background: var(--simian-blue); color: var(--white); }
.pricing-hero__inner, .pricing-hero .plan-toggle { text-align: center; }

/* FAQ accordion — each item is its own light-grey rounded card, per Figma. */
.faq__list { max-width: 980px; margin: 44px auto 0; }
.faq__item { background: #f4f6f9; border-radius: 16px; margin-bottom: 16px; padding: 0 34px; }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 26px 44px 26px 0;
  position: relative; font-size: 22px; font-weight: var(--weight-regular);
  transition: color .18s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--simian-blue); }
.faq__item summary::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 11px; height: 11px;
  border-right: 2px solid #6b7688; border-bottom: 2px solid #6b7688;
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__answer {
  padding: 0 44px 28px 0; font-size: var(--fs-body-sm);
  font-weight: var(--weight-light); line-height: 1.6; color: #3d4a4f;
}

@media (max-width: 900px) { .pricing__grid--two { grid-template-columns: minmax(0, 460px); } }
@media (max-width: 600px) { .faq__item { padding: 0 24px; } .faq__item summary { font-size: 19px; padding-right: 36px; } }

/* --------------------------------------------------------------------------
   9. Interior page typography
   Simian centres its page headings and constrains body copy; interior pages
   inherited a left-aligned, full-bleed layout from the old theme.
   -------------------------------------------------------------------------- */
.page-head .container { text-align: center; }
.page-head__sub { margin-inline: auto; }

/* Ported interior content: keep it readable rather than edge-to-edge. */
.section > .container > p,
.section > .container > h2,
.section > .container > h3,
.section > .container > ul,
.section > .container > ol { max-width: 820px; margin-inline: auto; }
.section > .container > h2 { font-size: var(--fs-h3); font-weight: var(--weight-light); margin: 48px 0 16px; }
.section > .container > h3 { font-size: 24px; font-weight: var(--weight-regular); margin: 32px 0 12px; }
.section > .container > p  { font-size: 17px; font-weight: var(--weight-light); line-height: 1.7; margin-bottom: 16px; color: #303a41; }
.section > .container img  { max-width: 100%; height: auto; }
.section .lead { font-size: 20px; font-weight: var(--weight-light); line-height: 1.5; }

/* --------------------------------------------------------------------------
   10. Brand marks
   Sampled from images/logos/logo-reelio.png: the wordmark is #232c33 and the
   three dots are #445e93 slate, #e64c4b red and #5fc18a green.
   -------------------------------------------------------------------------- */
:root {
  --reelio-red:        #e64c4b;
  --reelio-red-dark:   #c93c3b;
  --reelio-logo-green: #5fc18a;
}

/* Enterprise / Business plan header in the brand red rather than flat black. */
.plan--enterprise .plan__top,
.plan--business .plan__top { background: linear-gradient(180deg, #e64c4b 0%, #a8302f 100%); }
.plan--enterprise .plan__badge,
.plan--business .plan__badge { color: var(--white); }

/* Pricing hero — title matches the home hero (full --fs-h1); CTA given room above it. */
.pricing-hero .h1 { font-size: var(--fs-h1); line-height: 1.05; max-width: 960px; margin-inline: auto; }
.pricing-hero__cta { margin-top: 24px; margin-bottom: 40px; }
.plan-toggle__save { margin-left: 8px; font-size: 13px; font-weight: var(--weight-bold); color: var(--reelio-green); }
.plan-toggle button.is-active .plan-toggle__save { color: #b8f2da; }

/* Header padding (badge now sits under the description, not top-right). */
.plan__top { padding: 44px 40px 40px; min-height: 0; }
/* Business badge: small label beneath the plan description, not competing with the name. */
.plan__badge {
  position: static; top: auto; right: auto;
  display: inline-block; margin-top: 16px;
  font-size: 13px; letter-spacing: 0.02em;
}
/* Placeholder reserves the badge's space on plans without one, so both
   coloured headers stay the same height at every width. */
.plan__badge--ph { visibility: hidden; }

/* Plan CTAs side by side (green + solid slate), per Figma. */
.plan__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.plan__ctas .btn { flex: 0 0 auto; }

/* "Built for the Way Creative Companies Sell" — one dark rounded box (inset on
   white) with four centred columns, per Figma. */
.prband { padding: 40px 0 64px; background: var(--white); }
.prband__box {
  border-radius: 28px; padding: 76px 64px; color: var(--white);
  background: linear-gradient(135deg, var(--reelio-charcoal) 0%, var(--reelio-slate) 100%);
}
.prband__head { text-align: center; max-width: 840px; margin: 0 auto 56px; }
.prband__head h2 { font-size: var(--fs-h2); font-weight: var(--weight-light); line-height: 1.04; color: var(--white); margin-bottom: 14px; }
.prband__head p { font-size: var(--fs-body); font-weight: var(--weight-light); line-height: 1.4; color: rgba(255,255,255,0.82); }
.prband__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.prcol { text-align: center; }
.prcol__icon { display: inline-block; width: 56px; height: 56px; object-fit: contain; margin-bottom: 20px; }
.prcol__title { font-size: 24px; font-weight: var(--weight-bold); color: var(--white); line-height: 1.12; margin: 0 0 10px; }
.prcol__text { font-size: var(--fs-body-sm); font-weight: var(--weight-light); color: rgba(255,255,255,0.78); line-height: 1.4; margin: 0; }
@media (max-width: 900px) { .prband__grid { grid-template-columns: repeat(2, 1fr); gap: 34px; } .prband__box { padding: 56px 34px; } }
@media (max-width: 560px) { .prband__grid { grid-template-columns: 1fr; } }

/* Pricing story ("Your Reel Opens the Door.") — light wash, two-part title,
   copy column narrower so the product image reads larger, per Figma. */
.story--wash { background-image: linear-gradient(135deg, #e7ecf6 0%, #f5f8fc 55%, var(--white) 100%); }
.story--wash .story__row { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); column-gap: 56px; }
.story--wash .story__copy h2 { font-size: 52px; font-weight: var(--weight-light); line-height: 1.05; }
.story--wash .story__copy h2 strong { display: block; font-size: 28px; font-weight: var(--weight-bold); margin-bottom: 8px; color: var(--reelio-charcoal); }
.story--wash .story__copy p { font-size: var(--fs-body); line-height: 1.4; }
@media (max-width: 900px) { .story--wash .story__row { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Resources page (SMN-26034 RESOURCES_Desktop) — webinars + walkthroughs +
   practical ideas + newsletter.
   -------------------------------------------------------------------------- */
/* Hero sits on the page-wide charcoal->slate gradient. Figma (Simian H1 = 67.5px)
   wraps the title at ~960px so it breaks "...a More / Connected Sales Process";
   the higher-specificity selector beats the generic .fhero__title size. */
/* .fhero.rhero beats the generic .fhero padding (defined later in the file). */
.fhero.rhero { padding: 68px 0 104px; }
.fhero.rhero .rhero__title { font-size: var(--fs-h1); max-width: 960px; margin-inline: auto; }
.rhero .fhero__sub { max-width: 940px; margin-top: 30px; }
/* small play glyph used inside green buttons */
.btn__play { display: inline-block; width: 0; height: 0; margin-right: 9px; vertical-align: middle;
  border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

.rsec { padding: 84px 0; background: var(--white); }
/* Webinars sits directly under the dark hero: instead of a hard white cut, it
   opens at the hero's slate and fades to white, so the dark bleeds a little way
   into the section before clearing (per Figma). */
/* Webinars is a solid-white band; the dark-to-light transition is simply the
   shared feature-hero body gradient meeting this section, exactly like the
   Features page (no bespoke wash). */
.rsec--wash { background: var(--white); }
.rsec__head { text-align: center; max-width: 820px; margin: 0 auto 48px; }
.rsec__head .h2 { margin-bottom: 14px; }
.rsec__head p { font-size: var(--fs-body); font-weight: var(--weight-light); line-height: 1.4; color: #55627a; }
.rsec__head--light .h2 { color: var(--white); }
.rsec__head--light p { color: rgba(255,255,255,0.82); }

/* Featured webinar */
.rweb { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; align-items: center; max-width: 1040px; margin: 0 auto; }
.rweb__card { position: relative; display: block; width: 100%; border: 0; padding: 0; cursor: pointer; border-radius: 18px; overflow: hidden; background: var(--reelio-charcoal); box-shadow: 0 18px 48px rgba(35,44,51,0.18); aspect-ratio: 16/10; }
.rweb__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rweb__card--noimg { background: linear-gradient(135deg, var(--reelio-charcoal), var(--reelio-slate)); }
.rweb__play, .rvid__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 66px; height: 66px; border-radius: 50%; background: rgba(255,255,255,0.94); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
.rweb__play::after, .rvid__play::after { content: ""; position: absolute; left: 52%; top: 50%; transform: translate(-50%,-50%);
  border-left: 20px solid var(--reelio-green); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.rweb__body h3 { font-size: var(--fs-h4); font-weight: var(--weight-light); line-height: 1.1; color: var(--reelio-charcoal); margin: 0 0 14px; }
.rweb__body p { font-size: var(--fs-body); font-weight: var(--weight-light); line-height: 1.4; color: #55627a; margin: 0 0 26px; }
/* Featured "Watch Webinar" uses the same green-circle + black-text treatment as
   the walkthrough cards (opens the signup modal). */
.rweb__watch { margin-top: 0; }

/* Product walkthroughs — white cards on a mid-slate band (lighter than navy,
   top slightly deeper than bottom, per Figma). */
.rwalk { padding: 84px 0 96px; background: linear-gradient(180deg, #52659a 0%, #98a4c0 100%); }
.rwalk__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 30px; }
.rvid { background: var(--white); border-radius: 16px; overflow: hidden; box-shadow: 0 16px 42px rgba(20,28,50,0.28); display: flex; flex-direction: column; }
/* Branded thumbnail: pale gradient, big reel.io wordmark, small slate title label. */
.rvid__thumb { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  aspect-ratio: 16/9; padding: 20px; overflow: hidden;
  background:
    repeating-radial-gradient(circle at 84% 4%, rgba(104,124,168,0.07) 0 2px, rgba(104,124,168,0) 2px 34px),
    repeating-radial-gradient(circle at 12% 108%, rgba(104,124,168,0.06) 0 2px, rgba(104,124,168,0) 2px 40px),
    linear-gradient(135deg, #f6f8fb 0%, #e6ebf3 100%); }
/* multiply drops the logo PNG's white background over the pale thumb, no separate
   transparent asset needed; the dark wordmark and coloured dots stay. */
.rvid__logo { position: relative; height: 72px; width: auto; max-width: 74%; mix-blend-mode: multiply; }
.rvid__label { position: relative; }
.rvid__logo-fallback { font-weight: var(--weight-bold); font-size: 40px; color: var(--reelio-charcoal); }
.rvid__label { font-size: 17px; font-weight: var(--weight-bold); color: var(--reelio-slate); text-align: center; }
.rvid__body { padding: 44px 34px 40px; display: flex; flex-direction: column; }
.rvid__title { font-size: var(--fs-h4); font-weight: var(--weight-light); line-height: 1.05; color: var(--reelio-charcoal); margin: 0 0 14px; }
.rvid__desc { font-size: var(--fs-body-sm); font-weight: var(--weight-light); line-height: 1.35; color: #55627a; margin: 0 0 26px; }
/* "Watch Video" = green circle play + black bold label (not a pill). */
.rvid__watch { display: inline-flex; align-items: center; gap: 14px; margin-top: auto;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: var(--fs-body-sm); font-weight: var(--weight-bold); color: var(--reelio-charcoal); }
.rvid__watch-ico { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--reelio-green); }
.rvid__watch-ico::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%,-50%);
  border-left: 13px solid var(--white); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.rvid__watch:hover .rvid__watch-ico { background: var(--reelio-green-dark); }

/* Practical ideas — dark cards, centred title + centred green pill, per Figma. */
.ridea__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
.ridea { background: linear-gradient(180deg, #2a323c 0%, #3c5078 100%); border-radius: 16px; padding: 40px 34px 34px;
  display: flex; flex-direction: column; align-items: center; text-align: center; }
.ridea__title { font-size: 26px; font-weight: var(--weight-light); line-height: 1.18; color: var(--white); margin: 0 0 26px; }
.ridea__btn { align-self: center; margin-top: auto; padding: 11px 26px; font-size: 15px; }

/* Footer newsletter (Resources) — left-aligned, underline email field + pill. */
/* Heading + sub run the full footer width so "Get New Reel.io Resources in Your
   Inbox" stays on one line; only the form itself is narrow. */
.site-footer__news { padding: 8px 0 4px; }
.site-footer__news .h2 { margin-bottom: 14px; }
.site-footer__news-sub { font-size: var(--fs-body-sm); font-weight: var(--weight-light); line-height: 1.5; color: #55627a; margin: 0 0 34px; max-width: 760px; }
.fnews { max-width: 360px; }
.fnews__field { position: relative; }
.fnews__input { width: 100%; border: 0; border-bottom: 1.5px solid var(--reelio-charcoal); background: transparent;
  padding: 6px 0; font-size: var(--fs-body-sm); color: var(--reelio-charcoal); }
.fnews__input:focus { outline: none; border-bottom-color: var(--reelio-slate); }
.fnews__label { display: block; margin-top: 8px; font-size: 14px; color: var(--reelio-charcoal); }
.fnews__btn { margin-top: 20px; padding: 11px 24px; }
.fnews__fine { margin: 20px 0 0; font-size: 12.5px; color: #8a93a4; }

/* Webinar signup modal — the featured "Watch Webinar" opens the shared capture
   form (includes/webinar-form.php) in this panel instead of leaving the page. */
.wmodal { position: fixed; inset: 0; z-index: 600; display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 20px; background: rgba(20,26,40,0.62); overflow-y: auto; }
.wmodal[hidden] { display: none; }
.wmodal__panel { position: relative; width: 100%; max-width: 620px; margin: auto; background: var(--white);
  border-radius: 18px; padding: 0; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,0.4); }
.wmodal__panel .wform { max-width: none; margin: 0; border: 0; border-radius: 0; }
.wmodal__close { position: absolute; top: 12px; right: 18px; border: 0; background: none; font-size: 38px; line-height: 1;
  color: #fff; cursor: pointer; padding: 4px 8px; z-index: 2; }
.wmodal__close:hover { color: rgba(255,255,255,0.72); }
@media (max-width: 600px) { .wmodal__panel { padding: 0; } }

@media (max-width: 900px) {
  .rweb { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .rwalk__grid, .ridea__grid { grid-template-columns: repeat(2, 1fr); }
  .rsec { padding: 60px 0; }
}
@media (max-width: 600px) {
  .rwalk__grid, .ridea__grid { grid-template-columns: 1fr; }
  .rhero__title { font-size: 38px; }
}

/* The old theme leaned on purple accents that are not in the Reel.io mark.
   Anything still carrying them is repointed at the slate blue. */
.text-purple, .text-purple * { color: var(--reelio-slate) !important; }
.bg-purple-grad {
  background: linear-gradient(90deg, var(--reelio-charcoal) 0%, var(--reelio-slate) 100%) !important;
}

/* --------------------------------------------------------------------------
   11. Ported interior sections
   The old theme paired .section__content with .section__image inside a
   .wrapper. Those are remapped in the markup onto .story rows, so they get the
   same alternating two-column treatment as the home page. What is left here is
   the intro paragraph and the odds and ends that came across with the content.
   -------------------------------------------------------------------------- */
.intro-lead { padding: 56px 0 8px; }
.intro-lead .lead,
.intro-lead .section__intro {
  max-width: 820px; margin-inline: auto; text-align: center;
  font-size: 20px; font-weight: var(--weight-light); line-height: 1.55; color: #303a41;
}
.story__copy .btn { margin-top: 22px; }
.story__copy p a.btn { display: inline-flex; }
/* Inline images that came across inside copy blocks. */
.story__copy img { max-width: 100%; height: auto; margin-top: 14px; }
/* Old theme decorations that have no styling left — hide rather than show broken. */
.tip-marker, .shape-1, .shape-1-footer, .circle-shape, .features-menu { display: none !important; }

/* Ported content uses a bare .btn (the old theme's default). Simian's .btn is
   a layout-only base that expects a modifier, so a bare one renders as plain
   text. Give it the green CTA treatment unless a modifier is present. */
.story__copy .btn:not([class*="btn--"]),
.doc__inner .btn:not([class*="btn--"]),
.section .btn:not([class*="btn--"]) {
  background: var(--reelio-green);
  color: var(--white);
}
.story__copy .btn:not([class*="btn--"]):hover,
.doc__inner .btn:not([class*="btn--"]):hover,
.section .btn:not([class*="btn--"]):hover { background: var(--reelio-green-dark); color: var(--white); }

/* --------------------------------------------------------------------------
   12. Long-form pages (legal, academy, about)
   These use Simian's own .content-hero / .content-body / .content-prose
   template rather than a bespoke one, so the two sites read identically.
   styles.css hard-codes Simian's navy into the body gradient, so only the
   colours are restated here.
   -------------------------------------------------------------------------- */
/* Measured: the hero ends at 268px with a title only, 399px when a subhead
   wraps to three lines (About). White lands at 405px so the copy is never
   left as white-on-white, and the section below always starts on white. */
body.hero-dark--content {
  --hero-white: 405px;
  background-image: linear-gradient(180deg,
      var(--reelio-charcoal) 0,
      var(--reelio-slate) 200px,
      var(--reelio-slate) calc(var(--hero-white) - 2px),
      var(--white) var(--hero-white));
}
.content-body {
  /* Opaque, so the prose always starts on white no matter how tall the hero
     runs. Without this a title-only page (hero ends 268px) puts its first
     paragraph inside the gradient, which fades out at 405px. */
  background: var(--white);
  position: relative;
}
/* Breathing room after the last paragraph so legal/content pages don't butt
   up against the footer (BA: "a P at the end for spacing"). */
.content-body { padding-bottom: 72px; }
/* Legal-page bullet lists: a touch more room + indent so they read cleanly
   (BA: "AUP bullets look like shit"). */
.content-body .content-prose ul { margin: 8px 0 20px; padding-left: 28px; }
.content-body .content-prose li { margin-bottom: 10px; padding-left: 4px; line-height: 1.55; }
.content-hero__sub {
  color: rgba(255,255,255,0.92);
  font-weight: var(--weight-light);
  margin: 16px auto 0;
  max-width: 720px;
}
/* Tables inside ported legal copy. */
.content-prose table { width: 100%; border-collapse: collapse; margin: 20px 0 26px; }
.content-prose th, .content-prose td {
  border: 1px solid var(--reelio-border); padding: 12px 14px;
  font-size: 15px; font-weight: var(--weight-light); text-align: left; vertical-align: top;
}
.content-prose th { background: var(--reelio-tint); font-weight: var(--weight-regular); }
/* overflow-wrap, because the legal pages paste bare URLs as their own link
   text ("https://www.facebook.com/about/ads/#568137493302217") and an unbroken
   436px token pushed the privacy policy into horizontal scroll at 390px. */
.content-prose a { color: var(--simian-blue); text-decoration: underline; overflow-wrap: anywhere; }
.content-prose img { max-width: 100%; height: auto; margin: 14px 0; }
/* All-caps run-in headings are common in the ported legal text. */
.content-prose strong { font-weight: var(--weight-bold); }

/* --------------------------------------------------------------------------
   13. About — the Simian Suite grid and the global map
   -------------------------------------------------------------------------- */
.suite { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin-top: 48px; }
.suite__card {
  display: flex; flex-direction: column; gap: 18px;
  background: var(--white); border: 1px solid var(--reelio-border);
  border-radius: 15px; padding: 32px 28px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.suite__card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(35,44,51,0.13); }
.suite__logo { height: 46px; display: inline-flex; align-items: center; }
.suite__logo img { max-height: 46px; max-width: 100%; width: auto; height: auto; }
.suite__logo[data-name]::after { content: attr(data-name); font-size: 22px; font-weight: var(--weight-regular); color: var(--reelio-charcoal); }
.suite__desc { font-size: var(--fs-body-sm); font-weight: var(--weight-light); line-height: 1.45; color: #3d4a50; }

/* about-map.png is WHITE artwork on transparency — 35% coverage, every ink
   pixel #ffffff. It was drawn for a dark backdrop, so on the section's light
   wash it washed out (the "white bleeding through"). The panel gives it the
   dark ground it expects, in the brand's own charcoal-to-slate. */
.global-map {
  margin-top: 44px;
  background: linear-gradient(180deg, var(--reelio-charcoal) 0%, var(--reelio-slate) 100%);
  border-radius: 15px;
  padding: 30px 34px;
}
.global-map img { width: 100%; height: auto; display: block; }
@media (max-width: 700px) { .global-map { padding: 18px; border-radius: 12px; } }

@media (max-width: 900px) { .suite { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .suite { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   14. Academy
   The live site lists the modules in a single column; a 3-up grid at desktop
   keeps them scannable without changing the content or its order.
   -------------------------------------------------------------------------- */
.academy__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.academy__card {
  display: block; position: relative;
  background: var(--white);
  border: 1px solid var(--reelio-border);
  border-radius: 15px;
  padding: 34px 30px 30px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.academy__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(35, 44, 51, 0.13);
  border-color: var(--reelio-green);
}
.academy__num {
  display: inline-block; margin-bottom: 14px;
  font-size: 15px; font-weight: var(--weight-bold); letter-spacing: .06em;
  color: var(--reelio-green);
}
.academy__title { font-size: 24px; font-weight: var(--weight-regular); line-height: 1.2; margin-bottom: 10px; }
.academy__desc  { font-size: var(--fs-body-sm); font-weight: var(--weight-light); line-height: 1.5; color: #3d4a50; }

.academy-cta { padding-top: 24px; }
.academy-cta .btn { margin-top: 8px; }

@media (max-width: 900px) { .academy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .academy__grid { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   15. Ported graphics sizing
   The old theme's screenshots are 2x retina exports (1200-2400px wide). At
   width:100% inside a half-width story column they render enormous next to
   their copy. The live site shows them at roughly the size of the text block,
   so they are capped by intrinsic size rather than stretched to fill.
   -------------------------------------------------------------------------- */
.story__media img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 0;          /* composites/transparent PNGs carry their own shape */
  margin-inline: auto;
}
.story__media { display: flex; justify-content: center; }
/* Stacked screenshots in one column shouldn't each take the full height. */
.story__media img + img { margin-top: 18px; }
.story__media:has(img + img) { flex-direction: column; }
.story__media:has(img + img) img { max-height: 260px; }
/* SVG diagrams have no intrinsic pixel size — hold them to the column. */
.story__media img[src$=".svg"] { max-height: 340px; }

/* --------------------------------------------------------------------------
   16. Legal document typography
   Deliberately minimal: the target IS Simian's privacy/legal page, and those
   rules already ship in styles.css (.content-body .content-prose — 17px/1.6,
   h2 at 25px with 36px above, 16px between paragraphs, 820px measure). An
   earlier version of this file re-declared them with a heavier h2 and a rule
   under each heading, which is what made these pages read differently from
   Simian's. Everything below is only what the ported WordPress markup needs
   and Simian's own pages never had.
   -------------------------------------------------------------------------- */
/* Heading WEIGHT, though, does have to be declared. Simian's system carries it
   on the .h1-.h4 classes (all 300), never on the bare elements - and the
   ported legal copy is plain <h2>/<h3>, so it fell through to the browser
   default of bold. Basis Grotesque Bold sitting next to the Light used for
   every other heading on the site reads as a different typeface, which is
   exactly what looked wrong. Weight and line-height only; size, margins and
   measure still come from styles.css. */
.content-body .content-prose h2,
.content-body .content-prose h3,
.content-body .content-prose h4 { font-weight: var(--weight-light); line-height: 1.25; }

/* Headings came across wrapped in <b>/<strong>; keep the heading's own weight. */
.content-body .content-prose h2 b,
.content-body .content-prose h2 strong,
.content-body .content-prose h3 b,
.content-body .content-prose h3 strong { font-weight: inherit; }
/* Bold run-ins and italic asides inside body copy. */
.content-prose p b, .content-prose li b,
.content-prose p strong, .content-prose li strong { font-weight: var(--weight-bold); }
.content-prose i, .content-prose em { font-style: italic; color: #55636b; }

/* Feature sub-nav icons — the live site pairs each label with a small glyph. */
.fnav__item { display: inline-flex; align-items: center; gap: 9px; }
.fnav__icon { width: 24px; height: 24px; object-fit: contain; opacity: .75; }
.fnav__item.is-active .fnav__icon,
.fnav__item:hover .fnav__icon { opacity: 1; }
/* Feature hero graphics are wide banner clusters; the live site shows them at
   about 80% width rather than edge to edge. */
.hero__bleed img, .hero__bleed video { max-width: 1000px; }

/* --------------------------------------------------------------------------
   17. Academy video cards
   The live site shows a thumbnail with a play button that opens the tutorial;
   same behaviour, with the iframe built on click rather than six embeds loaded
   on page view.
   -------------------------------------------------------------------------- */
.vcard {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--reelio-border);
  border-radius: 15px; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.vcard:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(35,44,51,.13); }
.vcard__thumb {
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; cursor: pointer; background: var(--reelio-charcoal);
  aspect-ratio: 16 / 9; overflow: hidden;
}
.vcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard__play {
  position: absolute; inset: 0; margin: auto;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--reelio-green); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
  transition: transform .2s ease, background .2s ease;
}
.vcard__thumb:hover .vcard__play { transform: scale(1.08); background: var(--reelio-green-dark); }
.vcard__body { padding: 24px 26px 28px; }
.vcard__title { font-size: 21px; font-weight: var(--weight-regular); line-height: 1.25; margin-bottom: 8px; }
.vcard__desc { font-size: var(--fs-body-sm); font-weight: var(--weight-light); line-height: 1.5; color: #3d4a50; }

/* Lightbox */
.vmodal {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(15, 20, 24, .88);
  display: flex; align-items: center; justify-content: center; padding: 3vh 3vw;
}
.vmodal[hidden] { display: none; }
/* Sized from the live site, CURRENTSITE/css/reelio.css:
     .lightbox-inner         { width: 80%; max-width: 900px; }
     .lightbox-video-wrapper { padding-bottom: 69%; }

   69% is the share player's real ratio - a 16:9 video plus its control strip -
   which is why both earlier attempts left black: a 16:9 box squeezed the video
   to make room for the controls, and an 88vh box was simply taller than the
   player. 100/69 as an aspect-ratio is the same number the live site uses.

   The third clamp is an addition: the live rule has no viewport-height guard,
   so on a short window its lightbox runs off the bottom of the screen. Capping
   the WIDTH at 88vh x 100/69 keeps the box on screen without touching the
   ratio - clamping the height instead would reintroduce the black bars. */
.vmodal__frame {
  width: min(900px, 80vw, calc(88vh * 100 / 69));
  aspect-ratio: 100 / 69;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
.vmodal__frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* The live site stays at 80% on every screen, which is cramped on a phone.
   Delete this block to match it exactly. */
@media (max-width: 700px) {
  .vmodal__frame { width: min(92vw, calc(80vh * 100 / 69)); }
}

.vmodal__close {
  position: absolute; top: 24px; right: 30px;
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: var(--white);
  font-size: 30px; line-height: 1; cursor: pointer;
}
.vmodal__close:hover { background: rgba(255,255,255,.22); }

/* --------------------------------------------------------------------------
   18. About extras
   -------------------------------------------------------------------------- */
/* Brand lockups on the about page.
   `.story__copy img` earlier in this file is (0,2,1) and was beating
   `.story__brand` at (0,1,0), so the Reel.io logo ignored the height entirely
   and rendered at its natural 500x132 while the Simian one — which sits in
   .section__head, not .story__copy — correctly took 46px. Hence one enormous
   logo and one small one. Matching the specificity fixes both at once. */
.story__brand,
.story__copy img.story__brand,
.section__head img.story__brand { height: 50px; width: auto; margin-bottom: 18px; }
.section__head .story__brand { margin-inline: auto; }

/* logo-reelio.png is RGB with no alpha channel — it has a baked-in white
   background, which reads as a white slab on the tinted .story wash. multiply
   drops white to the backdrop without needing a re-exported asset; every
   section this logo appears on is white or a light tint, so nothing else is
   affected. Swap in a real alpha PNG and this line can go. */
.story__brand[src$="logo-reelio.png"] { mix-blend-mode: multiply; }

.contact-tile {
  /* RENAMED from .contact-card. styles.css already ships a .contact-card —
     a different component entirely (centred, white text, min-height:298px,
     column, space-between), which this card was silently inheriting. That is
     what centred the icon, pushed it 85px clear of the copy and forced the
     box to 298px tall regardless of its content. Renaming rather than
     out-specifying it also means a future styles.css update to Simian's
     .contact-card can't reach this page again. */
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-start; gap: 14px;
  align-self: flex-start;          /* stop the flex parent stretching it tall */
  background: var(--white); border: 1px solid var(--reelio-border);
  border-radius: 15px; padding: 22px 24px; max-width: 340px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.contact-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(35,44,51,.12); border-color: var(--reelio-green); }
.contact-tile img { width: 40px; height: auto; flex: none; }
.contact-tile strong { display: block; font-size: 19px; font-weight: var(--weight-regular); margin-bottom: 5px; }
.contact-tile span { font-size: var(--fs-body-sm); font-weight: var(--weight-light); line-height: 1.5; color: #3d4a50; }

/* --------------------------------------------------------------------------
   19. Feature page heroes
   These graphics are wide "banner cluster" exports drawn to sit on a coloured
   band, not on white — floating them on a white page left them stranded. The
   hero keeps the dark brand gradient behind the copy AND the artwork, which is
   how the live site frames them.
   -------------------------------------------------------------------------- */
/* The gradient goes on <body>, NOT on .hero. The header sits above the hero
   and is transparent, so painting the section left a white strip across the
   top of the page. On <body> it starts at the very top, behind the floating
   nav card, and scrolls with the document.

   No measured stops needed: .fnav immediately below the hero is opaque white,
   so it covers wherever the gradient ends. background-size caps it at 1000px,
   comfortably past the tallest feature hero. */
body.feature-hero {
  /* background-color is the gradient's END colour, not white: the hero runs
     about 460px but that varies with copy length, and if the gradient ran out
     first a white band would appear inside the hero. Holding slate below it
     means the section that follows — .fnav or .story, both opaque — is what
     ends the dark area, at whatever height the hero actually is. */
  background-color: var(--reelio-slate);
  background-image: linear-gradient(180deg, var(--reelio-charcoal) 0%, var(--reelio-slate) 100%);
  background-size: 100% 460px;
  background-repeat: no-repeat;
}
.feature-hero .hero {
  background: transparent;
  padding: 56px 0 0;
  overflow: hidden;
}
.feature-hero .hero__title,
.feature-hero .hero__sub { color: var(--white); }
.feature-hero .hero__sub { opacity: .92; }
.feature-hero .hero__bleed { margin-top: 34px; padding-inline: var(--container-pad); }
/* Flat on the gradient — no radius, shadow or panel behind it, and smaller
   with breathing room below so it isn't jammed against the next section. */
.feature-hero .hero__bleed { margin-top: 30px; padding-bottom: 46px; }
.feature-hero .hero__bleed img { max-width: 640px; margin-inline: auto; }
@media (max-width: 600px) { .feature-hero .hero { padding-top: 36px; } }

/* --------------------------------------------------------------------------
   19b. Feature page hero + icon feature-nav (SMN-26034 FEATURES-*).
   The dark band is painted on <body class="feature-hero"> so it sits behind the
   floating nav; the title, sub and the six-item icon nav all live on it. The
   opaque .story that follows ends the dark area.
   -------------------------------------------------------------------------- */
body.feature-hero { background-size: 100% 640px; }   /* taller than the 460px default to cover the icon nav */
.fhero { padding: 44px 0 0; text-align: center; color: var(--white); }
.fhero__title {
  font-size: var(--fs-h1); font-weight: var(--weight-light); line-height: 1.02;
  color: var(--white); max-width: 1100px; margin: 0 auto; letter-spacing: -0.01em;
}
.fhero__sub {
  font-size: var(--fs-body); font-weight: var(--weight-light); line-height: 1.25;
  color: rgba(255, 255, 255, 0.92); max-width: 900px; margin: 22px auto 0;
}
.ficon-nav { margin-top: 60px; }
.ficon-nav__row { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.ficon-nav__item {
  flex: 1 1 0; min-width: 130px; max-width: 200px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 10px 12px 22px; text-align: center;
  color: rgba(255, 255, 255, 0.78);
  border-bottom: 4px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.ficon-nav__item:hover { color: var(--white); }
.ficon-nav__item.is-active { color: var(--white); border-bottom-color: var(--reelio-green); }
.ficon-nav__icon { width: 46px; height: 46px; display: block; }
.ficon-nav__label { font-size: var(--fs-body-sm); font-weight: var(--weight-light); line-height: 1.15; }
@media (max-width: 900px) {
  .ficon-nav { margin-top: 44px; }
  .ficon-nav__item { min-width: 110px; padding-bottom: 16px; gap: 12px; }
  .ficon-nav__icon { width: 38px; height: 38px; }
  .ficon-nav__label { font-size: 15px; }
}
@media (max-width: 600px) {
  body.feature-hero { background-size: 100% 100%; }
  .ficon-nav__item { flex-basis: 28%; min-width: 92px; }
}

/* --------------------------------------------------------------------------
   20. Image treatment — global
   No image anywhere gets a rounded corner, shadow or panel behind it; they sit
   flat on whatever section they are in.
   -------------------------------------------------------------------------- */
.story__media img,
.story__copy img,
.hero__bleed img,
.content-prose img,
.global-map img { border-radius: 0; box-shadow: none; background: none; }

/* About hero: a small, padded lockup rather than a full-width banner. */
.hero__bleed--sm { padding-block: 12px 30px; }
.hero__bleed--sm img { max-width: 420px; }

/* --------------------------------------------------------------------------
   21. Customer quotes (home)
   The live site runs these as a slider; a three-up grid shows all of them
   without the JS and without hiding two thirds of the social proof.
   -------------------------------------------------------------------------- */
.quotes { background: linear-gradient(180deg, var(--reelio-tint) 0, var(--white) 380px); background-repeat: no-repeat; }
.quotes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: start; }
.qcard {
  background: var(--white); border: 1px solid var(--reelio-border);
  border-radius: 15px; padding: 32px 30px; margin: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.qcard__face { width: 72px !important; height: 72px !important; border-radius: 50%; object-fit: cover; }
.qcard__text { font-size: var(--fs-body-sm); font-weight: var(--weight-light); line-height: 1.55; color: #2f3a41; margin: 0; }
.qcard__cite { font-size: 15px; line-height: 1.4; margin-top: auto; }
.qcard__cite strong { display: block; font-weight: var(--weight-bold); }
.qcard__cite span { color: var(--muted); }
@media (max-width: 900px) { .quotes__grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } }
/* Featured single quote — the feature pages carry one long testimonial rather
   than the homepage's three-up grid. Same card, widened and centred, with the
   quote mark as decoration. The old markup this replaced had no CSS at all in
   the 2026 build: 16px black text running the full window width. */
.quotes--feature { background: linear-gradient(180deg, var(--reelio-tint) 0, var(--white) 100%); }
.qcard--feature {
  max-width: 820px;
  margin-inline: auto;
  padding: 46px 52px 38px;
  gap: 18px;
  align-items: center;
  text-align: center;
  position: relative;
  box-shadow: 0 18px 40px rgba(35, 44, 51, .07);
}
/* Decorative open-quote. aria-hidden by virtue of being generated content;
   pointer-events off so it can never eat a selection drag. */
.qcard--feature::before {
  content: "\201C";
  position: absolute;
  top: 6px; left: 26px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 96px;
  line-height: 1;
  color: var(--reelio-slate);
  opacity: .13;
  pointer-events: none;
  user-select: none;
}
.qcard--feature .qcard__text {
  font-size: 19px;
  line-height: 1.62;
  color: #2f3a41;
  position: relative;   /* above the quote mark */
}
.qcard--feature .qcard__cite { margin-top: 2px; font-size: 15px; }
.qcard--feature .qcard__cite strong { color: var(--reelio-charcoal); }

@media (max-width: 900px) {
  .qcard--feature { padding: 36px 26px 30px; }
  .qcard--feature::before { font-size: 70px; left: 14px; top: 2px; }
  .qcard--feature .qcard__text { font-size: 17px; }
}


/* --------------------------------------------------------------------------
   22. Webinar
   Capture form on the left, pitch on the right.
   -------------------------------------------------------------------------- */
.webinar__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }

.wform { background: var(--white); border: 1px solid var(--reelio-border); border-radius: 15px; overflow: hidden; }
.wform__head { background: linear-gradient(180deg, var(--reelio-charcoal) 0%, var(--reelio-slate) 100%); padding: 26px 32px; color: var(--white); }
.wform__eyebrow { display: block; font-size: 13px; font-weight: var(--weight-bold); letter-spacing: .1em; text-transform: uppercase; }
.wform__meta { font-size: 19px; font-weight: var(--weight-light); margin-top: 6px; }
.wform__body { padding: 30px 32px 34px; }
.wform__intro { font-size: var(--fs-body-sm); font-weight: var(--weight-regular); line-height: 1.55; color: #202b31; margin-bottom: 22px; }
.wform__body > .btn { margin-top: 4px; }

.wform__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.wform__field { display: flex; flex-direction: column; gap: 6px; }
.wform__field--full { grid-column: 1 / -1; }
.wform__field span { font-size: 15px; font-weight: var(--weight-regular); color: #202b31; }
.wform__field em { font-style: normal; color: var(--muted); font-weight: var(--weight-light); }
.wform__field input,
.wform__field select {
  font: inherit; font-size: 16px;
  padding: 11px 13px;
  border: 1px solid var(--reelio-border);
  border-radius: 8px;
  background: var(--white);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.wform__field input:focus,
.wform__field select:focus {
  outline: none;
  border-color: var(--reelio-green);
  box-shadow: 0 0 0 3px rgba(38, 196, 133, .18);
}
.wform__field.is-error input,
.wform__field.is-error select { border-color: #c0392b; }
.wform__actions { grid-column: 1 / -1; margin-top: 4px; }
.wform__actions .btn { width: 100%; }
.wform__error { grid-column: 1 / -1; margin: 0; color: #b00020; font-size: 14px; }
.wform__error[hidden] { display: none; }

.wform__success { text-align: center; padding: 12px 0 6px; }
.wform__success[hidden] { display: none; }
.wform__check {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--reelio-green); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.wform__success h3 { font-size: 24px; font-weight: var(--weight-regular); margin-bottom: 10px; }
.wform__success p { font-size: 15px; font-weight: var(--weight-light); line-height: 1.6; color: #3d4a50; }

.webinar__aside { padding-top: 8px; }
.webinar__logos { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
/* Selector is deliberately long: `.section > .container img` in §14 sets
   `height: auto` at specificity (0,2,1), which beats a plain
   `.webinar__logos img` (0,1,1). Without matching that weight the logos render
   at natural size — logo-simian.png is 1306x406, so it came out 636px wide and
   pushed the page 484px into horizontal scroll. */
.section > .container .webinar__logos img { height: 38px; width: auto; max-width: 100%; }
.webinar__logos span { font-size: 15px; color: var(--muted); }
.webinar__aside h2 { font-size: var(--fs-h4); font-weight: var(--weight-light); line-height: 1.15; margin-bottom: 24px; }
.webinar__covers-title { font-size: 14px; font-weight: var(--weight-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--simian-blue); margin-bottom: 12px; }
.webinar__covers { list-style: disc; padding-left: 22px; margin-bottom: 26px; }
.webinar__covers li { font-size: var(--fs-body-sm); font-weight: var(--weight-light); line-height: 1.5; margin-bottom: 10px; }
.webinar__presenter { font-size: 15px; font-weight: var(--weight-light); line-height: 1.6; color: #3d4a50; padding-top: 20px; border-top: 1px solid var(--reelio-border); }
.webinar__presenter strong { display: block; font-weight: var(--weight-bold); color: var(--ink); margin-bottom: 4px; }

@media (max-width: 900px) {
  .webinar__row { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .wform__fields { grid-template-columns: 1fr; }
}