/* Meet Mark (October 14, 2026): a real person from the team greets in the hero, introduces Kai (our AI assistant),
   then stays as "Meet Mark" and opens his videos. Homepage only. Colors follow the October 1 navy and orange look. */

/* Hero card. It takes the slot Kai's hero greeting used, so the page keeps its height. */
.mark-greeting { display:flex; align-items:center; gap:12px; width:100%; max-width:390px; min-height:96px; padding:8px 14px 8px 8px; background:#fff; border:1px solid #d9e1ea; border-radius:18px; color:#102b46; font:inherit; text-align:left; cursor:pointer; box-shadow:0 6px 22px #102b4610; }
.mark-greeting[hidden] { display:none; }
.mark-greeting:hover { border-color:#ffb47d; }
.mark-greeting:focus-visible { outline:3px solid #ff9b53; outline-offset:4px; }
.mark-face { position:relative; flex-shrink:0; width:72px; height:72px; }
.mark-face img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:0 0 0 2px #ff9b53; }
.mark-play { position:absolute; right:-3px; bottom:-3px; display:grid; place-items:center; width:26px; height:26px; border-radius:50%; border:2px solid #fff; background:#102b46; color:#fff; font-size:10px; line-height:1; }
.mark-bubble { display:block; min-width:0; }
.mark-name { display:block; font-size:12px; font-weight:800; line-height:1.3; }
.mark-name small { font-size:11px; font-weight:650; color:#475569; }
/* Every line sits in the same grid cell, so the card is always as tall as its longest line and nothing below jumps. */
.mark-lines { display:grid; margin-top:4px; }
.mark-line { grid-area:1 / 1; font-size:14px; line-height:1.45; visibility:hidden; opacity:0; }
.mark-line.is-on { visibility:visible; opacity:1; }
.mark-line b { color:#b74700; font-weight:800; white-space:nowrap; }
@media (prefers-reduced-motion:no-preference) {
  .mark-line { transition:opacity .35s ease, visibility 0s linear .35s; }
  .mark-line.is-on { transition:opacity .35s ease .1s, visibility 0s; }
  .mark-greeting[data-state="greeting"] { animation:mark-in .5s cubic-bezier(.22,1,.36,1) both; }
  @keyframes mark-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
}
@media (max-width:420px) { .mark-face { width:60px; height:60px; } .mark-line { font-size:13px; } }

/* The "Watch Mark" button in the follow-up tab. */
.mark-watch { display:flex; align-items:center; gap:12px; max-width:100%; min-height:64px; margin-top:14px; padding:6px 16px 6px 6px; border:1px solid #d9e1ea; border-radius:14px; background:#fff; color:#102b46; font:inherit; text-align:left; cursor:pointer; }
.mark-watch:hover { border-color:#ff9b53; }
.mark-watch:focus-visible { outline:3px solid #ff9b53; outline-offset:3px; }
.mark-watch-thumb { position:relative; flex-shrink:0; width:46px; height:56px; overflow:hidden; border-radius:9px; background:#102b46; }
.mark-watch-thumb img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.mark-watch-thumb span { position:absolute; inset:0; display:grid; place-items:center; background:#102b4650; color:#fff; font-size:14px; }
.mark-watch-copy strong { display:block; font-size:14px; line-height:1.3; }
.mark-watch-copy small { display:block; margin-top:3px; font-size:12px; color:#475569; }

/* Mark's pop-up: his video beside who he is, with the same phone bar as every homepage dialog. */
/* Wider than the other pop-ups on computers; on phones it is the same bottom sheet as they are (site-v2.css). */
@media (min-width:761px) { .consultation-home .mark-dialog { width:min(900px, calc(100% - 40px)); } }
.mark-dialog-grid { display:grid; grid-template-columns:minmax(0, 330px) minmax(0, 1fr); gap:30px; align-items:start; }
.mark-video-frame { width:min(100%, calc((100dvh - 150px) * 9 / 16)); aspect-ratio:9 / 16; margin:0 auto; overflow:hidden; border-radius:18px; background:#0b1d30; }
.mark-video-frame video { display:block; width:100%; height:100%; object-fit:contain; background:#0b1d30; }
.mark-dialog-copy .eyebrow { font-size:11px; }
.mark-dialog-copy h2 { margin:8px 0 14px; font-size:clamp(28px, 3vw, 38px); line-height:1.15; letter-spacing:-.04em; }
.mark-who { display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:13px; font-weight:750; color:#102b46; }
.mark-who img { width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.mark-who small { display:block; font-weight:600; color:#475569; }
.mark-dialog-copy > p { color:#475569; font-size:15px; line-height:1.65; margin:0 0 12px; }
.mark-picker h3 { margin:18px 0 8px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:#475569; }
.mark-picker ul { list-style:none; display:grid; gap:8px; margin:0; padding:0; }
.mark-picker button { width:100%; min-height:52px; padding:8px 12px; border:1px solid #d9e1ea; border-radius:12px; background:#fff; color:#102b46; font:inherit; font-size:14px; font-weight:750; text-align:left; cursor:pointer; }
.mark-picker button small { display:block; font-size:12px; font-weight:600; color:#475569; }
.mark-picker button[aria-pressed="true"] { border-color:#ff9b53; box-shadow:inset 4px 0 #ff9b53; }
/* One video so far: the list appears once Mark records a second one. */
.mark-picker:has(li:only-child) { display:none; }
.mark-transcript { margin:14px 0 0; border-top:1px solid #e6ecf3; }
.mark-transcript summary { display:flex; align-items:center; min-height:44px; font-size:14px; font-weight:750; color:#102b46; cursor:pointer; }
.mark-transcript p { margin:0 0 10px; color:#475569; font-size:14px; line-height:1.65; }
.mark-dialog-actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px 20px; margin-top:18px; }
.mark-dialog-actions .button { min-height:46px; }
.mark-dialog-actions .rr-text-link { text-align:left; }
.mark-team-link { display:inline-flex; align-items:center; min-height:44px; margin-top:4px; font-size:13px; font-weight:700; color:#102b46; }
@media (max-width:760px) {
  .mark-dialog-grid { grid-template-columns:1fr; gap:18px; }
  .mark-video-frame { width:min(100%, 320px, calc(62dvh * 9 / 16)); }
}

/* Animated Mark (October 14, 2026): stands just left of Kai's corner (Kai: right 24px, 200px wide; on phones
   right 12px, 142px wide), between Kai and the phone pill, and walks off behind Kai. Decorative, never clickable. */
.mark-toon { position:fixed; z-index:71; right:234px; bottom:18px; width:104px; height:135px; pointer-events:none; }
.mark-toon[hidden] { display:none; }
.mark-toon-art { position:absolute; inset:0; background:url('/assets/mark-toon-sprite.png?v=gpt1') 0 0 / 600% 100% no-repeat; }
.mark-toon[data-frame="1"] .mark-toon-art { background-position-x:20%; }
.mark-toon[data-frame="2"] .mark-toon-art { background-position-x:40%; }
.mark-toon[data-frame="3"] .mark-toon-art { background-position-x:60%; }
.mark-toon[data-frame="4"] .mark-toon-art { background-position-x:80%; }
.mark-toon[data-frame="5"] .mark-toon-art { background-position-x:100%; }
.mark-toon.is-leaving .mark-toon-art { transform:scaleX(-1); }
.mark-toon-say { position:absolute; right:-6px; bottom:calc(100% + 4px); width:max-content; max-width:230px; padding:9px 13px; border-radius:16px 16px 4px 16px; background:#102b46; color:#fff; font-size:14px; font-weight:750; line-height:1.35; box-shadow:0 8px 24px #102b4633; opacity:0; transform:translateY(6px) scale(.96); transform-origin:bottom right; transition:opacity .2s ease, transform .25s cubic-bezier(.22,1,.36,1); }
.mark-toon-say.is-on { opacity:1; transform:none; }
@media (max-width:600px) {
  .mark-toon { right:158px; bottom:14px; width:60px; height:78px; }
  .mark-toon-say { right:-4px; max-width:190px; font-size:13px; padding:8px 11px; }
}
/* Narrow phones have no room between the phone pill and Kai: he stands on top of Kai's card instead. */
@media (max-width:369px) { .mark-toon { right:84px; bottom:78px; } }