/* ==========================================================================
   Simian Lite — palette override + Lite-only components
   --------------------------------------------------------------------------
   Loads AFTER assets/css/styles.css (the Simian 2026 global stylesheet).

   Two jobs, in this order:
     1. Remap the three brand tokens so every Simian component renders in the
        Simian Lite palette. No component rules are duplicated — retuning the
        tokens repaints the nav, buttons, mega-menu, footer, pricing plans and
        comparison tables in one move.
     2. Add the components Simian has no equivalent for: the home-page story
        sections, the FAQ accordion, the pull-quote card, and the comparison
        table.

   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
   Simian's dark brand color is #043f57. Simian Lite's is the existing
   #08313a deep teal, with the #20c5da cyan as the CTA/accent. Component rules
   in styles.css reference these by name, so this is the whole recolor.
   -------------------------------------------------------------------------- */
:root {
  --simian-blue:  #08313a;   /* was #043f57 — nav CTA, headings, dark heroes */
  --color-2:      #20c5da;   /* Simian Lite cyan                             */
  --accent-green: #20c5da;   /* was #4afa60 — secondary CTA button           */

  /* Lite-specific, used only by the components below. */
  --lite-cyan:      #20c5da;   /* established UI cyan (was --accent) */
  --lite-blue:      #1ad4e9;   /* sampled from the Simian Lite logomark */
  --lite-cyan-dark: #18a7b8;
  --lite-ink:       #08313a;
  --lite-band:      #f7f7f7;
  --lite-dark:      #3b3f45;
  --lite-border:    #e6edf2;
}

/* --------------------------------------------------------------------------
   Full-bleed hero image.
   The headline, subhead and CTA stay inside .container; only the screenshot
   runs edge to edge. It sits OUTSIDE .container in the markup rather than
   using a 100vw breakout, because 100vw includes the scrollbar width and
   would add a horizontal scrollbar on Windows.
   -------------------------------------------------------------------------- */
.hero__bleed { width: 100%; margin-top: 44px; }
.hero__bleed img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;   /* square corners — it meets both page edges */
}

/* Hover states in styles.css are hard-coded to Simian's blue ramp. */
.btn--primary:hover    { background: #0b4854; color: var(--white); }

/* Nav "Free Trial" pill in the Simian Lite cyan rather than the dark teal.
   NOTE: white on #20c5da is ~1.9:1, below the WCAG AA 4.5:1 minimum for body
   text and 3:1 for large text. Set by brand preference. */
.nav__cta,
.nav__links a.nav__cta {
  background: var(--lite-cyan);
  color: var(--white);
}
.nav__cta:hover,
.nav__links a.nav__cta:hover {
  background: var(--lite-cyan-dark);
  color: var(--white);
}
/* Cyan buttons, white label — same contrast caveat as .nav__cta above. */
.btn--green            { color: var(--white); }
.btn--green:hover      { background: var(--lite-cyan-dark); color: var(--white); }
/* The plan badge inherits --accent-green, which is now the card's own cyan. */
.plan--lite .plan__badge { color: var(--white); }
.btn--light:hover      { background: #e8f7fa; }
.cookie-bar__btn--solid:hover { background: var(--lite-cyan-dark); }

/* The mega-menu's Lite card is the one that represents *this* site — give it
   the cyan treatment and let Simian's stay in Simian blue. */
.mega-card--lite { background: linear-gradient(180deg, #08313a 0%, #20c5da 100%); }

/* Promo bar reads as an announcement, not a nav element.
   (Currently hidden — see LITE_PROMO_BAR in include/config.php.) */
.topbar a { color: var(--lite-cyan); }

/* Comparison pages — hero gradient.
   Same mechanism as Simian: the gradient lives on <body>, which propagates to
   the canvas and scrolls with the document. It must NOT be painted on the
   sticky .site-header — that pins the top colour to the viewport so it never
   scrolls away, and it must not go on .cmp-hero either, because the header
   floats above the hero and would be left as a pale band.

   Built from the Simian Lite logo blue (#1ad4e9) rather than Simian's navy.

   The px stops are deliberately conservative so one set covers every width
   without per-breakpoint tuning. Measured across 1440/1200/900/768/600/390:
   the hero copy ends between 431px and 701px, and the hero itself ends
   between 776px and 1327px. Reaching white at 880px therefore always clears
   the copy and always lands at or inside the hero, where the opaque
   .cmp-table takes over. */
body.hero-dark--compare {
  background-color: var(--white);
  background-image: linear-gradient(180deg,
      #06424b 0,
      #0b6373 420px,
      #1c93a8 680px,
      var(--white) 880px);
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   2a. Compare dropdown (nav__item--mega + mega--list)
   A plain link list rather than the 4-card product grid.
   -------------------------------------------------------------------------- */
/* styles.css positions .mega with left:0; right:0 against .nav, which is what
   makes the Products panel span the whole nav card. The Compare menu is a
   short link list, so it needs its own positioning context — hence
   position:relative on the item — plus right:auto to stop it stretching. */
.nav__item--drop { position: relative; }
.mega--list {
  top: 100%;
  left: 0;
  right: auto;
  width: max-content;
  min-width: 260px;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--lite-border);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(8, 49, 58, 0.16);
}
.mega--list::after { display: none; }          /* no dark-panel arrow */
.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: #f2fbfd; color: var(--simian-blue); }

/* 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 "Compare" 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; }
}

/* --------------------------------------------------------------------------
   2b. Story sections — the seven-step tour on the homepage.
   Replaces the old numbered timeline (spine + 01-07 badges, removed). Each
   section is a two-column copy/media row on its own soft gradient that fades
   to white, mirroring how the Simian home page separates its sections
   (.media / .review use #e8eff4 -> white; .ent-features uses #d4dee3 -> white).
   Sections alternate tint depth and image side so the page has rhythm without
   needing the numbers to anchor it.
   -------------------------------------------------------------------------- */
.story {
  padding: 92px 0;
  background-repeat: no-repeat;
  background-image: linear-gradient(180deg, #e8eff4 0, var(--white) 430px);
}
/* Alternate sections fade from the Simian Lite cyan instead of the neutral
   blue-gray, so the brand colour carries down the page. */
.story--deep {
  background-image: linear-gradient(180deg, #d3f2f8 0, var(--white) 430px);
}

.story__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: 64px;
}
/* Media on the left, copy on the right. Order is set rather than swapping the
   markup, so the DOM stays in reading order for screen readers. */
.story--flip .story__copy  { order: 2; }
.story--flip .story__media { order: 1; }

.story__copy h2 {
  font-size: var(--fs-h3);
  font-weight: var(--weight-light);
  line-height: 1.05;
  margin-bottom: 16px;
}
.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);   /* match the <p> above the list */
  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;
}

/* --------------------------------------------------------------------------
   2c. Pull quote
   -------------------------------------------------------------------------- */
.lite-quote { padding: 80px 0; }
.lite-quote__card {
  max-width: 1000px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}
.lite-quote__mark {
  font-size: 200px;
  line-height: .8;
  color: var(--lite-cyan);
  font-weight: 700;
}
.lite-quote__text {
  font-size: var(--fs-body);
  font-weight: var(--weight-light);
  line-height: 1.4;
  margin: 0 0 18px;   /* zero the browser's default blockquote side margins so the
                         quote text aligns left with the director name below it */
}
.lite-quote__cite { font-size: 20px; font-weight: 700; }
.lite-quote__cite span { display: block; font-weight: var(--weight-light); }

/* --------------------------------------------------------------------------
   2d. FAQ accordion
   -------------------------------------------------------------------------- */
.faq__list {
  max-width: 980px;
  margin: 44px auto 0;
  border-top: 1px solid var(--lite-border);
}
.faq__item { border-bottom: 1px solid var(--lite-border); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 44px 24px 4px;
  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: 10px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--lite-cyan);
  border-bottom: 2px solid var(--lite-cyan);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}
.faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__answer {
  padding: 0 44px 26px 4px;
  font-size: var(--fs-body-sm);
  font-weight: var(--weight-light);
  line-height: 1.6;
  color: #3d4a4f;
}

/* --------------------------------------------------------------------------
   2e. Comparison pages.
   The layout comes wholesale from Simian's own .cmp-hero / .cmpcat / .cmprow /
   .cmpc / .cmp-next rules in styles.css — the two sites render identically.
   Only the bits specific to Simian Lite are below.
   -------------------------------------------------------------------------- */

/* Cards are Simian's .cmpc exactly — same near-white panel, no tint and no
   coloured edge. The two sides are told apart by their logo marks, which is
   how Simian does it. */
.cmpc__vs--lite { color: var(--lite-cyan); }


/* Secondary line inside a card, e.g. "(views, plays)". */
.cmp__sub { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }

/* Footnote under the last category. */
.cmp__note { margin-top: 6px; font-size: 12px; color: var(--muted); }

/* Closing panel: the CTA row sits under the prose, not beside it. */
.cmp-next__inner .cmp-hero__cta { margin-top: 34px; }

@media (max-width: 900px) {
  /* styles.css already drops .cmprow__cards to one column here; keep the two
     cards visually paired by tightening the gap and the min height. */
  .cmpc { min-height: 0; padding: 22px 26px; gap: 18px; }
  .cmprow { margin-bottom: 20px; }
}

@media (max-width: 600px) {
  /* Stack the brand label above the text. Side by side, styles.css reserves
     120px for the label, which leaves the copy a ~150px column on a phone and
     wraps short phrases over three or four lines. */
  .cmpc { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 22px; }
  .cmpc__vs { flex: none; }
  .cmpcat__title { font-size: 26px; }
  .cmprow__feature { font-size: 20px; }
}

/* --------------------------------------------------------------------------
   2f. Underlined form fields (trial / contact)
   Simian's .ft-form uses boxed inputs; Simian Lite keeps its underline style.
   -------------------------------------------------------------------------- */
.lite-form { display: grid; gap: 22px 40px; grid-template-columns: 1fr 1fr; max-width: 1000px; margin-inline: auto; text-align: left; }
.lite-form__field { display: flex; flex-direction: column-reverse; }
.lite-form__field--full { grid-column: 1 / -1; }
.lite-form__field label { font-size: 15px; color: #46545a; margin-top: 6px; }
.lite-form__field input,
.lite-form__field select,
.lite-form__field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: 10px 0;
  width: 100%;
  min-height: 40px;
  font: inherit;
  font-size: 20px;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .18s ease;
}
.lite-form__field input:focus,
.lite-form__field select:focus,
.lite-form__field textarea:focus {
  outline: none;
  box-shadow: none;
  border-bottom-color: var(--lite-cyan);
  border-bottom-width: 2px;
  padding-bottom: 9px;
}
.lite-form__field select {
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 12px;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='black' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
}
.lite-form__field select option { font-size: 16px; }
.lite-form__panel { background: var(--lite-band); border-radius: 15px; padding: 56px 48px; margin-top: 40px; }
.lite-form__actions { grid-column: 1 / -1; margin-top: 10px; }
.lite-form__error { grid-column: 1 / -1; color: #b00020; font-size: 15px; }
.lite-thanks { padding: 40px 24px; font-size: 24px; font-weight: var(--weight-light); line-height: 1.5; text-align: center; }

/* --------------------------------------------------------------------------
   2g. Pricing — single Lite plan, centered.
   Reuses Simian's .plan card; just constrains the grid to one column.
   -------------------------------------------------------------------------- */
.pricing__grid--single { grid-template-columns: minmax(0, 460px); justify-content: center; }

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

@media (max-width: 900px) {
  /* Single column: copy first, image after — on both normal and flipped rows,
     so the reading order never puts a screenshot before the text explaining it. */
  .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, #e8eff4 0, var(--white) 300px); }
  .story--deep { background-image: linear-gradient(180deg, #d3e0e6 0, var(--white) 300px); }
  .hero__bleed { margin-top: 32px; }
  .lite-quote__card { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lite-quote__mark { font-size: 120px; }
  .lite-form { grid-template-columns: minmax(0, 1fr); }
  .lite-form__panel { padding: 40px 24px; }
}

@media (max-width: 560px) {
  /* styles.css drops the logo grid to 2 columns here but keeps .clients'
     40px side padding and the logos' fixed 150px max-width, which together
     push the page ~36px wider than a 390px viewport. */
  .clients { padding-inline: 0; }
  .clients__grid { gap: 20px 16px; }
  .clients__logo img { max-width: 100%; }
}

@media (max-width: 600px) {
  .faq__item summary { font-size: 19px; padding-right: 36px; }
  .trial-band { padding: 40px 20px; }

  /* Fit the 3-column comparison inside the viewport rather than making it
     scroll sideways — a clipped table reads as broken, and nothing signals
     that there is more to the right. */
  .cmp { margin-top: 36px; }
  .cmp__table { table-layout: fixed; width: 100%; }
  .cmp__table th, .cmp__table td { padding: 12px 8px; font-size: 13px; line-height: 1.3; }
  .cmp__table tbody th { width: 44%; hyphens: auto; }
  .cmp__table thead th { height: 72px; }
  .cmp__table thead th img { max-width: 100%; }
  .cmp__sub { font-size: 11px; }
  .cmp__mark { font-size: 18px; }
}

/* =======================================================================
   Pricing page (2026) — single-plan header trim + titled feature groups
   Loaded after styles.css, so these win without editing the shared sheet.
   ======================================================================= */

/* Trim the tall teal plan header on the single-plan layout. The shared
   .plan__top is min-height:400px to align three comparison cards; this page
   shows one plan with the tagline/badges hidden, so it ran ~200px of empty
   teal. Scoped to --single so the comparison pages are untouched. */
.pricing__grid--single .plan__top { min-height: 190px; }

/* Titled feature groups inside the plan card (CREATE AND PRESENT, etc.). */
.plan__feat-group {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0f7783;                 /* Lite teal — ties the labels to the card header */
  margin: 22px 0 16px;            /* a little more breathing room below the header */
}
.plan__feat-group:first-child { margin-top: 0; }
.plan__body .plan__features { margin-bottom: 0; }   /* group headings own the spacing */

/* =======================================================================
   Comparison pages (2026) — page-specific "Choose Simian Lite…" line,
   plus the shared closing trial block. Reuses .cmp-next for the dark band.
   ======================================================================= */

/* Page-specific closing statement, centered below the table. */
.cmp-choose { text-align: center; padding: 46px 0 44px; }
.cmp-choose p {
  max-width: 840px; margin: 0 auto;
  font-size: 22px; font-weight: var(--weight-regular);
  line-height: 1.4; color: var(--ink);
}

/* Price line inside the shared dark "Send More Than a Link" band. */
.cmp-band__price { color: var(--accent-green) !important; font-weight: var(--weight-bold) !important; }

/* Shared trial block — centered, two-column "Included with your trial" list. */
.cmp-trial { text-align: center; }
.cmp-trial__inner { max-width: 760px; }
.cmp-trial__lead {
  font-weight: var(--weight-light); font-size: var(--fs-body);
  line-height: 1.35; margin: 14px auto 28px; max-width: 640px;
}
.cmp-trial__incl { font-weight: var(--weight-bold); margin: 0 0 18px; }
.cmp-trial__list {
  list-style: none; padding: 0; margin: 0 auto 32px; max-width: 580px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 13px 30px; text-align: left;
}
.cmp-trial__list li {
  position: relative; padding-left: 28px;
  font-weight: var(--weight-light); line-height: 1.3; color: var(--ink);
}
.cmp-trial__list li::before {
  content: "\2713"; position: absolute; left: 2px; top: 0;
  color: #17a05a; font-weight: var(--weight-bold);
}
.cmp-trial__cta { justify-content: center; }
@media (max-width: 560px) {
  .cmp-trial__list { grid-template-columns: 1fr; max-width: 320px; }
  .cmp-choose p { font-size: 19px; }
}

/* Callout 6 GIF (Reel Library) — blend the white GIF background into the page. */
.blended-element { mix-blend-mode: multiply; }