/*
 * One Ticket's palette on live's marketing pages, in one sheet of its own
 * (linked after live's CSS by the copy, transform T9): near-white ground,
 * black text and buttons, a purple-to-pink gradient on key words, the logo
 * and highlights, a soft pink glow behind the hero. Hand-written, never
 * copied. Every rule is `html body …` with !important, so the order of
 * live's own <style> blocks never matters; nothing here moves anything.
 * Palette: bg #f8f8fa, surface #fff, surface2 #f0f0f5, ink #0b0b0f,
 * muted #4a4a55, line #e5e5ec, button #0b0b0f, link #4f46e5, gradient
 * #5b4fe0 > #9a5de6 > #ee6aa7.
 */

/* ------------------------------------------------- the page's variables
   Live's pages and components each set their colours as variables on a few
   selectors; the same selectors, restated here */
html body,
html body .on-paper,
html body .on-paper-2,
html body .on-night,
html body .hm-shell,
html body .ft-shell,
html body .fc-shell,
html body .pr-shell,
html body .wcb-shell,
html body .sc-purple,
html body .ot-header,
html body .ot-footer,
html body .hm-shell .ot-header,
html body .ft-shell .ot-header,
html body .fc-shell .ot-header,
html body .pr-shell .ot-header,
html body .wcb-shell .ot-header{
  --bg:#f8f8fa!important;--surface:#ffffff!important;--surface-2:#f0f0f5!important;
  --ink:#0b0b0f!important;--muted:#4a4a55!important;--faint:#5a5a66!important;
  --line:#e5e5ec!important;--line-strong:#c4c4d2!important;
  --accent:#5b4fe0!important;--accent-soft:rgba(91,79,224,.10)!important;
  --cta:#0b0b0f!important;--cta-ink:#ffffff!important;--link:#4f46e5!important;
  --shadow:0 24px 60px rgba(40,30,90,.10)!important;
  --shadow-sm:0 10px 26px rgba(40,30,90,.10)!important;
  --ot-bg:#f8f8fa!important;--ot-surface:#ffffff!important;--ot-surface-2:#f0f0f5!important;
  --ot-text:#0b0b0f!important;--ot-muted:#4a4a55!important;--ot-faint:#5a5a66!important;
  --ot-border:#e5e5ec!important;--ot-border-strong:#c4c4d2!important;
  --ot-field-border:#6b6b7a!important;
  --ot-chip:rgba(91,79,224,.10)!important;
  --ot-warn:#854d0e!important;--ot-warn-bg:#fefce8!important;
  --ot-link:#4f46e5!important;--ot-link-hover:#3730a3!important;
  --ot-cta:#0b0b0f!important;--ot-cta-hover:#2a2a33!important;--ot-cta-ink:#ffffff!important;
  --ot-accent:#5b4fe0!important;--ot-accent-soft:rgba(91,79,224,.10)!important;
  --ot-focus-ring:#4f46e5!important;
  --ot-shadow:0 8px 28px rgba(40,30,90,.10)!important;
  --shine-base:#4f46e5!important;--shine-1:#ee6aa7!important;--shine-2:#9a5de6!important;--shine-3:#5b4fe0!important;--shine-4:#ee6aa7!important;
}
html body .on-night,
html body .hm-shell,
html body .ft-shell,
html body .fc-shell,
html body .pr-shell,
html body .wcb-shell{--bg:#f8f8fa!important;--surface:#ffffff!important;--surface-2:#f0f0f5!important}
html body .on-paper-2{--bg:#ffffff!important}

/* ------------------------------------------------------------ the logo */
html body .ot-header-mark{
  background:linear-gradient(135deg,#5b4fe0,#9a5de6 55%,#ee6aa7)!important;
  box-shadow:0 2px 8px rgba(154,93,230,.35)!important;
}

/* ----------------------------------------------------- gradient wording */
html body .gt{
  background:linear-gradient(90deg,#5b4fe0,#9a5de6 55%,#ee6aa7)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  display:inline-block;padding-bottom:.08em;
}

/* ----------------------------------------------------------- the glow
   A soft pink glow behind a hero's headline */
html body .band.hero,
html body .mkt-hero{position:relative!important}
html body .band.hero::before,
html body .mkt-hero::before{
  content:""!important;position:absolute!important;left:50%!important;top:55%!important;
  width:900px!important;max-width:100%!important;height:420px!important;
  transform:translateX(-50%)!important;pointer-events:none!important;z-index:0!important;
  background:radial-gradient(closest-side,rgba(238,106,167,.22),rgba(154,93,230,.10) 60%,transparent)!important;
}
html body .band.hero > *,
html body .mkt-hero > *{position:relative;z-index:1}
html body .mkt-hero{
  background:linear-gradient(180deg,#f8f8fa 0%,#f8f8fa 100%)!important;
}
html body .mkt-band{
  background:radial-gradient(ellipse 50% 60% at 50% 0%,rgba(154,93,230,.10) 0%,transparent 55%),#f8f8fa!important;
}
html body .mkt-watermark{color:rgba(91,79,224,.07)!important}
html body .mkt-calc::after{background:linear-gradient(115deg,transparent 34%,rgba(154,93,230,.05) 48%,transparent 62%)!important}
html body .mkt-sheet::after,
html body .mkt-card.is-accent::after{border-color:rgba(154,93,230,.35)!important}

/* ------------------------------------------------------------ buttons
   The carousels' and tags' coral edges and fills */
html body .tc-btn{border-color:#c4c4d2!important;color:#0b0b0f!important}
html body .tc-card:hover .tc-btn{background:#0b0b0f!important;border-color:#0b0b0f!important;color:#ffffff!important}
html body .tc-card img{background:#f0f0f5!important}
html body .tc-card:focus-visible img{outline-color:#4f46e5!important}
html body .tc-all,
html body .tm-all,
html body .tm-card i,
html body .tg-jump a:hover{color:#4f46e5!important}
html body .tc-all.ot-shine,
html body .tm-all.ot-shine{--shine-base:#4f46e5!important}
html body .tc-arrow,
html body .tg-jump a{border-color:#c4c4d2!important}
html body .tc-arrow:hover,
html body .tm-card:hover,
html body .tg-jump a:hover{border-color:#5b4fe0!important}
html body .tc-arrow:focus-visible,
html body .tm-card:focus-visible,
html body .tm-all:focus-visible,
html body .ot-toggle:focus-visible,
html body .ot-check:focus-visible{outline-color:#4f46e5!important}
html body .links a:hover{color:#4f46e5!important}
html body .bl-tag.is-paid{background:#eeecff!important;color:#3730a3!important;border-color:#c8c3ff!important}

/* ------------------------------------------------------------- focus
   One ring colour, 6.3:1 on the near-white ground */
html body :is(a,button,input,select,textarea,summary,[tabindex],[role="button"]):focus-visible{outline-color:#4f46e5!important}
html body .ot-header a:focus-visible,
html body .ot-header button:focus-visible{outline-color:#4f46e5!important}
html body .ot-header-nav a.ot-header-cta:focus-visible{outline-color:#ffffff!important}
html body .fc-scroll:focus-visible{outline-color:#4f46e5!important}

/* ------------------------------------------------- pictures of the product
   The cover art on the demo pages: purple and pink where it was coral
   and amber */
html body .cover.art-coral{background:linear-gradient(135deg,#5b4fe0,#9a5de6 55%,#ee6aa7)!important}
html body .cover.art-amber{background:linear-gradient(135deg,#4338ca,#7c3aed 55%,#c084fc)!important}
html body .sc-coral{
  --accent:#9a8cf5!important;--accent-soft:rgba(154,140,245,.18)!important;
  --cta:#5b4fe0!important;--cta-ink:#ffffff!important;--link:#c8c3ff!important;
}
html body .sc-amber{
  --bg:#fdf4f9!important;--surface:#fdf4f9!important;--surface-2:#fbe7f1!important;
  --line:#f8d7e8!important;--line-strong:#8a7080!important;
  --accent:#db2777!important;--accent-soft:rgba(219,39,119,.12)!important;
  --cta:#be185d!important;--cta-ink:#ffffff!important;--link:#be185d!important;
}

/* The demo phones' initials, coloured inline in live's page */
html body i[style*="#c25336"]{background:#5b4fe0!important}
html body i[style*="#e07a5f"]{background:#9a5de6!important}
html body i[style*="#d97706"]{background:#db2777!important}
/* The same, once the page's script has written them back as rgb() */
html body i[style*="rgb(194, 83, 54)"]{background:#5b4fe0!important}
html body i[style*="rgb(224, 122, 95)"]{background:#9a5de6!important}
html body i[style*="rgb(217, 119, 6)"]{background:#db2777!important}