/* mailchimp.css — styles used only by the MailChimp case study.
   Shared case-study styles live in /assets/css/case-study.css. */

/* ---------- 03: how customers buy (three channels) ---------- */
.channels { list-style: none; display: grid; gap: 14px; margin-top: clamp(22px, 3vw, 32px); }
@media (min-width: 760px) { .channels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.channel {
  display: grid; gap: 6px; align-content: start;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  padding: 10px 10px 18px;
}
.channel--focus { border-color: rgba(255, 224, 27, 0.5); }
.channel__art { position: relative; margin-bottom: 10px; aspect-ratio: 1; border-radius: calc(var(--radius) - 5px); overflow: hidden; background: #fff; }
.channel__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.channel__tag { position: absolute; top: 10px; left: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(var(--bg-rgb), 0.88); color: var(--accent); }
.channel > h3, .channel > p, .channel__who { margin-inline: 8px; }
.channel h3 { font-size: var(--fs-h3); }
.channel > p { color: var(--muted); font-size: var(--fs-small); line-height: 1.5; }
.channel__who { list-style: none; display: grid; gap: 6px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.channel__who li { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.channel__who li::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: center / 10px no-repeat; }
.channel__who .is-yes::before { background-color: var(--accent-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.1 7.3 8 3' fill='none' stroke='%23f5c451' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.channel__who .is-no { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(var(--fg), 0.25); }
@media (max-width: 759px) {
  /* phones: illustration beside the text, so the three cards stay short */
  .channel { grid-template-columns: 116px minmax(0, 1fr); column-gap: 14px; align-items: start; }
  .channel__art { grid-row: 1 / span 3; margin: 0; }
  .channel > h3, .channel > p, .channel__who { margin-inline: 0; }
  .channel > h3 { margin-top: 4px; }
  .channel__who { margin-top: 2px; padding-top: 10px; }
  .channel__tag { top: 6px; left: 6px; padding: 3px 7px; font-size: 0.62rem; }
}
.channel__who .is-no::before { background-color: rgba(var(--fg), 0.05); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 5h4' fill='none' stroke='%23a09fa6' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* ---------- why SMS is different ---------- */
.sms-why { display: grid; gap: 20px; margin-bottom: clamp(32px, 4vw, 44px); }
.sms-flow { list-style: none; display: grid; gap: 30px; }
@media (min-width: 760px) { .sms-flow { grid-template-columns: 1fr 1fr 1.2fr; gap: 34px; } }
.sms-flow__step {
  position: relative; display: grid; gap: 6px; align-content: start;
  padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.sms-flow__step:not(:last-child)::after {
  content: "↓"; position: absolute; left: 50%; bottom: -26px; translate: -50% 0; color: var(--accent); font-size: 1rem; line-height: 1;
}
@media (min-width: 760px) {
  .sms-flow__step:not(:last-child)::after { content: "→"; left: auto; right: -26px; bottom: auto; top: 50%; translate: 0 -50%; }
}
.sms-flow__icon { width: 22px; height: 22px; margin-bottom: 4px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sms-flow strong { font-weight: 500; }
.sms-flow span { color: var(--muted); font-size: var(--fs-small); line-height: 1.45; }
.sms-flow__step--split { padding: 0; border: 0; background: none; gap: 10px; align-content: stretch; }
.sms-flow__out { display: grid; gap: 3px; align-content: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.sms-flow__out strong { display: flex; align-items: center; gap: 8px; }
.sms-flow__out strong::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: center / 10px no-repeat; }
.sms-flow__out.is-yes { border-color: rgba(245, 196, 81, 0.45); }
.sms-flow__out.is-yes strong::before { background-color: var(--accent-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.1 7.3 8 3' fill='none' stroke='%23f5c451' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sms-flow__out.is-no strong { color: var(--ink-2); }
.sms-flow__out.is-no strong::before { background-color: rgba(var(--fg), 0.05); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 3l4 4M7 3 3 7' fill='none' stroke='%23a09fa6' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.sms-why__impact { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink); }

/* ---------- cart explorations: scroll sequence ---------- */
/* Without JS (or with reduced motion) the carts are a simple list. */
.seq { margin-top: clamp(24px, 3vw, 36px); }
.seq__list { list-style: none; display: grid; gap: clamp(48px, 6vw, 72px); }
.seq__item { display: grid; gap: 20px; align-items: center; }
@media (min-width: 860px) { .seq__item { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; } }
.seq__media { position: relative; margin: 0; display: grid; place-items: center; }
.seq__cart { display: block; width: min(100%, 360px); height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)); cursor: zoom-in; }
.seq__item.is-final .seq__cart { filter: drop-shadow(0 0 1px rgba(255, 224, 27, 0.9)) drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55)); }
.seq__text { display: grid; gap: 10px; max-width: 30em; }
.seq__text h4 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
.seq__text p { color: var(--ink-2); }
.seq__text .label { color: var(--muted); }
.seq__item.is-final .seq__text .label { color: var(--accent); }
.seq__backdrop, .seq__steps, .seq__status, .seq__leader { display: none; }

/* Live (JS) mode: the stage pins just below the header and each cart lands in the cart slot of the
   dashboard. mailchimp.js measures the stage and sets the geometry in px:
   --s (dashboard scale), --bx/--by (dashboard position), --cx/--cy (cart slot), --tw/--ty (text), --sy (stepper),
   --al/--ar (how far the backdrop reaches past the column), --f0..--f2 / --v0, --v1 (fades), --bo (backdrop opacity),
   --lw (leader width), --tail (empty space under the last cart, pulled back so the next section follows closely). */
.seq.is-live { --pin: 77px; height: calc(100vh - var(--pin) - 12px + var(--n) * 62vh); margin-bottom: calc(-1 * var(--tail, 0px)); }
.seq.is-live .seq__stage { position: sticky; top: var(--pin); height: calc(100vh - var(--pin) - 12px); pointer-events: none; }
.seq.is-live .seq__backdrop {
  display: block; position: absolute; top: 0; bottom: var(--tail, 0px); left: calc(-1 * var(--al, 0px)); right: calc(-1 * var(--ar, 0px));
  overflow: hidden; opacity: var(--bo, 1);
  -webkit-mask-image: linear-gradient(to right, transparent var(--f0, 0px), rgba(0, 0, 0, 0.5) var(--f1, 20%), #000 var(--f2, 60%)), linear-gradient(to bottom, transparent var(--v0, 0px), #000 var(--v1, 9%), #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent var(--f0, 0px), rgba(0, 0, 0, 0.5) var(--f1, 20%), #000 var(--f2, 60%)), linear-gradient(to bottom, transparent var(--v0, 0px), #000 var(--v1, 9%), #000 82%, transparent 100%);
  mask-composite: intersect;
}
.seq.is-live .seq__board { position: absolute; left: calc(var(--al, 0px) + var(--bx, 0px)); top: var(--by, 0px); width: calc(1600px * var(--s, 0.6)); max-width: none; height: auto; }
.seq.is-live .seq__list { position: relative; height: 100%; display: block; }
.seq.is-live .seq__item {
  position: absolute; inset: 0; opacity: 0;
  transform: translateY(56px) scale(0.97);
  transition: opacity 0.55s var(--ease), transform 0.75s var(--ease);
}
.seq.is-live .seq__item.is-past { transform: translateY(-40px) scale(0.97); }
.seq.is-live .seq__item.is-active { opacity: 1; transform: none; }
.seq.is-live .seq__item.is-active .seq__cart, .seq.is-live .seq__item.is-active .seq__text { pointer-events: auto; }
.seq.is-live .seq__media { position: absolute; left: var(--cx, 0px); top: var(--cy, 0px); width: calc(468px * var(--s, 0.6)); display: block; }
.seq.is-live .seq__cart { width: 100%; }
.seq.is-live .seq__text {
  position: absolute; left: 0; top: var(--ty, 30%); width: var(--tw, 40%);
  opacity: 0; transform: translateX(18px); transition: opacity 0.5s var(--ease) 0.15s, transform 0.6s var(--ease) 0.15s;
}
.seq.is-live .seq__item.is-active .seq__text { opacity: 1; transform: none; }
/* the exploration count is read out, and shown as the minimal stepper instead */
.seq.is-live .seq__n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* minimal stepper: one thin line per exploration */
.seq.is-live .seq__steps { display: flex; gap: 6px; position: absolute; left: 0; top: var(--sy, 0px); transition: opacity 0.4s var(--ease); }
.seq__steps span { width: 28px; height: 2px; border-radius: 2px; background: var(--line-strong); transition: background-color 0.35s var(--ease); }
.seq__steps span.is-on { background: var(--accent); }
.seq__steps.is-off { opacity: 0; }

/* final cart: the status header cycles through other information types, then settles on the one used */
.seq.is-live .seq__status { display: block; position: absolute; left: calc(36 / 702 * 100%); top: calc(693 / 1284 * 100%); width: calc(630 / 702 * 100%); aspect-ratio: 630 / 45; pointer-events: none; }
.seq__status::before { content: ""; position: absolute; inset: -2px; border-radius: 6px; background: #fff; opacity: 0; transition: opacity 0.3s var(--ease); }
.seq__status.is-cycling::before { opacity: 1; }
.seq__status img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: translateY(5px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.seq__status img.is-on { opacity: 1; transform: none; }
.seq.is-live .seq__leader {
  display: flex; align-items: center; gap: 10px; position: absolute; top: calc(715.5 / 1284 * 100%); right: calc(100% - 36 / 702 * 100%);
  width: var(--lw, 180px); translate: 0 -50%; pointer-events: none;
}
.seq.is-live.no-leader .seq__leader { display: none; }
.seq__leader-text { flex: 1; color: var(--ink-2); font-size: 0.8rem; line-height: 1.4; text-align: right; opacity: 0; translate: 8px 0; transition: opacity 0.45s var(--ease), translate 0.45s var(--ease); }
.seq__leader-line { position: relative; flex: none; width: 44px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform 0.55s var(--ease); }
.seq__leader-line::after { content: ""; position: absolute; right: -3px; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.seq__item.is-leader .seq__leader-line { transform: scaleX(1); }
.seq__item.is-leader .seq__leader-text { opacity: 1; translate: 0; transition-delay: 0.2s; }
@media (max-width: 859px) { .seq.is-live { --pin: 72px; } }

/* the floating "Scroll to top" button steps aside while the cart explorations are pinned */
.seq-pinned .to-top.is-visible { opacity: 0; pointer-events: none; }

/* ---------- dialogs over the dashboard (configuration and guardrails) ---------- */
.gr-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 44px); margin-top: clamp(20px, 2.6vw, 30px); }
.gr { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } /* shrink-to-fit column, see .screen */
/* The stage is Krishna's 1600 x 1151 dashboard. Each dialog keeps its real size and position on that
   screen: --x, --y and --w are px of the 1600-wide frame, taken from the final designs. */
.gr__stage { position: relative; aspect-ratio: 1600 / 1151; container-type: inline-size; }
.gr__dash { position: absolute; inset: 0; width: 100%; height: 100%; }
/* modal backdrop: a light dim with a soft blur around the dialog, clearing to a sharp dashboard at the edges */
.gr__veil {
  position: absolute; inset: 0; border-radius: calc(12 / 1600 * 100cqw);
  background: radial-gradient(62% 68% at 50% 44%, rgba(var(--bg-rgb), 0.38), rgba(var(--bg-rgb), 0) 88%);
  -webkit-backdrop-filter: blur(1.2px); backdrop-filter: blur(1.2px);
  -webkit-mask-image: radial-gradient(62% 68% at 50% 44%, #000 30%, transparent 92%);
  mask-image: radial-gradient(62% 68% at 50% 44%, #000 30%, transparent 92%);
}
.gr__dialog {
  position: absolute; left: calc(var(--x) / 1600 * 100%); top: calc(var(--y) / 1151 * 100%); width: calc(var(--w) / 1600 * 100%); height: auto;
  border-radius: calc(8 / 1600 * 100cqw); cursor: zoom-in;
  box-shadow: 0 0 0 1px rgba(255, 224, 27, 0.7), 0 30px 60px -20px rgba(0, 0, 0, 0.95);
}
@media (max-width: 599px) { .gr__dialog { scale: 1.35; } }
.gr figcaption { display: flex; gap: 12px; align-items: baseline; color: var(--muted); font-size: var(--fs-small); }
.gr figcaption .label { color: var(--ink-2); flex: none; }

/* ---------- final cart: guidance tooltip on the "!" icon, and the phone version of the leader ---------- */
/* positions are px of the 702 x 1284 final-cart export: the icon sits at (180-209, 701-729) */
.seq__cartbox { position: relative; width: min(100%, 360px); }
.seq__cartbox .seq__cart { width: 100%; }
.seq.is-live .seq__cartbox { width: 100%; }
.seq__tip-btn {
  position: absolute; z-index: 2; left: calc(176 / 702 * 100%); top: calc(697 / 1284 * 100%); width: calc(37 / 702 * 100%); aspect-ratio: 1;
  padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: help;
}
.seq__tip-btn::after { content: ""; position: absolute; inset: -1px; border: 1.5px solid var(--accent); border-radius: 50%; opacity: 0; animation: tip-pulse 2.4s var(--ease) infinite; }
@keyframes tip-pulse { 0% { opacity: 0.9; transform: scale(0.7); } 70%, 100% { opacity: 0; transform: scale(1.6); } }
.seq__tip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.seq__tip {
  position: absolute; z-index: 3; left: calc(141 / 702 * 100%); top: calc(562.5 / 1284 * 100%); width: calc(552 / 702 * 100%); height: auto;
  pointer-events: none; opacity: 0; translate: 0 6px; transition: opacity 0.25s var(--ease), translate 0.25s var(--ease);
}
.seq__tip-btn:hover + .seq__tip, .seq__tip-btn:focus-visible + .seq__tip, .seq__cartbox.is-tip-open .seq__tip { opacity: 1; translate: 0 0; }
.seq__status.is-cycling ~ .seq__tip-btn, .seq__status.is-cycling ~ .seq__tip { visibility: hidden; opacity: 0; }
.seq.is-live .seq__item.is-active .seq__tip-btn { pointer-events: auto; }
.seq__hint { color: var(--muted); font-size: var(--fs-small); }
.seq__hint-icon { display: inline-block; width: 1.1em; height: 1.1em; margin: 0 1px; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.seq__hint-icon .dot { fill: currentColor; stroke: none; }
.seq__hint-tap { display: none; }
@media (hover: none) { .seq__hint-hover { display: none; } .seq__hint-tap { display: inline; } }
.seq__note { display: none; }
@media (max-width: 859px) {
  .seq.is-live .seq__note { display: flex; align-items: center; gap: 8px; color: var(--accent); font-size: var(--fs-small); opacity: 0; transition: opacity 0.4s var(--ease); }
  .seq.is-live .seq__note::before { content: ""; flex: none; width: 18px; height: 1px; background: var(--accent); }
  .seq__item.is-leader .seq__note { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .seq__tip-btn::after { animation: none; opacity: 0.6; } }
.cs-section > .sms-flow, .cs-section > .callout-q { margin-top: clamp(20px, 2.6vw, 28px); }

/* dashboard stages in a carousel: no rounded clipping, so the dashboard's own yellow corners stay visible */
.carousel--stage .carousel__track { border-radius: 0; }

/* ---------- themes: MailChimp keeps its yellow; light mode uses a deeper shade so text stays readable ---------- */
body.cs-mc { --accent: #f5c451; --accent-ink: #1a1508; --accent-soft: rgba(245, 196, 81, 0.12); --hl: rgba(245, 196, 81, 0.34); }
:root[data-theme="light"] body.cs-mc { --accent: #8a6500; --accent-ink: #ffffff; --accent-soft: rgba(138, 101, 0, 0.1); --hl: rgba(245, 196, 81, 0.55); }
/* light mode: Krishna's yellow line-art dashboards are drawn for dark; deepen the lines so they read on paper */
:root[data-theme="light"] img[src*="sales-dash"] { filter: brightness(0.5) saturate(1.6) contrast(1.2); }
/* light mode: the small yellow ticks in a deeper mustard */
:root[data-theme="light"] .channel__who .is-yes::before, :root[data-theme="light"] .sms-flow__out.is-yes strong::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.1 7.3 8 3' fill='none' stroke='%238a6500' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}