/* ============================================================================
   Growthguru.ai Creative — page styles (static/growthguru/creative.html)

   Ported from the handoff design ("Growthguru Creative.dc.html", v16). The
   markup keeps the design's inline styles for one-off values, the way the
   sibling marketing pages do; anything repeated, stateful or responsive lives
   here. Hover states use the sibling pages' idiom: `data-hv="N"` on the element
   plus a rule at the foot of this file (they need !important to beat the
   inline style they modify).

   Fixed light brand palette — a marketing page, like startups.html, and a
   deliberate opt-out from the app's theme tokens. The shared tn header and
   gg-footer are untouched: nothing here targets .tn or .gg-footer.
   ============================================================================ */

/* ---- Page ground ---------------------------------------------------------
   reset.css makes <body> an app shell (flex column, 100dvh, overflow hidden).
   A scrolling marketing page has to undo all three, display included. */
html { scroll-behavior: smooth; overflow-y: auto; overflow-x: hidden; height: 100%; }
body {
  display: block; overflow-x: hidden; overflow-y: auto; height: auto; min-height: 100vh;
  margin: 0; background: #ffffff; color: #0B1B36;
  font-family: Figtree, system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
/* The body rule above loses to theme-growthguru.css's `.theme-growthguru { font-family:
   var(--font-primary) }` (a class beats `body`), which put the whole page in the system
   stack. Set the design's font on the page's own containers instead, leaving the shared
   header on its theme font. */
main.cr-main { display: block; overflow-x: clip; line-height: normal; font-family: Figtree, system-ui, sans-serif; color: #0B1B36; -webkit-font-smoothing: antialiased; }
main.cr-main input, main.cr-main textarea, main.cr-main select, main.cr-main button { font-family: inherit; }
main.cr-main a { color: #1546A8; }
main.cr-main a:hover { color: #2A6FDB; }
main.cr-main h1, main.cr-main h2, main.cr-main h3, main.cr-main h4 { margin-top: 0; }
/* theme-growthguru.css styles bare elements at (0,1,1) — `.theme-growthguru h2`
   pins a dark grey colour (white headings on the dark sections went dark), and
   `.theme-growthguru p` sets line-height 1.7. The design was drawn against
   browser defaults, so these resets sit at (0,1,2) and the page's own classed
   rules below are written two classes deep to stay above them. */
main.cr-main h2 { color: inherit; margin-bottom: 0; }
main.cr-main h4 { line-height: normal; }
main.cr-main p, body .cr-modal p, body .cr-railm p { line-height: normal; }

@keyframes ggfloat { 0%,100% { transform: translate3d(0,0,0) } 50% { transform: translate3d(0,-14px,0) } }
@keyframes gg3d { 0%,100% { transform: rotateX(0deg) rotateY(0deg) translateZ(0) } 25% { transform: rotateX(8deg) rotateY(-12deg) translateZ(10px) } 50% { transform: rotateX(-4deg) rotateY(10deg) translateZ(18px) translateY(-6px) } 75% { transform: rotateX(-8deg) rotateY(-6deg) translateZ(6px) } }
@keyframes ggglow { 0%,100% { opacity: .5; transform: scale(.92) } 50% { opacity: 1; transform: scale(1.08) } }
@keyframes ggtwinkle { 0%,100% { opacity: .25; transform: scale(.7) } 50% { opacity: 1; transform: scale(1.2) } }
@keyframes ggspin { to { transform: rotate(360deg) } }

.cr-ico { display: inline-block; flex: none; vertical-align: middle; }

/* ---- Shared section type ------------------------------------------------- */
.cr-sec { scroll-margin-top: 80px; padding: clamp(64px,7vw,112px) clamp(20px,4vw,48px); }
.cr-wrap { max-width: 1320px; margin: 0 auto; }
.cr-eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7C3AED; }
.cr-h2 { margin: 0; font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(36px,4.2vw,64px); line-height: .98; letter-spacing: -.02em; }
.cr-em { font-style: italic; background: linear-gradient(90deg,#2A6FDB 0%,#7C3AED 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
.cr-dark { background: linear-gradient(120deg,#082E70 0%,#1A3FB8 32%,#3B30B0 64%,#5B21B6 100%); color: #fff; }

/* ---- 01 Hero ------------------------------------------------------------- */
.cr-hero { position: relative; z-index: 2; padding: clamp(48px,6vw,96px) clamp(20px,4vw,48px) calc(7vw + 24px); }
.cr-hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 78% 40%, rgba(167,139,250,.35) 0%, rgba(167,139,250,0) 70%), linear-gradient(120deg,#0B3A8C 0%,#1D4ED8 30%,#4338CA 62%,#6D28D9 100%);
  clip-path: polygon(0 0,100% 0,100% calc(100% - 7vw),0 100%);
}
.cr-hero-grid { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; display: grid; align-items: center; gap: clamp(24px,3vw,40px); grid-template-columns: minmax(0,1fr); }
.cr-hero-text { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: clamp(16px,3vw,48px) 0; }
.cr-title-host { position: relative; perspective: 1400px; padding: 28px; margin: -28px -28px calc(clamp(14px,1.6vw,22px) - 28px); display: flex; align-items: center; cursor: default; }
.cr-main .cr-h1 { margin: 0; font-size: clamp(38px,4.4vw,64px); font-weight: 800; line-height: 1.04; letter-spacing: -.03em; color: #fff; text-wrap: balance; }
.cr-script {
  display: inline-block; transform-origin: 50% 60%;
  transform: perspective(520px) rotateX(calc(var(--ty, 0) * -28deg)) rotateY(calc(var(--tx, 0) * 38deg)) rotateZ(calc(var(--tx, 0) * -4deg)) translate(calc(var(--tx, 0) * 12px), calc(var(--ty, 0) * 8px));
  transition: transform .45s cubic-bezier(.2,.9,.25,1.25); text-shadow: none;
  filter: drop-shadow(calc(var(--tx, 0) * -10px) calc(var(--ty, 0) * -8px + 10px) 14px rgba(15,10,60,.35));
  will-change: transform; padding: .12em .14em .12em .24em; margin: -.12em 0 -.12em -.24em;
  font-family: Satisfy, cursive; font-weight: 400; font-size: 1.18em; letter-spacing: 0; line-height: 1;
  background: linear-gradient(90deg,#C4B5FD 0%,#A5B4FC 55%,#7DD3FC 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cr-hero-stack { position: relative; min-width: 0; opacity: 0; transition: opacity .7s ease; }
/* Split hero from 1000px: the stack bleeds to the viewport edge and drops
   into section 2 (the design's heroCols / heroBleed / heroDrop). The bleed is
   -max(48px, (100vw - 1280px) / 2) — the page gutter or the centred margin. */
@media (min-width: 1000px) {
  .cr-hero-grid { grid-template-columns: minmax(0,42fr) minmax(0,58fr); }
  .cr-hero-stack { margin-bottom: calc(-7vw - 140px); margin-right: min(-48px, calc((1280px - 100vw) / 2)); }
}
.cr-sk-stage { z-index: 1; perspective: 1700px; perspective-origin: 50% 45%; position: relative; display: flow-root; margin: clamp(20px,3vw,40px) auto 0; }
.cr-skbox { transform-origin: 50% 50%; transform: rotateZ(calc(var(--ta, 0) * 5deg)); transform-style: preserve-3d; will-change: transform; transition: transform .5s cubic-bezier(.2,.8,.2,1); position: relative; margin: 0 auto; }
.cr-sk {
  position: absolute; overflow: hidden; border-radius: 12px; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  outline: 1px solid rgba(255,255,255,.9); outline-offset: -1px; transform-origin: 0 0; background: #fff;
}
.cr-sk:focus-visible { outline: 3px solid #FDE68A; outline-offset: 2px; }
.cr-sk--studio { outline-color: rgba(91,111,216,.6); }
.cr-sk-fill { position: absolute; inset: 0; background: linear-gradient(160deg,#FFFFFF 0%,#F5F3FF 100%); }
.cr-sk-glow { position: absolute; right: -30%; top: -30%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side,rgba(124,58,237,.10),transparent); }
.cr-sk-img { position: absolute; inset: 14% 10% 18%; display: block; width: 80%; height: 68%; object-fit: contain; object-position: center; border-radius: 8px; filter: saturate(1.1); opacity: .92; box-shadow: 0 10px 24px -14px rgba(30,27,75,.35); transition: opacity .7s ease-in-out; }
.cr-sk-tag { position: absolute; top: 10px; left: 10px; border-radius: 999px; color: #fff; box-shadow: 0 8px 18px -10px rgba(55,48,163,.6); line-height: 1.2; font-weight: 800; white-space: nowrap; transition: opacity .45s; }
.cr-sk-role { display: inline-block; vertical-align: bottom; overflow: hidden; white-space: nowrap; font-weight: 600; transition: max-width .45s ease, opacity .35s; max-width: 0; opacity: 0; }
.cr-ca-pane { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 44px 20px 52px; text-align: center; transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.2,1); opacity: 0; transform: translateY(10px) scale(.97); }
.cr-ca-pane.is-on { opacity: 1; transform: none; }
.cr-ca-pane.is-prev { transform: translateY(-10px) scale(.97); }
.cr-ca-dots { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 5px; }
.cr-ca-dots span { height: 4px; width: 4px; border-radius: 2px; background: rgba(109,40,217,.25); transition: width .4s, background .4s; }
.cr-ca-dots span.is-on { width: 16px; background: #6D28D9; }

/* ---- 02 Why we exist ----------------------------------------------------- */
#why { --cr-s2top: clamp(20px,3vw,48px); }
@media (min-width: 1000px) { #why { --cr-s2top: 200px; } }
@media (max-width: 899px) {
  /* The design caps the copy at 34vw so it sits inside the film's light centre
     on a desktop. On a phone that is ~130px, eight characters a line; the copy
     takes the column instead. */
  #why [data-why-text] { max-width: min(560px,100%) !important; }
}

/* ---- 04 GrowthCanvas ----------------------------------------------------- */
.cr-panel-btn { width: 100%; display: flex; align-items: baseline; gap: 12px; padding: 10px 12px; border: 0; border-radius: 12px; font: inherit; text-align: left; cursor: pointer; transition: background .2s, color .2s; background: transparent; color: #9FB6DA; }
.cr-panel-btn .cr-panel-n { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: #6E8FC4; }
.cr-panel-btn .cr-panel-t { font-size: 15px; font-weight: 700; }
.cr-panel-btn[aria-current="true"] { background: rgba(255,255,255,.12); color: #fff; }
.cr-panel-btn[aria-current="true"] .cr-panel-n { color: #9FE3FA; }
.cr-round { width: 44px; height: 44px; flex: none; border-radius: 50%; font: inherit; font-size: 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cr-round--ghost { border: 1px solid rgba(159,227,250,.5); background: transparent; color: #fff; }
.cr-round--solid { border: 0; background: #fff; color: #0A2A5E; }
.cr-round--light { border: 1px solid #C9D6EC; background: #fff; color: #0B1B36; }

/* ---- 05 Meet your new team ----------------------------------------------- */
.cr-tablist { margin: 40px auto 0; width: max-content; max-width: 100%; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: #fff; border: 1px solid #DCE6F5; overflow-x: auto; }
.cr-ttab { flex: none; padding: 11px 20px; border: 0; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .25s, color .25s; background: transparent; color: #44506A; }
.cr-ttab[aria-selected="true"] { background: #7C3AED; color: #fff; }
.cr-services { min-width: 0; display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,230px),1fr)); gap: 12px; align-content: start; flex: 2 1 520px; }
.cr-service { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 18px; background: #F7F5FF; border: 1px solid #E9E3FB; transition: border-color .2s, transform .2s; }
.cr-service:hover { border-color: #7C3AED; transform: translateY(-3px); }
.cr-main .cr-service h4 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.cr-service-alt { font-size: 12px; font-weight: 600; color: #5B6680; }
.cr-main .cr-service p { margin: 0; font-size: 15px; line-height: 1.45; color: #44506A; }
.cr-service-cta { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid #C9D6EC; background: #fff; color: #5B21B6; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.cr-service-cta:hover, .cr-service-cta:focus-visible { border-color: #7C3AED; background: #F5F2FF; }

/* ---- 06 See it built ----------------------------------------------------- */
.cr-piece { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 6px 6px 12px; border: 1px solid #E3EAF6; border-radius: 16px; background: #fff; color: #0B1B36; font: inherit; text-align: left; cursor: zoom-in; transition: transform .25s, box-shadow .25s; }
.cr-piece:hover, .cr-piece:focus-visible { transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(21,70,168,.6); }
.cr-piece-thumb { display: block; width: 100%; aspect-ratio: 4/3; border-radius: 11px; background-color: #EAF2FD; background-size: cover; background-position: top center; }

/* ---- 08 How we work: strategist demo ------------------------------------- */
.cr-step-n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #9FE3FA; color: #0A2A5E; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.cr-step-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cr-step-t { font-size: 15px; font-weight: 800; color: #fff; }
.cr-step-s { font-size: 13px; color: #9FB6DA; }
.cr-caret { display: inline-flex; transition: transform .3s; }
[aria-expanded="true"] .cr-caret { transform: rotate(180deg); }
.cr-prompt { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 16px; border-radius: 14px; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background .2s, border-color .2s; background: rgba(255,255,255,.06); border: 1px solid rgba(159,227,250,.3); color: #fff; }
.cr-prompt-radio { flex: none; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(159,227,250,.6); }
.cr-prompt-radio span { width: 8px; height: 8px; border-radius: 50%; background: #7C3AED; transition: opacity .2s; opacity: 0; }
.cr-prompt[aria-checked="true"] { background: #fff; border-color: #fff; color: #0A2A5E; }
.cr-prompt[aria-checked="true"] .cr-prompt-radio { border-color: #7C3AED; }
.cr-prompt[aria-checked="true"] .cr-prompt-radio span { opacity: 1; }
.cr-prompt:hover, .cr-prompt:focus-visible { border-color: #9FE3FA; }
.cr-canvas-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(159,227,250,.16); border: 1px solid rgba(159,227,250,.4); font-size: 13px; font-weight: 600; }
.cr-out { display: flex; flex-direction: column; gap: 8px; padding: 6px 6px 10px; border: 0; border-radius: 14px; background: #fff; color: #0B1B36; font: inherit; text-align: left; cursor: zoom-in; transition: transform .25s; }
.cr-out:hover, .cr-out:focus-visible { transform: translateY(-4px); }
.cr-out-thumb { display: block; width: 100%; aspect-ratio: 16/10; border-radius: 9px; background-color: #EAF2FD; background-size: cover; background-position: top left; }
.cr-out-label { padding: 0 4px; font-size: 13px; font-weight: 700; line-height: 1.2; }
.cr-out-check { padding: 0 4px; font-size: 11px; font-weight: 700; color: #1546A8; display: inline-flex; align-items: center; gap: 4px; }

/* ---- 09 Closing form ----------------------------------------------------- */
.cr-field { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: #0B1B36; }
.cr-input { height: 46px; padding: 0 14px; border: 1px solid #C9D6EC; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 400; outline-color: #2A6FDB; background: #fff; color: #0B1B36; width: 100%; }
.cr-textarea { padding: 12px 14px; border: 1px solid #C9D6EC; border-radius: 12px; font: inherit; font-size: 15px; resize: vertical; outline-color: #2A6FDB; background: #fff; color: #0B1B36; width: 100%; }
.cr-goal { padding: 8px 13px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s; background: #fff; color: #0B1B36; border: 1px solid #C9D6EC; }
.cr-goal[aria-pressed="true"] { background: #0A2A5E; color: #fff; border-color: #0A2A5E; }
.cr-submit { height: 50px; border: 0; border-radius: 999px; background: #7C3AED; color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; transition: background .2s, opacity .2s; }
.cr-submit:hover, .cr-submit:focus-visible { background: #5B21B6; }
.cr-submit:disabled { opacity: .6; cursor: default; }
.cr-main .cr-form-err { margin: 0; padding: 12px 14px; border-radius: 12px; background: #FDECEC; border: 1px solid #F3B4B4; color: #9B1C1C; font-size: 14px; line-height: 1.45; }
main.cr-main .cr-form-err a { color: #9B1C1C; font-weight: 700; }
.cr-turnstile { min-height: 65px; }

/* ---- Section rail -------------------------------------------------------- */
.cr-rail { position: fixed; right: clamp(12px,1.6vw,24px); top: 50%; z-index: 40; padding: 8px 6px; border-radius: 16px; background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(196,181,253,.55); box-shadow: 0 12px 30px -22px rgba(76,29,149,.35); transition: opacity .4s, transform .4s cubic-bezier(.2,.8,.2,1); opacity: 0; transform: translate3d(12px,-50%,0); pointer-events: none; font-family: Figtree, system-ui, sans-serif; }
.cr-rail.is-vis { opacity: .9; transform: translate3d(0,-50%,0); pointer-events: auto; }
.cr-rail ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0; }
.cr-rail li { display: flex; }
.cr-rail a { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 11px; line-height: 1.25; white-space: nowrap; text-decoration: none; transition: color .25s, border-color .25s, background .25s; font-weight: 500; color: #7A879F; border: 1px solid transparent; background: transparent; }
.cr-rail a:hover, .cr-rail a:focus-visible { color: #7C3AED; }
.cr-rail a[aria-current="true"] { font-weight: 700; color: #5B21B6; border-color: #C4B5FD; background: #F5F2FF; }
.cr-rail-dots { display: grid; grid-template-columns: repeat(2,3px); gap: 2px; transition: width .25s, opacity .25s; overflow: hidden; width: 0; opacity: 0; }
.cr-rail-dots span { width: 3px; height: 3px; border-radius: 50%; background: #7C3AED; }
.cr-rail a[aria-current="true"] .cr-rail-dots { width: 8px; opacity: 1; }
.cr-railm { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: none; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 999px; background: rgba(10,42,94,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); transition: opacity .4s, transform .4s; opacity: 0; pointer-events: none; font-family: Figtree, system-ui, sans-serif; }
.cr-railm.is-vis { opacity: .9; pointer-events: auto; }
.cr-railm-num { font-size: 12px; font-weight: 800; color: #9FE3FA; }
.cr-railm-cur { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-railm .cr-round { font-size: 16px; }
.cr-railm .cr-round--ghost { border-color: rgba(159,227,250,.4); }
@media (max-width: 1099px) {
  .cr-rail { display: none; }
  .cr-railm { display: flex; }
}

/* ---- Sample viewer ------------------------------------------------------- */
.cr-modal { position: fixed; inset: 0; z-index: 2000; background: linear-gradient(135deg,rgba(10,42,94,.78) 0%,rgba(46,26,110,.78) 100%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: clamp(10px,3vw,40px); font-family: Figtree, system-ui, sans-serif; color: #0B1B36; line-height: normal; }
.cr-modal p, .cr-modal ul, .cr-modal li { margin: 0; padding: 0; }
.cr-modal-box { width: min(1440px,100%); height: min(94vh,1200px); display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: #fff; }
.cr-modal-head { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid #E3EAF6; }
.cr-modal-titles { flex: 1; min-width: 0; }
.cr-modal .cr-modal-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #2A6FDB; }
.cr-modal-close { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid #C9D6EC; background: #fff; color: #0B1B36; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.cr-modal-close:hover, .cr-modal-close:focus-visible { border-color: #2A6FDB; }
.cr-modal-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 20px; border-bottom: 1px solid #E3EAF6; background: #fff; }
.cr-mtab { padding: 8px 14px; border-radius: 999px; border: 1px solid #C9D6EC; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; background: #fff; color: #0A2A5E; }
.cr-mtab[aria-pressed="true"] { background: #0A2A5E; color: #fff; }
.cr-modal-body { position: relative; flex: 1; min-height: 0; display: flex; background: #F3F7FD; }
.cr-zoom { position: absolute; right: 16px; top: 16px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 6px; border-radius: 999px; background: rgba(255,255,255,.96); border: 1px solid #D9CCF5; box-shadow: 0 14px 30px -16px rgba(124,58,237,.45); }
.cr-zoom-in { width: 32px; height: 32px; border-radius: 50%; border: 0; background: linear-gradient(135deg,#7C3AED,#2A6FDB); color: #fff; font: inherit; font-size: 18px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: 0 6px 14px -6px rgba(124,58,237,.6); }
.cr-zoom-in:hover, .cr-zoom-in:focus-visible { background: linear-gradient(135deg,#6D28D9,#1546A8); }
.cr-zoom-out { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #C4B5FD; background: #F5F0FF; color: #6D28D9; font: inherit; font-size: 18px; font-weight: 600; line-height: 1; cursor: pointer; }
.cr-zoom-out:hover, .cr-zoom-out:focus-visible { border-color: #7C3AED; background: #EDE5FF; }
.cr-zoom-range { writing-mode: vertical-lr; direction: rtl; width: 20px; height: clamp(120px,22vh,200px); margin: 0; accent-color: #7C3AED; cursor: pointer; }
.cr-zoom-pct { min-width: 40px; padding: 2px 0; border: 0; background: transparent; color: #6D28D9; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; font-variant-numeric: tabular-nums; }
.cr-mvideo { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(135deg,#0A2A5E 0%,#2E1A6E 100%); }
.cr-mvideo video { display: block; max-width: 100%; max-height: 100%; border-radius: 12px; }
.cr-myt { flex: 1; min-width: 0; display: flex; flex-direction: column; background: linear-gradient(135deg,#0A2A5E 0%,#2E1A6E 100%); }
.cr-myt-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: clamp(10px,2vw,24px); }
.cr-myt iframe { display: block; border: 0; border-radius: 12px; background: #000; max-height: 100%; }
.cr-mnav { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 0 16px 16px; }
.cr-mcount { min-width: 64px; text-align: center; font-size: 14px; font-weight: 700; color: #44506A; }
.cr-myt .cr-mcount { color: #C7D7F0; }
main.cr-main .cr-ytlink, .cr-modal .cr-ytlink { margin-left: 8px; font-size: 13px; font-weight: 700; color: #9FE3FA; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; white-space: nowrap; }
.cr-mdoc { flex: 1; min-width: 0; overflow: auto; padding: clamp(12px,3vw,32px); }
.cr-mdoc img { display: block; margin: 0 auto; border-radius: 12px; background: #fff; max-width: none; }
.cr-mdeck { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cr-mdeck-scroll { flex: 1; min-height: 0; overflow: auto; padding: clamp(8px,1.5vw,20px); }
.cr-mdeck-scroll img { display: block; height: auto; margin: 0 auto; border-radius: 10px; background: #fff; box-shadow: 0 10px 30px -18px rgba(10,42,94,.4); max-width: none; }
.cr-mx { flex: 1; min-width: 0; overflow: auto; padding: clamp(24px,4vw,56px); background: radial-gradient(ellipse 70% 60% at 100% 0%,rgba(124,58,237,.12),transparent 70%), radial-gradient(ellipse 60% 50% at 0% 100%,rgba(42,111,219,.10),transparent 70%), #F6F4FD; }
.cr-mx-inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; }
.cr-mx-icon { width: 56px; height: 56px; border-radius: 16px; background: #fff; border: 1px solid #D6E2F5; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.cr-modal .cr-mx-lead { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(32px,3.6vw,46px); line-height: 1.05; color: #2E1A6E; text-wrap: balance; }
.cr-modal .cr-mx-copy { margin: 20px 0 0; font-size: 17px; line-height: 1.6; color: #44506A; text-wrap: pretty; }
.cr-modal .cr-mx-pts { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; width: 100%; }
.cr-modal .cr-mx-pts li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid #E4DCF7; font-size: 15px; line-height: 1.45; }
.cr-mx-pts .cr-ico { color: #7C3AED; margin-top: 2px; }
.cr-modal .cr-talk { margin-top: 28px; display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; background: #F78A2F; color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; transition: background .2s; }
.cr-modal .cr-talk:hover, .cr-modal .cr-talk:focus-visible { background: #E5731A; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  main.cr-main *, .cr-rail, .cr-rail *, .cr-railm, .cr-modal * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- Hover states (data-hv) — generated from the design's style-hover
   attributes; keep in step with the markup. ---------------------------------- */
/* @hover-rules */
[data-hv="1"]:hover, [data-hv="1"]:focus-visible { transform:translateY(-2px) !important; box-shadow:0 18px 36px -12px rgba(15,10,60,.7) !important; color:#4C1D95 !important; }
[data-hv="2"]:hover, [data-hv="2"]:focus-visible { background:#2A6FDB !important; color:#fff !important; }
[data-hv="3"]:hover, [data-hv="3"]:focus-visible { background:rgba(255,255,255,.12) !important; }
[data-hv="4"]:hover, [data-hv="4"]:focus-visible { background:#9FE3FA !important; }

/* `hidden` must win over this page's inline and class `display` values (the strategist
   demo, the team panels and the form are all toggled with it); the UA rule alone loses. */
main [hidden], .cr-modal[hidden], .cr-modal [hidden] { display: none !important; }