/* Leverage Lens — Slate design system (homepage redesign, July 2026).
   Report + loading views remapped onto the original variable names so every
   existing component picks up the Slate palette without structural changes.
   Slate: bg #f5f6f8, ink #191c24, muted #5a6070, border #e4e7ee,
   accent #4b56d6 → #6f7bf0 gradient, chip #e8eaff. Type: Inter. */
:root {
  --tw-blue: #191c24;       /* ink */
  --tw-blue-deep: #14161d;  /* dark surfaces: loader, prompt blocks */
  --sky: #e3e7ff;           /* light text on dark surfaces */
  --aqua: #aab3ff;          /* accent on dark surfaces */
  --sand: #f5f6f8;          /* page background */
  --white: #ffffff;
  --grey: #5a6070;
  --light-grey: #eef0f5;
  --coral: #ff5c5e;
  --sunset: #ff835e;
  --glacier: #6f7bf0;
  --seafoam: #e8eaff;
  --seaweed: #4b56d6;       /* primary accent */
  --line: #e4e7ee;
  --radius: 14px;
  --font: "Inter", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-weight: 500; /* Inter Medium — body copy */
  letter-spacing: -0.025em; /* body tracking -2.5% */
  line-height: 1.2; /* leading 120% */
  background: var(--sand);
  color: var(--tw-blue);
  -webkit-font-smoothing: antialiased;
}
p, li { line-height: 1.5; } /* readable web adaptation for long copy */
h1, h2, h3 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; } /* Inter Bold, -3%, 115% */
.grain { display: none; }
.view { display: none; position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; padding: 28px 24px 80px; }
.view--active { display: block; }

/* ---------- masthead ---------- */
.masthead { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 40px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: -0.03em; font-size: 16px; color: var(--tw-blue); }
.brand__logo { height: 26px; width: auto; display: block; } /* official lockup, extracted from brand guidelines */
.brand__divider { width: 1px; height: 22px; background: var(--line); flex: 0 0 auto; }
.brand__app { white-space: nowrap; }
.brand__by { white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--grey); letter-spacing: 0; align-self: center; margin-top: 2px; }
.masthead__note { font-size: 12px; color: var(--grey); border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px; background: #ffffff88; }

/* ---------- hero ---------- */
.hero { padding: 30px 0 26px; max-width: 800px; }
.hero__kicker { font-size: 12.5px; font-weight: 700; color: var(--seaweed); margin-bottom: 14px; letter-spacing: -0.01em; }
.hero__title { font-size: clamp(38px, 6vw, 64px); }
.hero__title em { font-style: italic; color: var(--seaweed); }
.hero__sub { margin: 20px 0 34px; font-size: 17px; color: #3d5a6e; max-width: 620px; }
.hero__privacy { margin-top: 18px; font-size: 12.5px; color: var(--grey); max-width: 620px; }

.paths { display: grid; gap: 12px; max-width: 620px; }
.path {
  display: flex; align-items: center; gap: 16px; text-align: left; width: 100%;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; cursor: pointer; font-family: inherit; font-size: inherit; color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.path:hover { transform: translateY(-2px); box-shadow: 0 10px 28px #03385518; border-color: var(--tw-blue); }
.path:focus-visible { outline: 3px solid var(--glacier); border-color: var(--tw-blue); }
.path__icon {
  flex: 0 0 44px; height: 44px; display: grid; place-items: center;
  background: var(--tw-blue); color: var(--sky); font-weight: 700; font-size: 18px; border-radius: 10px;
}
.path__body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.path__title { font-weight: 700; letter-spacing: -0.02em; }
.path__desc { font-size: 13px; color: var(--grey); }
.path__badge { font-size: 11px; font-weight: 700; color: var(--tw-blue); background: var(--light-grey); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.path--ghost { background: transparent; }
.path--disabled { opacity: 0.55; cursor: not-allowed; }
.path--disabled:hover { transform: none; box-shadow: none; border-color: var(--line); }

.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 64px; border-top: 1px solid var(--line); padding-top: 34px; }
.how__step span { font-size: 12px; font-weight: 700; color: var(--seaweed); letter-spacing: 0.1em; }
.how__step h3 { font-size: 21px; margin: 6px 0 4px; }
.how__step p { font-size: 14px; color: var(--grey); }

/* ==========================================================
   PRELOADER — Moby "Thinking…" state: the spout becomes a
   loading wave. Sky whale on Triple Whale Blue, subtle gradient
   (text-safe), sonar rings, bubbles, blinking eye.
   ========================================================== */
.view--dark {
  max-width: none; min-height: 100vh; margin: 0; place-items: center;
  background:
    radial-gradient(1200px 500px at 50% 115%, rgba(170, 179, 255, 0.28), transparent 60%),
    linear-gradient(180deg, var(--tw-blue-deep) 0%, var(--tw-blue) 55%, #05496d 100%);
  color: var(--sky);
  overflow: hidden;
}
/* display is owned by the view-switching rule — .view--dark must NEVER force
   itself visible (this previously kept the loader on screen above the report) */
.view--dark.view--active { display: grid; }
.loader { text-align: center; padding: 60px 24px; position: relative; width: min(560px, 92vw); }

.loader__scene { position: relative; height: 230px; margin: 0 auto 10px; width: 320px; }

/* sonar rings */
.sonar { position: absolute; left: 50%; top: 58%; width: 12px; height: 12px; margin: -6px; border-radius: 50%;
  border: 2px solid rgba(170, 179, 255, 0.7); animation: sonar 3.2s ease-out infinite; }
.sonar:nth-child(2) { animation-delay: 1.05s; }
.sonar:nth-child(3) { animation-delay: 2.1s; }
@keyframes sonar {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(24); opacity: 0; }
}

/* Moby — official symbol from the brand guidelines, gently bobbing */
.loader__moby { position: absolute; left: 50%; bottom: 14px; width: 150px; transform: translateX(-50%); animation: bob 3.4s ease-in-out infinite; filter: drop-shadow(0 10px 24px rgba(170, 179, 255, 0.22)); }
@keyframes bob {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  50% { transform: translateX(-50%) translateY(-9px) rotate(-1.2deg); }
}

/* bubbles */
.bubble { position: absolute; bottom: 34px; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(227, 231, 255, 0.5); animation: rise 4.4s ease-in infinite; }
.bubble:nth-child(odd) { width: 5px; height: 5px; }
.b1 { left: 24%; animation-delay: 0s; }
.b2 { left: 34%; animation-delay: 1.4s; }
.b3 { left: 66%; animation-delay: 0.7s; }
.b4 { left: 76%; animation-delay: 2.2s; }
.b5 { left: 55%; animation-delay: 3.1s; }
@keyframes rise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: 0.9; }
  100% { transform: translateY(-190px) translateX(10px); opacity: 0; }
}

.loader h2 { font-size: 30px; color: var(--white); }
.loader > p { color: var(--sky); margin-top: 8px; font-size: 15px; opacity: 0.85; }
.loader__caption { margin-top: 20px; min-height: 22px; font-size: 14px; font-weight: 600; color: var(--aqua); transition: opacity 0.35s ease; }
.loader__caption.is-fading { opacity: 0; }

.loader__steps { list-style: none; margin: 26px auto 0; max-width: 300px; text-align: left; }
.loader__steps li { padding: 7px 0 7px 30px; position: relative; color: rgba(227, 231, 255, 0.55); font-size: 14px; transition: color 0.3s ease; }
.loader__steps li::before {
  content: ""; position: absolute; left: 4px; top: 50%; width: 9px; height: 9px; margin-top: -5px;
  border-radius: 50%; border: 2px solid rgba(227, 231, 255, 0.35); transition: all 0.3s ease;
}
.loader__steps li.active { color: var(--white); font-weight: 600; }
.loader__steps li.active::before { border-color: var(--aqua); background: var(--aqua); box-shadow: 0 0 0 0 rgba(170, 179, 255, 0.6); animation: pulse 1.4s ease-out infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 12px rgba(170, 179, 255, 0); } }
.loader__steps li.done { color: rgba(227, 231, 255, 0.85); }
.loader__steps li.done::before { border-color: var(--aqua); background: var(--aqua); }

.loader__bar { margin: 26px auto 0; width: min(300px, 80%); height: 4px; border-radius: 999px; background: rgba(227, 231, 255, 0.18); overflow: hidden; }
.loader__bar i { display: block; height: 100%; width: 40%; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--sky), var(--aqua), transparent);
  animation: sweep 1.5s ease-in-out infinite; }
@keyframes sweep {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}

.loader__timer { margin-top: 14px; font-size: 12.5px; color: rgba(227, 231, 255, 0.65); }
.loader__timer span { font-weight: 700; color: var(--sky); font-variant-numeric: tabular-nums; }

/* ---------- report ---------- */
.btn-restart { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-family: inherit; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--tw-blue); }
.btn-restart:hover { border-color: var(--tw-blue); background: var(--white); }

.report-hero { padding: 8px 0 34px; border-bottom: 1px solid var(--line); }

/* identity card — who this report is for (employer + role looked up by Moby) */
.idcard { display: inline-flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 20px 12px 12px; margin-bottom: 20px; box-shadow: 0 6px 18px #0338550c; }
.idcard__logo { width: 46px; height: 46px; border-radius: 10px; object-fit: contain; background: var(--white); border: 1px solid var(--light-grey); padding: 5px; flex: 0 0 46px; }
.idcard__logo--initial { display: grid; place-items: center; background: var(--tw-blue); color: var(--sky); font-weight: 700; font-size: 20px; border: none; padding: 0; }
.idcard__avatarwrap { position: relative; flex: 0 0 46px; width: 46px; height: 46px; }
.idcard__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--sky); display: block; }
.idcard__logobadge { position: absolute; right: -5px; bottom: -5px; width: 22px; height: 22px; border-radius: 6px; object-fit: contain; background: var(--white); border: 1px solid var(--light-grey); padding: 2px; box-shadow: 0 2px 6px #03385518; }
.idcard__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.idcard__body b { font-size: 15px; letter-spacing: -0.02em; }
.idcard__role { font-size: 13px; font-weight: 600; color: #3d5a6e; }
.idcard__role--pending { color: var(--grey); animation: writing 1.2s ease-in-out infinite; }
.idcard__note { font-size: 11px; color: var(--grey); margin-top: 2px; }
.report-hero__kicker { font-size: 12.5px; font-weight: 700; color: var(--seaweed); margin-bottom: 12px; }
.report-hero h1 { font-size: clamp(30px, 4.6vw, 46px); max-width: 820px; }
.report-hero__summary { margin-top: 16px; color: #3d5a6e; max-width: 700px; font-size: 15.5px; }
.report-hero__meta { margin-top: 14px; font-size: 12px; color: var(--grey); display: flex; gap: 10px; flex-wrap: wrap; }
.report-hero__meta span { border: 1px solid var(--line); background: #ffffff88; border-radius: 999px; padding: 4px 12px; }

.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 34px 0; }
.stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.stat b { display: block; font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.stat small { color: var(--grey); font-size: 12.5px; display: block; margin-top: 6px; }

.section-title { font-size: 25px; margin: 44px 0 6px; }
.section-sub { color: var(--grey); font-size: 14px; margin-bottom: 20px; }

/* charts use the secondary palette, sparingly, never overpowering primary */
.bars { display: grid; gap: 10px; margin-bottom: 8px; }
.bar { display: grid; grid-template-columns: 170px 1fr 70px; align-items: center; gap: 12px; font-size: 14px; }
.section-sub--hint { margin-top: -14px; font-size: 12.5px; color: var(--seaweed); font-weight: 600; }
/* clickable category rows — expand to inspect the meetings inside */
.bar--btn { background: none; border: 0; padding: 6px 8px; margin: -6px -8px; font: inherit; color: inherit; text-align: left; width: calc(100% + 16px); cursor: pointer; border-radius: 8px; transition: background 0.15s ease; }
.bar--btn:hover { background: #ffffffb8; }
.bar--btn:focus-visible { outline: 3px solid var(--glacier); }
.bar__name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bar__chev { font-style: normal; color: var(--grey); font-size: 11px; flex: 0 0 auto; transition: transform 0.15s ease; }
.bar--btn.is-open .bar__chev { transform: rotate(90deg); }
.bar-detail { margin: 6px 0 12px; padding: 12px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.mtgs { list-style: none; display: grid; gap: 7px; max-height: 280px; overflow: auto; }
.mtg { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 13px; border-bottom: 1px dashed var(--light-grey); padding-bottom: 7px; }
.mtg:last-child { border-bottom: 0; padding-bottom: 0; }
.mtg__title { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.mtg__meta { color: var(--grey); white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 12px; }
.bar__track { background: var(--light-grey); border-radius: 6px; height: 22px; overflow: hidden; }
.bar__fill { height: 100%; background: var(--tw-blue); border-radius: 6px; min-width: 3px; transition: width 0.6s ease; }
.bar:nth-child(5n+2) .bar__fill { background: var(--glacier); }
.bar:nth-child(5n+3) .bar__fill { background: var(--seaweed); }
.bar:nth-child(5n+4) .bar__fill { background: var(--sunset); }
.bar:nth-child(5n) .bar__fill { background: var(--coral); }
.bar__val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.obs { display: grid; gap: 10px; margin-bottom: 10px; }
.obs li { list-style: none; background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--seaweed); border-radius: 10px; padding: 12px 16px; font-size: 14.5px; }

.plays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: stretch; }
.play { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 16px; position: relative; transition: box-shadow .15s ease, transform .15s ease; }
.play:hover { box-shadow: 0 12px 32px #03385514; transform: translateY(-2px); }
.play__head { display: flex; flex-direction: column; gap: 6px; }
.play__title { font-size: 15.5px; }
.play__num { color: var(--seaweed); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.play__meta { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 9px; background: #f4f5f8; color: #5a6577; border: 1px solid #e3e6ee; }
.chip--save { background: #e8eaff; color: var(--seaweed); }
.chip--effort-low { background: #e3f3ff; color: #085f96; }
.chip--effort-medium { background: #ffece0; color: #b04a1e; }
.chip--effort-high { background: #ffe7e7; color: #b3372f; }
.chip--approach-replace { background: #eef3f9; color: #2a5b86; border-color: #d9e4f0; }
.chip--approach-improve { background: var(--light-grey); color: #40566b; }
.chip--approach-beyond { background: #eef0fd; color: #434ec9; border-color: #dfe3fa; }
.chip--value { background: #efe6ff; color: #5b2ea6; text-transform: capitalize; }
.chip--conf-high { background: #e8eaff; color: var(--seaweed); }
.chip--conf-medium { background: #fff4d6; color: #8a6d1a; }
.chip--conf-low { background: #f1f1f1; color: var(--grey); }
.obs__evidence { display: block; margin-top: 6px; font-size: 12px; color: var(--grey); }
.play__impact { background: #f0f1fb; border: 1px solid #dfe2f5; border-radius: 10px; padding: 8px 12px; margin-bottom: 9px; }
.play__impact p { font-size: 12.5px; margin: 2px 0; color: var(--tw-blue); }
.play__impact b { color: var(--seaweed); }
.play__prompt-actions { display: inline-flex; gap: 8px; align-items: center; }
.moby-btn { background: var(--aqua); color: var(--tw-blue); border: 1px solid var(--aqua); border-radius: 999px; padding: 5px 14px; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: filter 0.15s ease; }
.moby-btn:hover { filter: brightness(1.08); }
.play__why { margin: 7px 0 9px; color: #3d5a6e; font-size: 13px; }
.play__recipe { margin: 0 0 9px 17px; font-size: 12.5px; display: grid; gap: 3px; }
.play__tools { font-size: 12px; color: var(--grey); margin-bottom: 12px; }
.play__tools b { color: var(--tw-blue); }

/* drop-in prompt block — dark surface, Sky text on TW Blue (approved combo) */
.play__prompt { margin-top: auto; background: var(--tw-blue); border-radius: 12px; overflow: hidden; }
.play__prompt-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid rgba(227, 231, 255, 0.15); }
.play__prompt-head span { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aqua); }
.copy-btn { background: rgba(227, 231, 255, 0.12); color: var(--sky); border: 1px solid rgba(227, 231, 255, 0.3); border-radius: 999px; padding: 5px 14px; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background 0.15s ease; }
.copy-btn:hover { background: rgba(227, 231, 255, 0.22); }
.copy-btn.is-copied { background: var(--aqua); color: var(--tw-blue); border-color: var(--aqua); }
.play__prompt pre { padding: 12px 14px 14px; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 12.5px; line-height: 1.5; color: var(--sky); max-height: 200px; overflow: auto; }

/* empty prompt state: generate on demand */
.play__prompt--empty { background: transparent; border: 1.5px dashed var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; overflow: visible; }
.gen-btn { background: var(--tw-blue); color: var(--sky); border: none; border-radius: 999px; padding: 9px 18px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.15s ease, opacity 0.15s ease; }
.gen-btn:hover { background: var(--tw-blue-deep); }
.gen-btn:disabled { cursor: default; opacity: 0.75; }
.gen-btn.is-writing { animation: writing 1.2s ease-in-out infinite; }
@keyframes writing { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
.gen-hint { font-size: 11.5px; color: var(--grey); }

/* CTA — subtle gradient (Sky 50% → TW Blue), only on a TW Blue base, with a whale-tail notch */
.report-cta { margin-top: 56px; position: relative; background: linear-gradient(135deg, #4b56d6, #6f7bf0); color: #fff; border-radius: var(--radius); padding: 30px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.report-cta::before { content: ""; position: absolute; top: -12px; left: 56px; border-left: 13px solid transparent; border-right: 13px solid transparent; border-bottom: 13px solid var(--tw-blue); }
.report-cta h3 { font-size: 23px; color: var(--white); }
.report-cta p { font-size: 14px; opacity: 0.8; margin-top: 4px; }
.report-cta button { background: var(--sky); color: var(--tw-blue); border: none; border-radius: 999px; padding: 12px 22px; font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.report-cta button:hover { background: var(--aqua); }

.src-note { margin-top: 18px; font-size: 12px; color: var(--grey); }

.foot { position: relative; z-index: 1; text-align: center; padding: 26px; font-size: 12px; color: var(--grey); border-top: 1px solid var(--line); }

.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: var(--tw-blue); color: var(--sky); border-radius: 10px; padding: 12px 20px; font-size: 14px; z-index: 50; box-shadow: 0 12px 30px #0005; }

@media (max-width: 720px) {
  .how { grid-template-columns: 1fr; gap: 24px; }
  .bar { grid-template-columns: 110px 1fr 56px; font-size: 12.5px; }
  .mtg { flex-direction: column; gap: 2px; }
  .mtg__meta { white-space: normal; }
  .masthead__note { display: none; }
  .loader__scene { transform: scale(0.85); }
}
@media (max-width: 1000px) {
  .plays { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .plays { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ==========================================================
   LANDING PAGE — problem-first conversion layout
   ========================================================== */
.lhero { position: relative; margin-top: 6px; overflow: hidden; border-radius: 22px; color: var(--sky); padding: 58px 54px 54px;
  background:
    radial-gradient(900px 420px at 88% 118%, rgba(199, 255, 255, 0.26), transparent 60%),
    linear-gradient(160deg, var(--tw-blue-deep) 0%, var(--tw-blue) 60%, #05496d 100%); }
.lhero__inner { max-width: 660px; position: relative; z-index: 1; }
.lhero__kicker { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aqua); margin-bottom: 16px; }
.lhero__title { font-size: clamp(36px, 5.4vw, 58px); color: var(--white); }
.lhero__title em { font-style: italic; color: var(--aqua); }
.lhero__sub { margin: 20px 0 30px; font-size: 16.5px; line-height: 1.55; color: #d9f6ff; max-width: 610px; }
.lhero__sub b { color: var(--white); }
.cta-main { display: inline-flex; align-items: center; gap: 12px; background: var(--aqua); color: var(--tw-blue); border: none; border-radius: 999px; padding: 16px 26px; font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; cursor: pointer; box-shadow: 0 14px 34px rgba(153, 255, 255, 0.25); transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; text-align: left; }
.cta-main:hover { transform: translateY(-2px); background: var(--sky); box-shadow: 0 18px 40px rgba(153, 255, 255, 0.35); }
.cta-main.path--disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.cta-main__g { display: grid; place-items: center; width: 28px; height: 28px; background: var(--white); border-radius: 50%; font-weight: 800; font-size: 15px; color: #4285f4; flex: 0 0 28px; }
.cta-main__badge { background: rgba(3, 56, 85, 0.14); color: var(--tw-blue); }
.lhero__alt { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.alt-link { background: none; border: none; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--sky); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.alt-link:hover { color: var(--aqua); }
.lhero__dot { color: rgba(199, 255, 255, 0.5); }
.lhero__trust { margin-top: 22px; font-size: 12.5px; color: rgba(199, 255, 255, 0.75); }
.lhero__moby { position: absolute; right: 34px; bottom: -10px; width: 200px; opacity: 0.92; animation: bob 4s ease-in-out infinite; pointer-events: none; filter: drop-shadow(0 10px 24px rgba(153, 255, 255, 0.16)); }

.proofband { text-align: center; padding: 28px 10px 4px; font-size: 14px; color: #3d5a6e; }
.proofband img { height: 20px; vertical-align: -4px; margin: 0 3px; }
.proofband b { color: var(--tw-blue); }

.pain { margin-top: 44px; }
.pain__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.pain__card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.pain__card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px #03385512; }
.pain__card span { font-size: 26px; }
.pain__card h3 { font-size: 17px; margin: 10px 0 6px; }
.pain__card p { font-size: 13.5px; color: #3d5a6e; }

.solution { margin-top: 56px; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 34px; align-items: center; }
.solution__copy > p { color: #3d5a6e; font-size: 15px; margin-top: 6px; }
.solution__list { list-style: none; display: grid; gap: 12px; margin: 16px 0 22px; }
.solution__list li { background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--seaweed); border-radius: 10px; padding: 12px 16px; font-size: 14px; }
.cta-secondary { background: var(--tw-blue); color: var(--sky); border: none; border-radius: 999px; padding: 12px 22px; font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transition: background 0.15s ease; }
.cta-secondary:hover { background: var(--tw-blue-deep); }
.solution__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.quotes { margin-top: 56px; }
.quotes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.quote { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.quote p { font-size: 14px; line-height: 1.55; }
.quote p::before { content: "\201C"; color: var(--seaweed); font-size: 26px; line-height: 0; vertical-align: -8px; margin-right: 2px; font-weight: 700; }
.quote footer { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.quote__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--tw-blue); color: var(--sky); display: grid; place-items: center; font-size: 13px; font-weight: 700; flex: 0 0 34px; }
.quote__who b { display: block; font-size: 13px; }
.quote__who small { color: var(--grey); font-size: 11.5px; }

.finalcta { margin-top: 60px; text-align: center; background: var(--tw-blue); background-image: linear-gradient(150deg, rgba(199, 255, 255, 0.3) 0%, rgba(3, 56, 85, 0) 46%); color: var(--sky); border-radius: var(--radius); padding: 46px 26px 38px; }
.finalcta h2 { color: var(--white); font-size: clamp(24px, 3.4vw, 34px); }
.finalcta > p { margin: 8px 0 22px; opacity: 0.85; font-size: 14px; }
.fineprint { margin-top: 20px; font-size: 11.5px; line-height: 1.5; color: rgba(199, 255, 255, 0.6); max-width: 640px; margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
  .lhero { padding: 44px 26px; }
  .lhero__moby { display: none; }
  .solution { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .pain__grid, .quotes__grid { grid-template-columns: 1fr; }
  .cta-main { font-size: 14.5px; padding: 14px 20px; }
}

/* Loud, unmissable fallback notice when the report came from the pattern engine */
.fallback-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 4px; padding: 14px 18px; border: 1px solid #e8b93c; background: #fff7e0; border-radius: 12px; font-size: 14px; line-height: 1.45; }
.fallback-banner b { color: #7a5a00; }
.fallback-banner button { flex-shrink: 0; background: var(--seaweed, #033855); color: #fff; border: 0; border-radius: 8px; padding: 10px 16px; font-weight: 700; font-size: 14px; cursor: pointer; }
.fallback-banner__diag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: #7a5b00; margin-top: 8px; word-break: break-all; line-height: 1.5; }
.fallback-banner button:hover { opacity: .9; }
@media (max-width: 680px) {
  .fallback-banner { flex-direction: column; align-items: stretch; text-align: left; }
}

/* ==========================================================
   REPORT v25 — hero masthead + left-nav dossier layout
   ========================================================== */
#report.view { max-width: 1200px; }
.rhero { position: relative; overflow: hidden; border-radius: 22px; color: #fff;
  padding: clamp(28px, 4vw, 46px) clamp(24px, 4vw, 52px) clamp(26px, 3.6vw, 42px);
  background: radial-gradient(900px 420px at 92% -20%, rgba(220, 228, 255, 0.35), transparent 60%), linear-gradient(135deg, #4b56d6, #6f7bf0); }
.rhero__top { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: clamp(18px, 3vw, 28px); }
.rhero__kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.rhero__twlogo { height: 26px; width: auto; display: block; filter: brightness(0) invert(1); opacity: 0.95; }
.rhero__title { font-size: clamp(42px, 6.4vw, 74px); font-weight: 800; letter-spacing: -0.035em; color: #fff; line-height: 0.98; }
.rhero__pf { margin: 24px 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.rhero__headline { margin-top: 18px; font-size: clamp(15.5px, 1.6vw, 18px); color: rgba(255, 255, 255, 0.95); max-width: 720px; font-weight: 600; line-height: 1.45; }
/* identity card sits on the gradient — translucent glass treatment */
.rhero .idcard { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); box-shadow: none; margin-bottom: 0; backdrop-filter: blur(6px); }
.rhero .idcard__body b { color: #fff; font-size: 16px; }
.rhero .idcard__role { color: rgba(255, 255, 255, 0.92); }
.rhero .idcard__role--pending { color: rgba(255, 255, 255, 0.75); }
.rhero .idcard__note { color: rgba(255, 255, 255, 0.62); }
.rhero .idcard__avatar { border-color: rgba(255, 255, 255, 0.7); width: 52px; height: 52px; }
.rhero .idcard__avatarwrap { flex: 0 0 52px; width: 52px; height: 52px; }
.rhero .idcard__logo--initial { background: #191c24; color: #fff; }

.rlayout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; margin-top: 26px; }
.rnav { position: sticky; top: 18px; }
.rnav ul { list-style: none; display: grid; gap: 4px; }
.rnav__btn { width: 100%; text-align: left; background: none; border: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--grey); padding: 10px 14px; border-radius: 10px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rnav__btn:hover { background: var(--white); color: var(--tw-blue); }
.rnav__btn.is-active { background: var(--tw-blue); color: #fff; }
.rnav__btn:focus-visible { outline: 3px solid var(--glacier); }
.rnav__count { font-size: 11px; font-weight: 700; background: var(--seafoam); color: var(--seaweed); border-radius: 999px; padding: 2px 8px; }
.rnav__btn.is-active .rnav__count { background: rgba(255, 255, 255, 0.22); color: #fff; }
.rpanel { display: none; }
.rpanel--active { display: block; animation: panelin 0.25s ease; }
@keyframes panelin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rpanel .section-title:first-child { margin-top: 6px; }
.rsummary { font-size: 16px; color: #3d5a6e; max-width: 70ch; margin-top: 4px; line-height: 1.6; }
.rpanel .statgrid { margin: 26px 0 10px; }
.rpanel .report-cta { margin-top: 40px; }

.rtop3 { display: grid; gap: 10px; }
.rtop3__card { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; font: inherit; color: inherit; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.rtop3__card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px #03385514; }
.rtop3__num { flex: 0 0 38px; height: 38px; display: grid; place-items: center; background: var(--seafoam); color: var(--seaweed); font-weight: 800; font-size: 17px; border-radius: 10px; }
.rtop3__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rtop3__body b { font-size: 15px; letter-spacing: -0.02em; }
.rtop3__body small { font-size: 12.5px; color: var(--grey); }
.rtop3__go { margin-left: auto; color: var(--seaweed); font-weight: 700; }

/* plays — two-up, bolder, squarer */
.plays--v2 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.plays--v2 .play { padding: 24px; border-radius: 18px; }
.play__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.play__bignum { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--seafoam); -webkit-text-stroke: 1.4px var(--seaweed); }
.plays--v2 .play__meta { justify-content: flex-end; }
.plays--v2 .play__title { font-size: 19px; letter-spacing: -0.02em; line-height: 1.25; }
.plays--v2 .play__why { font-size: 13.5px; margin: 9px 0 11px; }
.plays--v2 .play__recipe { font-size: 13px; gap: 5px; margin-bottom: 12px; }

.rnext { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rnext__card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.rnext__card h3 { font-size: 18px; }
.rnext__card p { font-size: 14px; color: #3d5a6e; }
.rnext__acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.rnext__btn { display: inline-block; background: var(--tw-blue); color: var(--sky); border: 1px solid var(--tw-blue); border-radius: 999px; padding: 11px 20px; font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; text-decoration: none; transition: background 0.15s ease; }
.rnext__btn:hover { background: var(--tw-blue-deep); }
.rnext__btn--ghost { background: transparent; color: var(--tw-blue); }
.rnext__btn--ghost:hover { background: var(--light-grey); }
.rshare { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 940px) {
  .rlayout { grid-template-columns: 1fr; }
  .rnav { position: sticky; top: 0; z-index: 5; background: var(--sand); padding: 8px 0; margin: 0 -4px; }
  .rnav ul { display: flex; overflow-x: auto; gap: 6px; padding: 0 4px; }
  .rnav__btn { white-space: nowrap; border: 1px solid var(--line); background: var(--white); border-radius: 999px; padding: 8px 14px; font-size: 13px; width: auto; }
  .plays--v2 { grid-template-columns: 1fr; }
  .rnext { grid-template-columns: 1fr; }
  .rhero__twlogo { height: 20px; }
}

/* ===== v26: dossier profile, share chooser, demo modal, contacts ===== */
.rprofile { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 26px; }
.rprofile p { font-size: 15px; line-height: 1.65; color: var(--tw-blue); margin: 0 0 14px; }
.rprofile p:last-child { margin-bottom: 0; }
.rprofile p::first-letter { font-weight: 700; }

.rshare-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0 8px; }
.rshare-card { position: relative; overflow: hidden; border: 2px solid transparent; border-radius: 16px; min-height: 168px; padding: 20px 22px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px; text-align: left; cursor: pointer; color: var(--sky); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.rshare-card--plan { background: radial-gradient(120% 130% at 85% 0%, #4b56d6cc, transparent 55%), linear-gradient(140deg, #191c24, #232948); }
.rshare-card--tool { background: radial-gradient(120% 130% at 85% 0%, #6f7bf0aa, transparent 55%), linear-gradient(140deg, #14161d, #1d3742); }
.rshare-card__art { position: absolute; right: -14px; top: -12px; opacity: .18; color: #fff; }
.rshare-card__art svg { width: 136px; height: 136px; }
.rshare-card__t { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.rshare-card__s { font-size: 13.5px; color: var(--sky); opacity: .8; }
.rshare-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px #03385526; }
.rshare-card:focus-visible { outline: 3px solid var(--glacier); }
.rshare-card.is-picked { border-color: var(--seaweed); box-shadow: 0 0 0 3px #4b56d62e, 0 12px 30px #03385526; }
.rshare-card.is-picked::after { content: "✓"; position: absolute; top: 12px; right: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--seaweed); color: #fff; font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

.rshare-channels { margin-top: 14px; }
.rshare-channels__label { font-size: 14px; color: var(--grey); margin: 0 0 10px; }
.rshare-channels__label b { color: var(--tw-blue); }
.rshare .share-btn { display: inline-flex; align-items: center; gap: 8px; }
.rshare .share-btn svg { flex: 0 0 auto; }

.rnext__contact { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; }
.rnext__contact a { display: inline-flex; align-items: center; gap: 7px; color: var(--tw-blue); text-decoration: none; opacity: .85; }
.rnext__contact a:hover { opacity: 1; text-decoration: underline; }

.demodal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; }
.demodal[hidden] { display: none; }
.demodal__backdrop { position: absolute; inset: 0; background: #14161daa; backdrop-filter: blur(3px); cursor: pointer; }
.demodal__box { position: relative; width: min(560px, 92vw); max-height: 86vh; overflow: auto; background: var(--white); color: var(--tw-blue); border-radius: 16px; padding: 26px 28px; box-shadow: 0 28px 80px #03102a66; }
.demodal__box h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 0 40px 6px 0; }
.demodal__x { position: absolute; top: 12px; right: 16px; font-size: 26px; line-height: 1; background: none; border: 0; cursor: pointer; color: var(--grey); }
.demodal__x:hover { color: var(--tw-blue); }
.demodal__slot { border: 2px dashed var(--line); border-radius: 12px; padding: 30px 22px; text-align: center; margin: 16px 0; color: var(--grey); background: var(--sand); }
.demodal__slot p { margin: 0 0 6px; font-size: 14px; }
.demodal__slot b { color: var(--tw-blue); }
.demodal__alt { font-size: 14px; color: var(--grey); margin: 0; }
.demodal__alt a { color: var(--seaweed); }

@media (max-width: 720px) {
  .rshare-pick { grid-template-columns: 1fr; }
  .rshare-card { min-height: 130px; }
}


/* ===== v27: email-first confirmation view + delivery modal ===== */
#done{background:#14161d;color:#eef0f7;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 20px;font-family:Inter,system-ui,sans-serif}
.donewrap{max-width:860px;width:100%;text-align:center}
.done__check{width:64px;height:64px;margin:0 auto 22px;border-radius:50%;background:linear-gradient(135deg,#4b56d6,#6f7bf0);color:#fff;font-size:30px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 40px rgba(75,86,214,.45)}
.done__title{font-size:clamp(28px,4.5vw,42px);font-weight:800;margin:0 0 12px;color:#fff}
.done__sub{font-size:17px;line-height:1.6;color:#b9c0d4;max-width:640px;margin:0 auto 20px}
.done__pill{display:inline-block;background:rgba(111,123,240,.14);border:1px solid rgba(111,123,240,.4);color:#c9d0ff;border-radius:999px;padding:10px 22px;font-size:14.5px;margin-bottom:18px}
.done__pill b{color:#fff}
.done__wait{font-size:14.5px;line-height:1.6;color:#9aa1b8;max-width:600px;margin:0 auto 34px}
.done__wait b{color:#d7dbea}
.done__cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:left;margin-bottom:26px}
@media(max-width:720px){.done__cards{grid-template-columns:1fr}}
.done__card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:24px}
.done__card h3{margin:0 0 8px;font-size:16.5px;color:#fff}
.done__card p{margin:0 0 16px;font-size:14px;line-height:1.55;color:#a6adc4}
.done__btn{font-family:inherit;cursor:pointer;border:none;background:#eef0f7;color:#191c24;font-weight:700;font-size:14px;border-radius:10px;padding:11px 18px}
.done__btn:hover{background:#fff}
.done__btn--ghost{background:rgba(255,255,255,.08);color:#e6e9f5;border:1px solid rgba(255,255,255,.16);font-weight:600}
.done__btn--ghost:hover{background:rgba(255,255,255,.15)}
.done__share{display:flex;flex-wrap:wrap;gap:9px}
.done__fine{font-size:12px;color:#6d7389;max-width:640px;margin:0 auto;line-height:1.6}
.dlvmodal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.dlvmodal[hidden]{display:none}
.dlvmodal__backdrop{position:absolute;inset:0;background:rgba(12,14,20,.66);backdrop-filter:blur(3px)}
.dlvmodal__box{position:relative;background:#fff;color:#191c24;border-radius:18px;max-width:430px;width:100%;padding:30px 28px;box-shadow:0 30px 80px rgba(10,14,30,.45);font-family:Inter,system-ui,sans-serif}
.dlvmodal__box h3{margin:0 0 8px;font-size:19px}
.dlvmodal__box>p{margin:0 0 18px;font-size:14px;line-height:1.55;color:#5a6070}
.dlvmodal__x{position:absolute;top:10px;right:14px;border:none;background:none;font-size:26px;color:#9aa0b0;cursor:pointer;line-height:1}
#dlv-form{display:flex;flex-direction:column;gap:10px}
#dlv-form input{font-family:inherit;font-size:15px;padding:12px 14px;border:1px solid #d9dde8;border-radius:10px;outline:none}
#dlv-form input:focus{border-color:#4b56d6;box-shadow:0 0 0 3px rgba(75,86,214,.15)}
.dlvmodal__go{font-family:inherit;cursor:pointer;border:none;background:#191c24;color:#fff;font-weight:700;font-size:15px;border-radius:10px;padding:13px 16px;margin-top:4px}
.dlvmodal__go:hover{background:#000}
.dlvmodal__fine{margin:12px 0 0;font-size:12px;color:#8a90a2;text-align:center}