/* =========================================================
   Evgenii Kovalev — ekovalev.pro
   Strict CV site. Grayscale, sans-serif, document-first.
   ========================================================= */

@font-face {
  font-family: "InterVar"; font-style: normal; font-display: swap; font-weight: 400 680;
  src: url("../fonts/inter.woff2") format("woff2");
}

:root {
  --bg: #ffffff;
  --surface: #fafafa;
  --text: #18181b;
  --text-2: #52525b;
  --text-3: #6b6b73;
  --line: #e2e2e5;
  --line-2: #d3d3d7;
  --block-gap: 30px;
  --pair-gap: 10px;
  --card-bg: #f4f4f5; --card-line: #e2e2e5; --card-ink: #272732; --card-sub: #6b6b73;
  --mark: #18181b;
  --nav-bg: rgba(255, 255, 255, 0.85);

  --sans: "InterVar", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pad: clamp(20px, 4vw, 72px);
  --ease: cubic-bezier(0.22, 0.7, 0.18, 1);
  --r: 8px;
  --r-lg: 10px;
  --r-card: clamp(24px, 3vw, 30px);
  /* brand cover gradients — one source of truth per project */
  --grad-mint: linear-gradient(135deg, #C9FFD9 13.68%, #3F9E76 107.61%);
  --grad-slate: linear-gradient(138deg, #7182A1 12.53%, #303742 106.46%);
  --grad-warm: linear-gradient(138deg, #FFD8C4 12.53%, #FF9469 106.46%);
  --grad-red: linear-gradient(145deg, #FD9D8D 12.53%, #E34837 106.46%);
}

[data-theme="dark"] {
  --bg: #000000;
  --surface: #1e1e21;
  --text: #ededee;
  --text-2: #a1a1aa;
  --text-3: #8f8f97;
  --line: #2a2a2e;
  --line-2: #3a3a40;
  --card-bg: #18181b; --card-line: #2a2a2e; --card-ink: #ededee; --card-sub: #a8a8b2;
  --mark: #ededee;
  --nav-bg: rgba(0, 0, 0, 0.82);
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  font-size: 16.5px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "tnum" 0;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: color-mix(in srgb, var(--text) 15%, transparent); color: inherit; }

.theme-transition, .theme-transition * { transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease) !important; }
.no-transition * { transition: none !important; }

.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--pad); }

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--text); color: var(--bg); padding: 10px 14px; z-index: 100; }
/* cursor badge: a 10px pill trailing the native cursor, tinted per project or gray */
.cursor-badge { position: fixed; left: 0; top: 0; z-index: 200; padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; line-height: 1; color: #fff; background: #4b5563; opacity: 0; pointer-events: none; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); will-change: transform, opacity; transition: opacity 0.15s var(--ease), background-color 0.2s var(--ease); }
.cursor-badge[data-show="1"] { opacity: 1; }
.cursor-badge[data-tone="green"]  { background: #16a34a; }
.cursor-badge[data-tone="blue"]   { background: #3b6fe0; }
.cursor-badge[data-tone="orange"] { background: #e8743c; }
.cursor-badge[data-tone="red"]    { background: #d93a3a; }
.cursor-badge[data-tone="gray"]   { background: #4b5563; }
@media (hover: none), (pointer: coarse) { .cursor-badge { display: none; } }
.skip-link:focus { left: 16px; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.mono-num { font-variant-numeric: tabular-nums; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40; background: var(--nav-bg);
  padding-top: env(safe-area-inset-top);
  backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease);
}
.topbar.scrolled { border-bottom-color: var(--line); }
.topbar__in { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 20px; }
.topbar__name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 9px; }
.topbar__logo { width: 34px; height: 19px; flex: none; background-color: var(--text); -webkit-mask: url(../img/logo.png) left center / contain no-repeat; mask: url(../img/logo.png) left center / contain no-repeat; }
.topbar__right { display: flex; align-items: center; gap: 22px; }
.topbar__links { display: flex; gap: 3px; }
.topbar__links a { font-size: 13px; color: var(--text-2); padding: 7px 13px; border-radius: 11px; transition: color 0.2s var(--ease), background 0.2s var(--ease); }
.topbar__links a:hover, .topbar__links a.active { color: var(--text); background: var(--card-bg); }
.toggle { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: transparent; border: 1px solid var(--line-2); color: var(--text-2); cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.toggle:hover { color: var(--text); border-color: var(--text-3); }
.navtoggle { display: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: transparent; border: 1px solid var(--line-2); color: var(--text-2); cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.navtoggle:hover { color: var(--text); border-color: var(--text-3); }
.navtoggle svg { display: block; }

/* ---------- links ---------- */
.link { color: var(--text); text-decoration: none; transition: opacity 0.2s var(--ease); }
.link--muted { color: var(--text-2); }
.link:hover { opacity: 0.62; }

/* ---------- page fade ---------- */
main { opacity: 0; transition: opacity 0.5s var(--ease); }
main.ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { main { opacity: 1; transition: none; } }

/* ---------- intro (first block — same label|content grid as sections) ---------- */
.block.block--intro { grid-template-columns: 1fr; padding-top: clamp(44px, 7vh, 80px); }
.block--intro .block__label { display: none; }
.block--intro::before { display: none; }
.block--intro h1 { font-size: clamp(29px, 4vw, 42px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.06; }
.masthead__summary { margin-top: 18px; max-width: 640px; font-size: 15px; line-height: 1.6; color: var(--text); }
.masthead__summary b { color: var(--text); font-weight: 550; }
.masthead__summary + .masthead__summary { margin-top: 12px; }
.masthead__links { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.masthead__links a { font-size: 13px; color: var(--text); display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: 1px solid var(--line-2); border-radius: 980px; transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease); }
.masthead__links a .ar { color: var(--text-3); transition: transform 0.25s var(--ease), color 0.2s var(--ease); }
.masthead__links a:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.masthead__links a:hover .ar { transform: translate(2px, -2px); color: var(--bg); }
.masthead__links a.masthead__cv { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 550; }
.masthead__links a.masthead__cv .ar { color: var(--bg); }
.masthead__links a.masthead__cv:hover { opacity: 0.86; }
.masthead__links a.masthead__cv:hover .ar { transform: translateY(2px); }
/* home masthead — Apple-precise: name + intro centered, then a luminous color block with the facts */
.hero__head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero__head h1 { font-size: clamp(46px, 8vw, 92px); font-weight: 600; letter-spacing: -0.018em; line-height: 1.05; color: var(--text); }
.hero__role { margin-top: clamp(14px, 1.6vw, 22px); font-size: clamp(25px, 2.8vw, 34px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; color: var(--text); }
.hero__loc { margin-top: 10px; font-size: clamp(15px, 1.1vw, 17px); letter-spacing: -0.01em; color: var(--text-3); }
.hero__sum { margin-top: clamp(22px, 2.4vw, 34px); max-width: 900px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; letter-spacing: -0.012em; color: color-mix(in srgb, var(--text) 56%, var(--bg)); }
.hero__sum b { color: var(--text); font-weight: 600; }
/* at-a-glance facts — a plain, quiet surface card (no gradient, no motion) */
.hero { margin-top: clamp(34px, 4.5vw, 64px); border-radius: clamp(24px, 3vw, 30px); padding: clamp(44px, 4vw, 58px) clamp(28px, 5vw, 64px); display: grid; place-items: center; background: var(--card-bg); border: 1px solid var(--card-line); color: var(--text); }
.hero__facts { width: 100%; max-width: 1040px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(22px, 3vw, 40px); }
.hero__fact { text-align: center; min-width: 0; }
@media (max-width: 720px) { .hero__facts { grid-template-columns: 1fr; gap: 26px; } }
.hero__fact dt { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; text-transform: none; color: var(--text-3); }
.hero__fact dd { margin-top: 10px; font-size: clamp(16px, 1.3vw, 19px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; color: var(--text); }
/* buttons pulled out of the card into a full-width row of standalone pills */
.masthead__links--wide { margin-top: clamp(34px, 4.5vw, 64px); display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.masthead__links--wide a { flex: 0 0 auto; font-size: 14px; padding: 15px 24px; border-radius: 980px; }
@media (max-width: 640px) { .masthead__links--wide a { flex: 1 1 100%; justify-content: space-between; } }
.intro__badge { width: 8px; height: 8px; border-radius: 50%; background: #34c759; flex: none; box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.5); animation: badgePulse 2.2s ease-out infinite; }
@keyframes badgePulse { 0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.5); } 70% { box-shadow: 0 0 0 7px rgba(52, 199, 89, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); } }
@media (prefers-reduced-motion: reduce) { .intro__badge { animation: none; } }
/* home sections: real headings on top, full-width content, no hairline separators — airy blocks */
.rev.home .block { grid-template-columns: 1fr; gap: 0; padding-block: clamp(44px, 6vh, 74px); }
.rev.home .block::before { display: none; }
.rev.home .block__body { max-width: none; }
.rev.home .block__label { position: static; align-self: auto; margin-bottom: clamp(14px, 1.6vw, 22px); font-size: clamp(25px, 2.8vw, 34px); font-weight: 600; letter-spacing: -0.025em; text-transform: none; color: var(--text); white-space: normal; }
.rev.home .block--intro { padding-top: clamp(54px, 8vh, 104px); padding-bottom: clamp(20px, 2.6vh, 32px); }

/* ---------- section block (label | content) ---------- */
.block { display: grid; grid-template-columns: 150px 1fr; gap: var(--pad); padding: clamp(40px, 6vh, 60px) var(--pad); position: relative; align-items: start; }
.rev.home .block--tight, .block--tight { padding-top: 0; }
.block--tight::before { display: none; }
.block::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; border-top: 1px solid var(--line); }
.block__label { font-size: 12px; font-weight: 550; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); padding-top: 0; white-space: nowrap; position: sticky; top: 84px; align-self: start; }
.block__body { min-width: 0; max-width: 1160px; }
.block__body--stack { display: grid; gap: 10px; }

/* ---------- experience ---------- */
.xp__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.xp__role { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.xp__role .co { color: var(--text-2); font-weight: 450; }
.xp__when { font-size: 13px; color: var(--text-3); white-space: nowrap; }
.xp__loc { margin-top: 3px; font-size: 13px; color: var(--text-3); }
.xp__points { list-style: none; margin-top: 12px; display: grid; gap: 8px; }
.xp__points li { position: relative; padding-left: 18px; font-size: 15px; color: var(--text); line-height: 1.55; }
.xp__points li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 1px; background: var(--text-3); }
.xp__points b { color: var(--text); font-weight: 600; }
.xp__more { margin-top: 22px; font-size: 14px; color: var(--text-3); }

/* ---------- skills: bento of capability tiles + a tools shelf (Apple product-overview grammar) ---------- */
.skl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.skl__group { position: relative; min-width: 0; padding: clamp(22px, 2.1vw, 28px) clamp(22px, 2.1vw, 28px) clamp(24px, 2.3vw, 30px); background: var(--card-bg); border: 1px solid var(--card-line); border-radius: clamp(20px, 2vw, 24px); }
.skl__group::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, rgba(255,255,255,0.7), transparent 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.5; }
.skl__k { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: clamp(14px, 1.05vw, 16px); font-weight: 600; letter-spacing: -0.005em; color: var(--text-2); text-transform: none; }
.skl__k::before { display: none; }
.skl__group--pr { --dot: #5aa4ff; }
.skl__group--dc { --dot: #ff7a8a; }
.skl__group--ld { --dot: #ffb347; }
.skl__group--ai { --dot: #13a8a2; }
.skl__list { list-style: none; margin-top: clamp(14px, 1.5vw, 18px); display: grid; gap: 9px; }
.skl__list li { font-size: 15px; line-height: 1.45; letter-spacing: -0.01em; color: var(--text); }
/* tools: full-width shelf, same tile grammar, chips of monochrome marks + labels */
.skl__tools { grid-column: 1 / -1; position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(20px, 2.4vw, 30px); padding: clamp(18px, 1.8vw, 24px) clamp(22px, 2.1vw, 28px); background: var(--card-bg); border: 1px solid var(--card-line); border-radius: clamp(20px, 2vw, 24px); }
.skl__tools .skl__k { flex: 0 0 auto; margin-right: clamp(18px, 2vw, 28px); padding-right: clamp(18px, 2vw, 28px); border-right: 1px solid var(--line); }
.skl__tool { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: -0.01em; color: var(--text-2); }
.skl__tool i { width: 15px; height: 15px; flex: none; background-color: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
[data-theme="dark"] .skl__group::before { background: linear-gradient(160deg, rgba(255,255,255,0.06), transparent 45%); opacity: 1; }
@media (max-width: 1080px) { .skl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skl__tools .skl__k { flex: 0 0 100%; margin-right: 0; padding-right: 0; border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 4px; } }
@media (max-width: 560px) { .skl { grid-template-columns: 1fr; } }

/* ---------- education: a feature card with a soft brand wash, a real degree
   headline, and language proficiency meters. English carries the teal accent
   (the professional one worth the eye); Russian sits quiet as a native line. */
.edu { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: radial-gradient(120% 100% at 100% 0%, rgba(19,168,162,0.10), transparent 55%), var(--card-bg); border: 1px solid var(--card-line); border-radius: clamp(20px, 2vw, 24px); padding: clamp(28px, 3.4vw, 40px) clamp(26px, 3.2vw, 40px); }
.edu__group { min-width: 0; padding: 0 clamp(28px, 3.4vw, 54px); }
.edu__group:first-child { padding-left: 0; }
.edu__group--langs { padding-right: 0; border-left: 1px solid var(--line); }
.edu__k { display: block; margin-bottom: clamp(16px, 1.9vw, 24px); font-size: clamp(14px, 1.05vw, 16px); font-weight: 600; letter-spacing: -0.005em; text-transform: none; color: var(--text-2); }
.edu__degree { font-size: clamp(24px, 2.8vw, 34px); font-weight: 600; letter-spacing: -0.022em; line-height: 1.1; color: var(--text); }
.edu__meta { margin-top: 10px; font-size: 14px; letter-spacing: -0.005em; color: var(--text-3); }
.edu__langs { list-style: none; margin: 0; display: grid; gap: clamp(16px, 1.8vw, 22px); }
.edu__lang { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 14px; row-gap: 11px; min-width: 0; }
.edu__lang-name { font-size: clamp(15px, 1.2vw, 17px); font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.edu__lvl { justify-self: end; font-size: 13px; letter-spacing: -0.005em; color: var(--text-3); white-space: nowrap; }
.edu__meter { grid-column: 1 / -1; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; }
.edu__meter i { display: block; height: 100%; width: var(--lvl, 50%); border-radius: inherit; background: var(--line-2); }
.edu__meter--pro i { background: #13a8a2; }
[data-theme="dark"] .edu { background: radial-gradient(120% 100% at 100% 0%, rgba(52,209,192,0.10), transparent 55%), var(--card-bg); }
[data-theme="dark"] .edu__meter--pro i { background: #34d1c0; }
@media (max-width: 760px) {
  .edu { grid-template-columns: 1fr; align-items: stretch; }
  .edu__group { padding: 0; }
  .edu__group--langs { border-left: 0; border-top: 1px solid var(--line); margin-top: clamp(24px, 6vw, 30px); padding-top: clamp(24px, 6vw, 30px); }
}

/* contact: no container, big statement, buttons below */
.rev.home .block--contact, .block--contact { padding-bottom: clamp(100px, 12vh, 160px); }
.block--contact .block__label { display: none; }
.contact__lead { max-width: 940px; font-size: clamp(24px, 3vw, 38px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); }
.block--contact .masthead__links--wide { margin-top: clamp(26px, 3vw, 40px); justify-content: flex-start; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 28px 0 44px; }
.foot__in { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; color: var(--text-3); }

/* ---------- recommendations ---------- */
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.quote { position: relative; border: 1px solid var(--card-line); border-radius: 30px; padding: clamp(32px, 3.4vw, 46px); background: var(--card-bg); display: flex; flex-direction: column; overflow: hidden; }
.quote::before { content: "\201C"; position: absolute; top: -0.12em; right: -0.05em; left: auto; font-size: clamp(140px, 15vw, 240px); line-height: 1; font-weight: 600; color: color-mix(in srgb, var(--card-ink) 5%, transparent); pointer-events: none; }
.quote p { position: relative; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.62; color: var(--text); }
.quote__by { margin-top: auto; padding-top: 16px; font-size: 13px; color: var(--text-3); }
.quote__by b { display: block; color: var(--text); font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.quote__link { display: inline-block; margin-top: 14px; font-size: 12px; }

/* =========================================================
   CASE STUDY PAGES
   ========================================================= */
.case-top { padding: 34px 0 0; }
.back { font-size: 14px; color: var(--text-2); display: inline-flex; align-items: center; gap: 8px; transition: color 0.2s var(--ease); }
.back .ar { transition: transform 0.25s var(--ease); }
.back:hover { color: var(--text); }
.back:hover .ar { transform: translateX(-3px); }

.case-hero { padding: clamp(44px, 7vh, 80px) 0 clamp(30px, 5vh, 48px); border-bottom: 1px solid var(--line); }
.case-hero__label { font-size: 12px; font-weight: 550; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); }
.case-hero h1 { margin-top: 18px; font-size: clamp(30px, 5vw, 52px); font-weight: 600; letter-spacing: -0.028em; line-height: 1.04; }
.case-hero__sum { margin-top: 18px; max-width: 680px; font-size: 15px; line-height: 1.6; color: var(--text); }

.case-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.case-meta dt { font-size: 12px; font-weight: 550; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); }
.case-meta dd { margin-top: 8px; font-size: 15px; color: var(--text); line-height: 1.5; }

.case-body { padding: clamp(40px, 6vh, 60px) 0; }
.case-sec { display: grid; grid-template-columns: 200px 1fr; gap: clamp(34px, 5vw, 72px); padding-bottom: clamp(56px, 8vh, 84px); }
.case-sec:last-child { padding-bottom: 0; }
.case-sec__label { font-size: 12px; font-weight: 550; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); padding-top: 5px; }
.case-sec__body { min-width: 0; }
.case-sec__body p { font-size: 15px; line-height: 1.6; color: var(--text); max-width: 680px; }
.case-sec__body p + p { margin-top: 22px; }
.case-sec__body p b { color: var(--text); font-weight: 550; }
.case-list { list-style: none; display: grid; gap: 12px; max-width: 680px; }
.case-list li { position: relative; padding-left: 20px; font-size: 15px; color: var(--text); line-height: 1.6; }
.case-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 1px; background: var(--text-3); }
.case-list b { color: var(--text); font-weight: 600; }

/* impact + what-i-learned card (Figma 947-23766): big metrics, note, divider, lessons */
.impact-card { grid-column: 1 / -1; background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--r-card); padding: clamp(30px, 4vw, 50px); color: var(--card-ink); }
.impact-card__h { font-size: clamp(25px, 3.2vw, 40px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; color: var(--card-ink); }
.impact-card__note { margin-top: clamp(32px, 4vw, 52px); max-width: 1100px; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--card-ink); text-wrap: pretty; }
.impact-card__div { border: 0; height: 1px; background: var(--card-sub); opacity: 0.2; margin: clamp(32px, 4vw, 50px) 0; }
.impact-card__learned { margin-top: clamp(28px, 3.4vw, 42px); display: grid; gap: clamp(12px, 1.4vw, 18px); max-width: 1100px; }
.impact-card__learned p { font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--card-sub); text-wrap: pretty; }
.impact-card__learned b { font-weight: 500; color: var(--card-ink); }

/* impact ledger: hairline-ruled metric grid inside .impact-card.
   Kicker above the number, tabular-nums, honest before→after delta
   (muted "was", neutral arrow, ink "now"); brand green only on
   standalone positive deltas. Hero leads by size, not span. */
.im2 { --im2-up: #13a8a2; margin-top: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(36px, 4.6vw, 60px); row-gap: clamp(32px, 4vw, 52px); }
.im2--solo { grid-template-columns: 1fr; }
.im2--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(28px, 3.4vw, 44px); row-gap: clamp(28px, 3.4vw, 44px); }
.im2--grid .im2__cell--hero { grid-column: span 3; padding-bottom: clamp(20px, 2.4vw, 32px); border-bottom: 1px solid var(--line); }
.im2--grid .im2__cell--hero .im2__stat { font-size: clamp(64px, 8vw, 128px); }
@media (max-width: 760px) { .im2--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .im2--grid .im2__cell--hero { grid-column: span 2; } }
@media (max-width: 480px) { .im2--grid { grid-template-columns: 1fr; } .im2--grid .im2__cell--hero { grid-column: span 1; } }
.im2__meta { list-style: none; margin: clamp(24px, 3vw, 36px) 0 0; padding: clamp(18px, 2.1vw, 26px) 0 0; display: flex; flex-wrap: wrap; gap: 10px clamp(24px, 3vw, 40px); border-top: 1px solid var(--line); font-size: 15px; color: var(--card-sub); }
.im2__meta li { display: inline-flex; align-items: baseline; gap: 8px; letter-spacing: -0.005em; }
.im2__meta b { color: var(--card-ink); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 17px; }
[data-theme="dark"] .im2 { --im2-up: #34d1c0; }
/* metric colour follows the project (teal is 3Commas by default) */
.im2--blue { --im2-up: #3b6fe0; }
.im2--warm { --im2-up: #e8743c; }
[data-theme="dark"] .im2--blue { --im2-up: #6f9bff; }
[data-theme="dark"] .im2--warm { --im2-up: #ff9a5c; }
.im2__cell { display: flex; flex-direction: column; min-width: 0; }
.im2__stat { order: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.05em 0.22em; font-size: clamp(42px, 5vw, 80px); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.im2__kicker { order: 2; margin-top: clamp(14px, 1.6vw, 20px); font-size: 16px; font-weight: 500; line-height: 1.35; letter-spacing: -0.005em; color: var(--card-ink); text-wrap: pretty; }
.im2__now { font-size: 1em; font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; color: var(--text); white-space: nowrap; }
.im2__now--up { color: var(--text); }
.im2__was { font-size: 0.5em; font-weight: 500; letter-spacing: -0.01em; line-height: 1; color: var(--text-3); white-space: nowrap; }
.im2__arrow { font-size: 0.42em; line-height: 1; color: var(--text-3); transform: translateY(-0.1em); }
@media (max-width: 640px) { .im2 { grid-template-columns: 1fr; column-gap: 0; } }

/* screens stand on their own — no boxed container. A soft shadow plus a
   hairline that hugs the image's own rounded edge (so corners never mismatch). */
:root { --shot-radius: 12px; --shot-shadow: 0 0 0 1px var(--line); }

/* figure */
.figure { margin-top: 24px; }
.figure img { width: 100%; height: auto; display: block; border-radius: var(--shot-radius); box-shadow: var(--shot-shadow); transition: box-shadow 0.2s var(--ease); }
.figure img:hover { box-shadow: 0 0 0 1px var(--line-2); }
.figure figcaption { margin-top: 16px; font-size: 14px; font-weight: 400; color: var(--card-sub); line-height: 1.55; max-width: none; }
.figure--placeholder { display: grid; place-items: center; aspect-ratio: 16 / 9; color: var(--text-3); font-size: 14px; text-align: center; padding: 24px; border-radius: var(--shot-radius); box-shadow: 0 0 0 1px var(--line); }
.figure figcaption b { color: inherit; font-weight: 500; }
.figure + .figure { margin-top: 30px; }

/* research board cards (titled, theme-aware: work on white and black) */
.board-card { --bcp: clamp(26px, 3.4vw, 42px); display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--card-line); border-radius: var(--r-card); background: var(--card-bg); padding: var(--bcp); overflow: hidden; }
.board-card__eyebrow { font-size: 16px; font-weight: 400; color: var(--card-sub); }
.board-card__title { margin-top: 8px; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.4; color: var(--card-ink); }
.board-card__logos { display: flex; width: 100%; gap: clamp(8px, 1vw, 12px); margin-top: 30px; }
.board-card__logo { flex: 0 1 44px; min-width: 0; aspect-ratio: 1 / 1; height: auto; border-radius: 50%; overflow: hidden; }
.board-card__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* two research cards side by side (Figma layout) */
.board-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--pair-gap); align-items: stretch; }
.board-cards > .board-card { min-width: 0; }
.rev .case-sec__body .board-cards .board-card + .board-card { margin-top: 0; }
@media (max-width: 760px) { .board-cards { grid-template-columns: 1fr; } }
/* board bleeds to the card's right and bottom edge, only the top-left corner is rounded (Figma) */
.board-card__img { display: block; width: 100%; max-width: none; height: auto; margin: 30px 0 0 0; border: 1px solid var(--card-line); border-radius: 14px; box-shadow: none; }
/* media wrapper: grows to fill the card, image covers it from the top-left */
.board-card__media { position: relative; width: 100%; flex: 1 1 auto; min-height: 0; margin-top: 30px; border-radius: 14px; overflow: hidden; border: 1px solid var(--card-line); }
.board-card__media .board-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; margin: 0; border: 0; border-radius: 0; }
/* horizontal card: text on the left, board bleeding to the right edge (Figma 1205x590),
   dark blue-gray surface with an inset shadow */
.board-card--row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 11fr); gap: clamp(20px, 3vw, 50px); align-items: start; padding-right: 0; background: var(--grad-slate); }
.rev .case-sec__body .board-card--row .board-card__eyebrow { color: #d7d7d9; }
.rev .case-sec__body .board-card--row .board-card__title { color: #ededee; }
.board-card--row .board-card__img { width: 100%; max-width: none; margin: 0; border: 1px solid #e2e2e5; border-right: 0; border-bottom: 0; border-radius: var(--r-card) 0 0 var(--r-card); }
@media (max-width: 760px) { .board-card--row { grid-template-columns: 1fr; padding-right: var(--bcp); } .board-card--row .board-card__img { border: 1px solid #e2e2e5; border-radius: 24px; } }
/* green variant: matches the 3Commas header cover (mint), dark text for contrast */
.board-card--row.board-card--green { background: var(--grad-mint); }
.rev .case-sec__body .board-card--row.board-card--green .board-card__eyebrow { color: #3f7566; }
.rev .case-sec__body .board-card--row.board-card--green .board-card__title { color: #123a2e; }

/* paired cards: equal height (Figma 595x877 each), boards fill down and crop at the card edge */
.board-cards .board-card { min-height: 0; }
@media (max-width: 760px) { .board-cards { aspect-ratio: auto; } }

/* case hero v2: info card + cover, theme-aware */
.chero { display: grid; grid-template-columns: 487fr 703fr; gap: 10px; padding: clamp(22px, 4vh, 40px) 0 clamp(18px, 3vh, 30px); }
.chero__card { display: flex; flex-direction: column; background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--r-card); padding: clamp(32px, 4.2vw, 50px); min-height: min(62vw, 750px); }
.chero__icon { width: clamp(84px, 9vw, 109px); height: clamp(84px, 9vw, 109px); flex: none; }
.chero__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.chero__co { margin-top: 40px; font-size: 16px; font-weight: 400; line-height: 1.2; color: var(--card-sub); }
.chero__title { margin-top: 20px; font-size: clamp(28px, 3.4vw, 40px); font-weight: 500; letter-spacing: 0; line-height: 1.2; color: var(--card-ink); }
.chero__facts { margin-top: auto; padding-top: 40px; display: grid; gap: 40px; }
.chero__fact dt { font-size: 16px; font-weight: 400; line-height: 1.2; color: var(--card-sub); }
.chero__fact dd { margin-top: 6px; font-size: 20px; font-weight: 500; line-height: 1.2; color: var(--card-ink); display: flex; justify-content: space-between; gap: 16px; }
/* multiple result metrics stacked in one fact */
.chero__fact dd.chero__res { flex-direction: column; gap: 12px; font-size: 16px; }
.chero__fact dd.chero__res > span { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.chero__fact dd.chero__res > span > :first-child { color: var(--card-sub); font-weight: 400; }
.chero__fact dd.chero__res > span > :last-child { font-weight: 600; white-space: nowrap; }
.chero__cover { position: relative; border-radius: var(--r-card); overflow: hidden; min-height: 320px; background: var(--grad-mint); }
.chero__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
.chero__cover--blue { background: var(--grad-slate); }
.chero__cover--warm { background: var(--grad-warm); }
.chero__cover--red { background: var(--grad-red); }
/* code-built cover composition: brand gradient token + positioned inner-screenshot PNGs
   (Figma 954-26013). Each .cvr-l carries inline left/top/width as % of the cover box. */
/* composition cover takes its Figma frame aspect so % layer coords map 1:1 */
.chero__cover--comp:not(.branch__media) { align-self: start; }
/* case hero: the cover matches the text card height exactly (the card is the anchor);
   the inline aspect-ratio stays as the mobile fallback only */
@media (min-width: 781px) {
  .chero > .chero__cover--comp { align-self: stretch; aspect-ratio: auto !important; }
}
.chero:has(.chero__cover--comp) .chero__card { min-height: 0; }
.chero__cover--comp .cvr-l { position: absolute; inset: auto; display: block; width: auto; max-width: none; height: auto; max-height: none; border-radius: 0; box-shadow: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; pointer-events: none; }
.chero__cover--comp .cvr-l--pop { border-radius: 10px; box-shadow: 0 16px 44px rgba(0, 0, 0, 0.20); }
.chero__cover--comp .cvr-l--phone { border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.34); }
.chero__cover--comp .cvr-l--crop { object-fit: cover; }
.chero__cover--comp .cvr-l--frame { overflow: hidden; }
.chero__cover--comp .cvr-l--frame img { position: absolute; max-width: none; max-height: none; display: block; -webkit-user-drag: none; }
/* composition reused as an experience-card cover on the home page: fill, no inner hover-zoom */
.xp-cover.chero__cover--comp { padding: 0; }
.xp-cover.chero__cover--comp:hover .cvr-l { transform: none; }
/* light hover on the project covers (Experience section and Revolut hub) — subtle image scale, triggered from anywhere on the card (text side or illustration) */
.xp-cover img, .xp-cover .cvr-flat { transition: transform 0.5s var(--ease); will-change: transform; }
.xp-chero:hover .xp-cover img, .xp-chero:hover .xp-cover .cvr-flat { transform: scale(1.02); }
.branch__media .cvr-flat { transition: transform 0.5s var(--ease); }
.branch__card:hover .branch__media img, .branch__card:hover .branch__media .cvr-flat { transform: scale(1.02); }
.chero__cover--mint { background: var(--grad-mint); }
/* composition reused as a hub preview: portrait media, no zoom on hover */
.branch__media.chero__cover--comp { aspect-ratio: 436 / 520; border-bottom: 0; }
.branch__card:hover .branch__media.chero__cover--comp .cvr-l { transform: none; }
/* framed cover: a flat product screen floating on a brand-matched gradient */
.chero__cover--frame { display: grid; place-items: center; padding: clamp(26px, 4vw, 54px); }
.chero__cover--frame img { position: static; inset: auto; width: 100%; height: auto; max-height: 100%; object-fit: contain; border-radius: 16px; box-shadow: 0 22px 55px rgba(0, 0, 0, 0.22); }
/* Figma crop: the phone runs larger than the cover, bleeding left/right/bottom */
.chero__cover--blue:not(.chero__cover--comp) img { inset: auto; left: -14.65%; top: 1.4%; width: 131.2%; max-width: none; height: auto; object-fit: unset; }
/* flattened cover art: one pre-composed image fills the box, whatever its height */
.cvr-flat { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center top; display: block; border-radius: 0; box-shadow: none; -webkit-user-drag: none; user-select: none; }
@media (max-width: 780px) { .chero { grid-template-columns: 1fr; } .chero__cover { min-height: 0; aspect-ratio: 16 / 11; } }

/* reveal: animated expander for research artifacts.
   A plain text toggler with a trailing chevron; only the chevron flips.
   The panel below unfolds with a long, soft ease. */
.reveal { margin-top: 24px; }
.reveal__bar { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 16px; font-weight: 600; color: var(--text); background: transparent; padding: 4px 0; border: 0; cursor: pointer; text-align: left; transition: color 0.2s var(--ease); }
.reveal__bar:hover { color: var(--text-2); }
.reveal__bar .cv { flex: none; transition: transform 0.28s var(--ease); }
.reveal.open .reveal__bar .cv { transform: rotate(180deg); }
.reveal__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s var(--ease); }
.reveal.open .reveal__panel { grid-template-rows: 1fr; }
/* height opens fast so the content (tables included) is at full size right away, then the whole block fades in softly as one ready unit */
.reveal__body { overflow: hidden; min-height: 0; display: grid; gap: 20px; align-content: start; opacity: 0; transform: translateY(6px); transition: opacity 0.45s ease 0.06s, transform 0.5s var(--ease) 0.06s; }
.reveal.open .reveal__body { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal__panel, .reveal__body, .reveal__bar .cv { transition: none !important; } }

/* case-study screen galleries: a row of process/flow screens */
.shots { display: grid; gap: 22px; margin-top: 24px; }
.shots--flow { grid-template-columns: repeat(3, 1fr); }
.shot { margin: 0; }
.shot img { width: 100%; height: auto; display: block; border-radius: var(--shot-radius); box-shadow: var(--shot-shadow); transition: box-shadow 0.2s var(--ease); }
.shot img:hover { box-shadow: 0 0 0 1px var(--line-2); }
.shot figcaption { margin-top: 10px; font-size: 14px; font-weight: 400; color: var(--card-sub); text-align: center; }
.no-save { -webkit-user-drag: none; -khtml-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; pointer-events: none; }
.shots .shot img.no-save { border-radius: 0; box-shadow: none; }
.shots--phones { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px; }
.shots--phones .shot { flex: 1 1 0; min-width: 0; }
.shots--phones .shot img { width: 100%; height: auto; border-radius: clamp(18px, 1.8vw, 26px); }
/* two flattened state boards side by side, case width (≤1200px);
   on standard case pages the pair breaks out over the label column */
.shots--duo { grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 1200px; }
.shots--duo .shot img { border-radius: 30px; box-shadow: none; }
/* 2-up board grid: gradient boards on the page bg, 10px gutters everywhere */
.shots--boards { grid-template-columns: repeat(2, 1fr); gap: var(--pair-gap); }
.shots--boards .shot { position: relative; }
.shots--boards .shot > img { border-radius: var(--r-card); box-shadow: 0 0 0 1px var(--line); cursor: default; }
.rev .case-sec__body .shots.shots--boards + .shots.shots--boards { margin-top: var(--pair-gap); }
@media (max-width: 640px) { .shots--boards { grid-template-columns: 1fr; } }
/* mobile boards, composed in code (Figma 979-26148 / 979-26158): a slate board,
   a framed phone that lifts on hover, and on the second board a floating token row */
.mboard { overflow: hidden; border-radius: var(--r-card); aspect-ratio: 595 / 1028; container-type: inline-size; }
.mboard--a { background: linear-gradient(225.783deg, #7182A1 7.44%, #303742 134.24%); }
.mboard--b { background: linear-gradient(125.461deg, #7182A1 12.53%, #303742 106.46%); }
.mboard__dev { position: absolute; left: 50%; top: 4.961%; width: 74.958%; transform: translateX(-50%); border-radius: 9.2437cqi; cursor: zoom-in; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.mboard--a .mboard__dev { box-shadow: 0 5.7143cqi 16.8067cqi rgba(12, 25, 61, 0.3); }
.mboard--b .mboard__dev { box-shadow: 0 5.7143cqi 13.4454cqi rgba(12, 25, 61, 0.2); }
/* as in Figma: the screen fills the whole box at the outer radius, the 8px frame
   is an inside stroke painted on top — the screenshot's own edge hides under it */
.mboard__dev img, .mboard__dev img:hover { display: block; width: 100%; aspect-ratio: 446 / 923; object-fit: cover; border-radius: 9.2437cqi; box-shadow: none; }
.mboard__dev::after { content: ""; position: absolute; inset: -1.3445cqi; border: 1.3445cqi solid #3e465a; border-radius: 10.588cqi; pointer-events: none; }
.mboard__dev:hover { transform: translateX(-50%) translateY(-4px); }
.mboard--a .mboard__dev:hover { box-shadow: 0 6.7227cqi 18.4874cqi rgba(12, 25, 61, 0.38); }
.mboard--b .mboard__dev:hover { box-shadow: 0 6.7227cqi 15.1261cqi rgba(12, 25, 61, 0.28); }
.mboard img.mboard__row { position: absolute; left: 50%; top: 14.3%; width: 84.874%; height: auto; transform: translateX(-50%); border-radius: 0; box-shadow: none; pointer-events: none; filter: drop-shadow(0 3.3613cqi 4.2017cqi rgba(18, 20, 66, 0.07)); transition: transform 0.4s var(--ease); }
.mboard .mboard__dev:hover + img.mboard__row { transform: translateX(-50%) translateY(-4px); }
/* "Sending flow" banner (Figma 979-26178): a slate board that links to the Send case —
   two framed phones on the left (screens under an inside-stroke ring), stats on the right */
.sflow { position: relative; display: block; margin-top: var(--block-gap); overflow: hidden; border-radius: var(--r-card); aspect-ratio: 1200 / 550; background: linear-gradient(159.572deg, #7182A1 12.53%, #303742 106.46%); container-type: inline-size; color: #fff; }
.sflow, .sflow * { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.sflow__ph { position: absolute; border-radius: 3.3333cqi; box-shadow: 0 2.8333cqi 8.3333cqi rgba(12, 25, 61, 0.3); }
.sflow__ph img { display: block; width: 100%; height: auto; object-fit: cover; object-position: center top; border-radius: 3.3333cqi; }
.sflow__ph::after { content: ""; position: absolute; inset: -0.6667cqi; border: 0.6667cqi solid #3e465a; border-radius: 4cqi; pointer-events: none; }
/* inline chip for TLDs / handles ("."-prefixed tokens): a light pill that lifts the token out of prose */
.tld { display: inline-block; padding: 0.16em 0.22em; margin: 0 0.06em; border-radius: 8px; line-height: 1.1; background: color-mix(in oklab, currentColor 8%, transparent); font-weight: 500; letter-spacing: -0.005em; }
[data-theme="dark"] .tld { background: color-mix(in oklab, currentColor 14%, transparent); }
.sflow__ph--front { left: 6.667%; top: 9.091%; width: 33.667%; }
.sflow__ph--front img { aspect-ratio: 404 / 836; }
.sflow__ph--back { left: 33.833%; top: 19.636%; width: 26.583%; opacity: 0.8; }
.sflow__ph--back img { aspect-ratio: 319 / 660; }
.sflow__txt { position: absolute; left: 67.333%; top: 18.182%; }
.sflow__title { font-size: 3.3333cqi; font-weight: 500; line-height: 1.2; }
.sflow__stat { position: absolute; left: 67.333%; top: 40%; }
.sflow__nums { display: flex; align-items: baseline; gap: 0.9167cqi; line-height: 1.21; }
.sflow__was { font-size: 3.3333cqi; font-weight: 500; }
.sflow__now { font-size: 6.6667cqi; font-weight: 500; }
.sflow__sub { display: block; margin-top: 0.4cqi; font-size: 1.3333cqi; color: #a8a8b2; }
.sflow__cta { position: absolute; left: 67.333%; top: 78.364%; font-size: 1.3333cqi; font-weight: 500; }
.sflow__cta .ar { display: inline-block; transition: transform 0.25s var(--ease); }
.sflow:hover .sflow__cta .ar { transform: translate(2px, -2px); }
/* the whole Send-flow group holds together at the 10px pair gap */
.rev .case-sec__body .shots.shots--boards + .board-card { margin-top: var(--pair-gap); }
.rev .case-sec__body .board-card + .sflow { margin-top: var(--pair-gap); }
/* PIK home boards (Figma 990-26921): a light before/after board and a peach board
   with the onboarding phone over a cropped dashboard; only the screens zoom */
.pboards { display: grid; grid-template-columns: 393fr 797fr; gap: var(--pair-gap); margin-top: 26px; }
.pboard { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-card); border: 1px solid #e2e2e5; container-type: inline-size; }
.pboard, .pboard * { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.pboard--home { background: #f4f4f5; aspect-ratio: 393 / 676; }
.pboard--onb { background: linear-gradient(145.424deg, #FFD8C4 12.53%, #FF9469 106.46%); aspect-ratio: 797 / 676; border: 0; }
.rev .case-sec__body p.pboard__eyebrow { position: absolute; left: 0; right: 0; top: 7.25%; margin: 0; max-width: none; text-align: center; font-size: 5.0891cqi; line-height: 1.2; color: #a8a8b2; }
.rev .case-sec__body p.pboard__title { position: absolute; left: 50%; top: 11.98%; width: 88.55%; margin: 0; max-width: none; transform: translateX(-50%); text-align: center; font-size: 5.0891cqi; font-weight: 500; line-height: 1.2; color: #272732; }
/* the working before/after pill, pinned where Figma bakes it; fixed light colours on the fixed-light board */
.pboard .ba__bar.pboard__bar { position: absolute; left: 50%; top: 27.07%; transform: translateX(-50%); z-index: 2; margin: 0; background: #fff; border-color: #e2e2e5; }
.pboard__bar .ba__tab { color: #7c7c85; }
.pboard__bar .ba__tab.is-on { background: #18181b; color: #fff; }
.pboard__z { cursor: zoom-in; transition: transform 0.4s var(--ease); }
.pboard__z:hover { transform: translateY(-4px); }
/* light-board phone slot: a bare screen with the fixed hairline; the Home "after" export
   carries the Figma shadow in baked 40px margins, so its offsets compensate and framing resets */
.pboard__phone { position: absolute; left: 5.896%; top: 41%; width: 88.55%; height: auto; border: 1px solid #e2e2e5; border-radius: 10.2cqi; box-shadow: 0 5.0891cqi 10.1781cqi rgba(18, 20, 66, 0.03); }
.pboard--baked .pboard__phone[data-ba-view="after"] { left: -4.283%; top: 37.6%; width: 108.906%; max-width: none; border: 0; border-radius: 0; box-shadow: none; }
.pboard__phone[hidden] { display: none; }
/* a light board without the segment control lifts the phone to where the pill sat */
.pboard--nobar .pboard__phone { top: 27.07%; }
/* peach board: cropped dashboard behind (40px shadow margins baked), onboarding phone in front */
.pboard__dash { position: absolute; left: 45.65%; top: -72.04%; width: 55.207%; height: auto; }
.pboard__onbph { position: absolute; left: 4.119%; top: 24.26%; width: 50.188%; height: auto; }
/* generic peach-board screens, borderless like the etalon: a front shot and a washed
   cropped one behind (image at .8 over a white plate, the whole plate at .92 — Figma 990-26907) */
.pboard img.pboard__fr { position: absolute; height: auto; border-radius: 5.5cqi; box-shadow: 0 2.509cqi 5.0188cqi rgba(18, 20, 66, 0.03); left: 4.119%; top: 24.26%; width: 50.188%; z-index: 1; overflow: hidden; }
.pboard .pboard__crw { position: absolute; left: 50.67%; width: 45.169%; opacity: 0.92; background: #fff; border-radius: 5.5cqi; box-shadow: 0 2.509cqi 5.0188cqi rgba(18, 20, 66, 0.03); overflow: hidden; transition: transform 0.4s var(--ease); }
.pboard .pboard__crw img { display: block; width: 100%; height: auto; opacity: 0.8; border-radius: 5.5cqi; cursor: zoom-in; }
.pboard .pboard__crw .pboard__z:hover { transform: none; }
.pboard .pboard__crw:hover { transform: translateY(-4px); }
/* the segment pill scales with the board, as baked in the etalon (147x36 at 393) */
.pboard__bar.ba__bar { padding: 0.7634cqi; gap: 0.5089cqi; }
.pboard__bar .ba__tab { font-size: 3.3079cqi; padding: 1.7812cqi 4.0712cqi; }
@media (max-width: 640px) { .pboards { grid-template-columns: 1fr; } .pboard { border-radius: 20px; } }
@media (min-width: 761px) {
  .shots--duo { width: calc(100% + 200px + clamp(34px, 5vw, 72px)); margin-left: calc(-200px - clamp(34px, 5vw, 72px)); }
  .rev .shots--duo { width: 100%; margin-left: 0; }
}
@media (max-width: 620px) { .shots--duo { grid-template-columns: 1fr; } }

/* phone fan (Figma 952-23831): four app screens — two prominent in front,
   two smaller dimmed ones flanking behind. Click any to view it full. */
.phonefan { position: relative; width: 100%; margin: clamp(20px, 2.6vw, 34px) auto 0; border-radius: var(--r-card); background: var(--grad-mint); display: flex; align-items: flex-start; gap: 20px; padding: clamp(20px, 3vw, 40px); }
.rev .case-body .case-sec__body .ba + .phonefan { margin-top: 10px; }
.phonefan--slate { background: var(--grad-slate); }
.phonefan .shot { flex: 1 1 0; min-width: 0; margin: 0; }
.phonefan .shot img { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid #e2e2e5; box-shadow: 0 12px 44px rgba(45, 113, 110, 0.21); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.phonefan .shot:hover img { transform: translateY(-4px); box-shadow: 0 20px 52px rgba(45, 113, 110, 0.32); }
/* proper "fan" layout: absolute-positioned phone tiles on an aspect-ratio board (used by the DCA deep-dive) */
.phonefan:has(.phonefan__item) { display: block; aspect-ratio: 1200 / 717; padding: 0; box-shadow: inset 10px 10px 30px rgba(0, 0, 0, 0.2); }
.phonefan__item { position: absolute; margin: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--card-line); box-shadow: 0 12px 44px rgba(45, 113, 110, 0.21); cursor: zoom-in; transition: transform 0.4s var(--ease), opacity 0.35s var(--ease), box-shadow 0.4s var(--ease); }
.phonefan__item img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.phonefan__item--back { opacity: 0.9; z-index: 1; }
.phonefan__item--front { z-index: 2; }
.phonefan__item:nth-child(1) { left: 6.167%; top: 11.02%; width: 21%; height: 77.96%; }
.phonefan__item:nth-child(2) { left: 24.833%; top: 6.97%; width: 23.167%; height: 86.05%; }
.phonefan__item:nth-child(3) { left: 52%; top: 6.97%; width: 23.167%; height: 86.05%; }
.phonefan__item:nth-child(4) { left: 71.75%; top: 11.02%; width: 21%; height: 77.96%; }
.phonefan__item:hover:not([style*="cursor: default"]) { opacity: 1; transform: translateY(-6px); box-shadow: 0 22px 56px rgba(45, 113, 110, 0.34); z-index: 3; }
@media (max-width: 680px) {
  .phonefan:has(.phonefan__item) { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 460px; padding: clamp(16px, 4vw, 24px); box-shadow: none; }
  .phonefan:has(.phonefan__item) .phonefan__item,
  .phonefan:has(.phonefan__item) .phonefan__item:nth-child(1),
  .phonefan:has(.phonefan__item) .phonefan__item:nth-child(2),
  .phonefan:has(.phonefan__item) .phonefan__item:nth-child(3),
  .phonefan:has(.phonefan__item) .phonefan__item:nth-child(4) { position: static; left: auto; top: auto; width: auto; height: auto; opacity: 1; transform: none; }
  .phonefan:has(.phonefan__item) .phonefan__item img { height: auto; aspect-ratio: 9 / 20; }
}

@media (max-width: 680px) {
  .phonefan { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 460px; padding: clamp(16px, 4vw, 24px); }
}
/* problem split: text beside a graphic block, aligned to the top (Figma 953-25675) */
/* illustration on the left, sized to sit level with the text on the right */
.prob-split { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.prob-split .probfig { order: -1; align-self: center; }
.prob-split__text > :first-child { margin-top: 0; }
@media (max-width: 760px) { .prob-split { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 36px); } }
/* the graphic block: two old Send screens with callout labels, on a card */
.probfig { position: relative; width: 100%; aspect-ratio: 550 / 513; background: var(--card-bg); border: 1px solid var(--card-line); border-radius: clamp(24px, 3vw, 30px); }
.probfig__screen { position: absolute; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.22); }
.probfig__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.probfig__screen--action { left: 9.09%; top: 9.75%; width: 39.09%; height: 68.81%; }
.probfig__screen--hierarchy { left: 51.82%; top: 18.32%; width: 39.09%; height: 68.81%; }
.probfig__label { position: absolute; font-size: clamp(13px, 1.05vw, 16px); letter-spacing: -0.005em; color: var(--card-sub); white-space: nowrap; }
.probfig__label--hierarchy { left: 71.4%; top: 9.75%; transform: translateX(-50%); }
.probfig__label--action { left: 28.6%; top: 82.46%; transform: translateX(-50%); }
@media (max-width: 600px) { .probfig { border-radius: 20px; } }

.figure--narrow { max-width: 640px; }
.figure--phone { max-width: 300px; }
@media (max-width: 640px) { .shots--flow { grid-template-columns: 1fr; } }

/* before / after — a self-contained card (Figma 951-23809): a centered toggle
   and the screen with a project-tinted shadow (greenish for 3Commas by default;
   each project sets its own via --ba-tint). */
.ba { --ba-tint: rgba(45, 113, 110, 0.24); margin-top: 24px; background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--r-card); padding: clamp(28px, 3.8vw, 48px) clamp(28px, 3.8vw, 48px) 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ba__cap { max-width: 1000px; margin-bottom: clamp(22px, 2.6vw, 32px); }
.ba__cap-label { display: block; font-size: clamp(15px, 1.2vw, 20px); font-weight: 400; color: var(--card-sub); }
.ba__cap-text { display: block; margin-top: clamp(6px, 0.8vw, 10px); font-size: clamp(16px, 1.35vw, 20px); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--card-ink); text-wrap: pretty; }
.ba__bar { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: clamp(22px, 2.6vw, 32px); background: var(--bg); border: 1px solid var(--card-line); border-radius: 999px; }
.ba__tab { appearance: none; border: 0; background: transparent; color: var(--text-3); font: inherit; font-size: 13px; font-weight: 550; line-height: 1; padding: 7px 16px; border-radius: 999px; cursor: pointer; }
.ba__tab.is-on { background: var(--text); color: var(--bg); }
/* Safari draws the global focus ring on plain clicks — the pressed state already shows itself */
.ba__tab:focus-visible { outline: none; }
.ba__stage { width: 100%; }
.ba__img { display: block; width: 100%; height: auto; border-radius: 14px 14px 0 0; box-shadow: 0 24px 46px -12px var(--ba-tint); }
.ba__img[hidden] { display: none; }
/* per-project shadow tints */
.ba--warm { --ba-tint: rgba(232, 116, 60, 0.26); }
.ba--blue { --ba-tint: rgba(34, 89, 242, 0.20); }
/* phone-format before/after: a narrower centered card holding one portrait screen */
/* in-body sub-heading (e.g. "And the transaction states:") */
.rev .case-body .case-sec__body p.case-sub { margin-top: var(--block-gap); font-size: clamp(17px, 1.4vw, 20px); font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
/* a big lead mid-section: intro-sized type with a section-sized breath above */
.rev .case-body .case-sec__body p.case-lead { margin-top: clamp(72px, 10vh, 104px); max-width: 1100px; font-size: clamp(24px, 3vw, 38px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--text); }
.rev .case-body .case-sec__body .case-lead + :is(.shots, .shots--duo, .ba, .figure, .board-card, .board-cards, .phonefan) { margin-top: var(--block-gap); }
/* a subhead is glued to the illustration it introduces */
.rev .case-body .case-sec__body .case-sub + :is(.shots, .shots--duo, .ba, .figure, .board-card, .board-cards, .phonefan) { margin-top: 14px; }

/* board gallery: the ba board with a quiet slider instead of a segmented control.
   Slides sit on the board bottom edge; a taller screen shrinks to the stage
   height and centers, so the shadow always hugs the visible sheet. */
.gal__nav { display: inline-flex; align-items: center; gap: 16px; margin-bottom: clamp(22px, 2.6vw, 32px); }
.gal__btn { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--card-line); background: var(--bg); color: var(--text); cursor: pointer; transition: border-color 0.2s var(--ease); }
.gal__btn:hover { border-color: var(--line-2); }
.gal__dots { display: inline-flex; gap: 8px; }
.gal__dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: var(--line-2); cursor: pointer; transition: background 0.25s var(--ease), transform 0.25s var(--ease); }
.gal__dot.is-on { background: var(--text); transform: scale(1.2); }
.gal__stage { aspect-ratio: 2104 / 1162; overflow: hidden; }
.gal__track { display: flex; height: 100%; transition: transform 0.55s var(--ease); }
.gal__slide { flex: 0 0 100%; min-width: 0; margin: 0; display: flex; justify-content: center; align-items: flex-start; }
.gal__slide img { width: 100%; height: auto; border-radius: 14px 14px 0 0; box-shadow: 0 24px 46px -12px var(--ba-tint); cursor: zoom-in; }
@media (prefers-reduced-motion: reduce) { .gal__track { transition: none; } }

/* even phone rows: hard-equal grid columns, one shared aspect per row (cropped from the top);
   a before/after board can sit in the row as an equal column */
.shots--even { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.shots--even .shot { flex: none; }
.shots--even .shot img { width: 100%; height: auto; }
.shots--even .ba--phone { max-width: none; margin: 0; min-width: 0; }
@media (max-width: 640px) { .shots--even { grid-template-columns: 1fr; } }

/* hub case rows: the artwork leads — the cover column runs wider than the text card */
.rev .xp-chero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.rev .xp-chero:nth-child(even) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 780px) { .rev .xp-chero, .rev .xp-chero:nth-child(even) { grid-template-columns: 1fr; } }

/* case intro: the overview paragraph as a large statement, no section label */
.case-sec--intro { grid-template-columns: 1fr; }
.case-body .case-sec__body p.case-intro { max-width: 1100px; font-size: clamp(24px, 3vw, 38px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--text); }
.case-body .case-sec__body p.case-intro b { font-weight: 600; color: var(--text); }

.ba--phone { max-width: 380px; margin-left: auto; margin-right: auto; padding: clamp(22px, 4vw, 32px) clamp(22px, 4vw, 32px) 0; }
.ba--phone .ba__stage { position: relative; overflow: hidden; border-radius: 22px 22px 0 0; box-shadow: 0 24px 46px -12px var(--ba-tint); max-width: 320px; margin: 0 auto; }
.ba--phone .ba__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 0; box-shadow: none; }

/* prev / next */
.casenav { display: flex; justify-content: space-between; gap: 20px; padding: 36px 0 52px; }
.casenav a { font-size: 15px; color: var(--text-2); transition: color 0.2s var(--ease); }
.casenav a:hover { color: var(--text); }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .block, .case-sec { grid-template-columns: 1fr; gap: 14px; }
  .block__label, .case-sec__label { padding-top: 0; position: static; }
  .case-meta { grid-template-columns: 1fr 1fr; gap: 20px; }
  .quotes { grid-template-columns: 1fr; }
  .wrap { padding: 0 22px; }
  /* .block is also .wrap, whose mobile padding zeroes the block's vertical
     padding — restore comfortable top/bottom spacing between blocks. */
  .block { padding-top: clamp(30px, 6vh, 46px); padding-bottom: clamp(30px, 6vh, 46px); }
  .work { grid-template-columns: 1fr; }
  .work__when { text-align: left; padding-top: 0; }

  /* comfortable tap targets */
  .toggle { width: 40px; height: 40px; }
  .masthead__links a { padding: 11px 16px; }

  /* nav collapses into a dropdown */
  .navtoggle { display: grid; }
  .topbar__links {
    position: absolute; top: calc(100% + 8px); right: 22px;
    flex-direction: column; gap: 2px; min-width: 208px; padding: 8px;
    border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  }
  .topbar__links.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .topbar__links a { padding: 11px 14px; font-size: 15px; border-radius: 9px; color: var(--text); }
  .topbar__links a:hover, .topbar__links a.active { background: var(--surface); color: var(--text); }
}
/* tablet: keep case meta and 3-up impact metrics from being crushed by the
   200px case-sec label column reappearing above 760px (placed after base rules) */
@media (max-width: 900px) {
  .case-meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .case-meta { grid-template-columns: 1fr; }
}

/* =========================================================
   WORK COVERS + LAYOUT VARIANTS
   ========================================================= */
.cover { display: block; color: inherit; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); transition: border-color 0.25s var(--ease), transform 0.3s var(--ease); }
.cover:hover { border-color: var(--line-2); }
.cover__media { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--surface); background-image: radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0); background-size: 20px 20px; }
.cover--be .cover__media { aspect-ratio: 404 / 316; }
.cover__cap { display: flex; }
.cover__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease); }
/* theme-specific covers: light by default, dark under [data-theme="dark"] */
.cover__media img.cover-dark { display: none; }
[data-theme="dark"] .cover__media img.cover-light { display: none; }
[data-theme="dark"] .cover__media img.cover-dark { display: block; }
.sub-label { font-size: 12px; font-weight: 550; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin: 26px 0 14px; }
.cover__cap { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-top: 1px solid var(--line); }
.cover__cap b { font-size: 15px; font-weight: 600; }
.cover__cap .m { font-size: 12px; color: var(--text-3); }
.cover__cap .ar { margin-left: auto; color: var(--text-3); transition: transform 0.25s var(--ease); }
.cover:hover .cover__cap .ar { transform: translate(2px, -2px); }
.cover:hover .cover__media img, .cover:focus-visible .cover__media img { transform: scale(1.03); }

/* experience: two side-by-side blocks (text card + cover), each its own hover,
   both linking to the case. Layout alternates text-photo / photo-text. */
.xpwrap { display: grid; gap: 14px; }
.xp-chero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.xp-chero:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.xp-chero:nth-child(even) .xp-card { order: 2; }
.xp-chero:nth-child(even) .xp-cover { order: 1; }
/* text card */
.xp-card { min-height: 0; padding: clamp(26px, 2.6vw, 38px); color: inherit; text-decoration: none; transition: transform 0.4s var(--ease), border-color 0.25s var(--ease), box-shadow 0.4s var(--ease); }
.xp-chero:hover .xp-card { border-color: var(--line-2); }
.xp-card .xp__role { font-size: clamp(17px, 1.5vw, 19px); color: var(--card-ink); }
.xp-card .xp__role .co { color: var(--card-sub); font-weight: 450; }
.xp-card .xp__when { color: var(--card-sub); }
.xp-card .xp__loc { margin-top: 4px; color: var(--card-sub); }
.xp-card .xp__points { margin-top: 18px; gap: 6px; }
.xp-card .xp__points li { color: var(--card-ink); font-size: 15px; line-height: 1.45; }
.xp-card .xp__points li::before { background: var(--card-sub); }
.xp-card .xp__points b { color: var(--card-ink); font-weight: 600; }
.xp-chero__go { margin-top: 26px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--card-ink); }
.xp-chero__go .ar { color: var(--card-sub); transition: transform 0.25s var(--ease); }
.xp-chero:hover .xp-chero__go .ar { transform: translate(2px, -2px); }
/* cover: whole screenshot floating on the brand gradient */
.xp-cover { min-height: 0; display: grid; place-items: center; padding: clamp(22px, 2.4vw, 40px); text-decoration: none; overflow: hidden; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.xp-cover img { position: static; inset: auto; left: auto; top: auto; width: 100%; height: auto; max-height: 100%; object-fit: contain; border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22); transition: transform 0.6s var(--ease); }
@media (max-width: 780px) { .xp-chero, .xp-chero:nth-child(even) { grid-template-columns: 1fr; } .xp-chero:nth-child(even) .xp-card { order: 0; } .xp-chero:nth-child(even) .xp-cover { order: 0; } }

/* device frames for the experience covers — one system, two frames.
   Browser chrome is theme-aware via tokens; the phone bezel is a constant
   hardware material (a real device edge is dark hardware, not a themed UI). */
.dv { position: relative; display: block; margin: 0 auto; }
.xp-cover:has(.dv) { padding: clamp(24px, 3vw, 48px); }
/* the preview panel matches the text-card height (the text card is the anchor),
   and the device fills that height — so a shorter card never leaves the preview
   floating, and a taller card never stretches empty space inside the card.
   The screen image is absolute so it never inflates the row past the card. */
.xp-cover .dv { height: 100%; }
.xp-cover .dv--phone { height: 100%; min-height: 0; }
.xp-cover:has(.dv--phone) { padding: clamp(16px, 2vw, 30px); }
.xp-cover .dv--win { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.xp-cover .dv--win .dv__screen { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
.xp-cover .dv__screen { position: relative; }
/* browser / window frame (desktop web shots) */
.dv--win { width: 100%; max-width: 600px; border-radius: 16px; background: var(--card-bg); border: 1px solid var(--line); overflow: hidden; box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.45), 0 10px 22px -14px rgba(0, 0, 0, 0.30); }
.dv--win .dv__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 44px; padding: 0 16px; background: var(--card-bg); border-bottom: 1px solid var(--line); }
.dv__dots { display: flex; gap: 8px; justify-self: start; }
.dv__dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); }
.dv__addr { justify-self: center; display: inline-flex; align-items: center; gap: 6px; max-width: 260px; padding: 4px 12px; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; color: var(--text-3); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; white-space: nowrap; overflow: hidden; }
.dv__addr span { overflow: hidden; text-overflow: ellipsis; }
.dv__lock { flex: none; fill: var(--text-3); opacity: 0.7; }
.dv--win .dv__screen { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg); }
/* phone frame (portrait mobile shots): graphite body, concentric radii */
.dv--phone { height: clamp(300px, 33vw, 470px); aspect-ratio: 9 / 19; max-width: 100%; padding: 11px; border-radius: 44px; background: linear-gradient(155deg, #34343a 0%, #17171a 46%, #0d0d10 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10) inset, 0 0 0 1.5px rgba(0, 0, 0, 0.50), 0 36px 72px -28px rgba(0, 0, 0, 0.55), 0 12px 26px -16px rgba(0, 0, 0, 0.42); }
.dv--phone .dv__screen { position: relative; display: block; width: 100%; height: 100%; border-radius: 33px; overflow: hidden; background: #000; }
.dv--phone .dv__island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 34%; max-width: 112px; height: 26px; background: #000; border-radius: 14px; z-index: 2; }
/* framed screenshot: fills its screen, beats the legacy cover img rules */
.xp-cover .dv__screen img { position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center top; border-radius: 0; box-shadow: none; display: block; }
@media (max-width: 780px) {
  .xp-cover:has(.dv--phone) { aspect-ratio: 4 / 5; }
  .xp-cover:has(.dv--win) { aspect-ratio: 16 / 11; }
  .dv--phone { height: clamp(300px, 60vw, 420px); }
}

/* UI & visual: borderless media gallery (Apple product-gallery pattern) */
.gv-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 32px); margin-top: clamp(24px, 3vw, 32px); }
.gv-item { display: block; text-decoration: none; color: inherit; }
/* the image is the object: rounded, borderless, a hairline inset ring keeps
   light shots defined on white and dark shots on black without reading as a box */
.gv-media { display: block; position: relative; aspect-ratio: 404 / 316; border-radius: 24px; overflow: hidden; background: var(--surface); }
.gv-media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--card-line); pointer-events: none; transition: box-shadow 0.2s var(--ease); }
.gv-media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.001); transition: transform 0.6s var(--ease); }
/* caption as clean text below the image, not a bordered bar */
.gv-cap { display: block; padding: 16px 4px 0; }
.gv-title { display: inline-flex; align-items: baseline; gap: 6px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.gv-sub { display: block; margin-top: 3px; font-size: 14px; color: var(--text-3); }
.gv-arrow { font-size: 0.82em; color: var(--text-3); transition: transform 0.3s var(--ease), color 0.25s var(--ease); }
.gv-item:hover .gv-media::after, .gv-item:focus-visible .gv-media::after { box-shadow: inset 0 0 0 1px var(--line-2); }
.gv-item:hover .gv-arrow, .gv-item:focus-visible .gv-arrow { transform: translate(2px, -2px); color: var(--text); }
.gv-item:not(.gv-plaque):hover .gv-media img, .gv-item:not(.gv-plaque):focus-visible .gv-media img { transform: scale(1.045); }
.gv-plaque:hover .gv-plaque__card--l, .gv-plaque:focus-visible .gv-plaque__card--l { transform: translate(-50%, -50%) translate(-31%, -9%) rotate(-11deg); }
.gv-plaque:hover .gv-plaque__card--c, .gv-plaque:focus-visible .gv-plaque__card--c { transform: translate(-50%, -50%) translate(22%, 10%) rotate(7deg); }
/* third cell: the all-work CTA — no container, just the Behance covers fanned
   on the page background; the pair spreads a touch on hover. */
.gv-plaque__face { background: transparent; overflow: visible; }
.gv-plaque__face::after { display: none; }
.gv-plaque__face .gv-plaque__card { position: absolute; left: 50%; top: 50%; width: 58%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 14px; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22), 0 0 0 1px var(--card-line); transition: transform 0.5s var(--ease); }
.gv-plaque__face .gv-plaque__card--l { transform: translate(-50%, -50%) translate(-26%, -7%) rotate(-8deg); }
.gv-plaque__face .gv-plaque__card--c { transform: translate(-50%, -50%) translate(18%, 8%) rotate(5deg); }
@media (max-width: 900px) { .gv-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gv-gallery { grid-template-columns: 1fr; gap: 30px; } }

/* =========================================================
   FOR-REVOLUT MICROSITE (hub branch + deep-dive helpers)
   Additive, namespaced. Used only by /for-revolut pages.
   ========================================================= */
/* hub: two large case cards */
.branch { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 28px; }
.branch__card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; transition: border-color 0.25s var(--ease), transform 0.3s var(--ease); }
.branch__card:hover { border-color: var(--line-2); }
.branch__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); border-bottom: 1px solid var(--line); }
.branch__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease); }
.branch__media img.cover-dark { display: none; }
[data-theme="dark"] .branch__media img.cover-light { display: none; }
[data-theme="dark"] .branch__media img.cover-dark { display: block; }
.branch__body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.branch__k { font-size: 12px; font-weight: 550; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); }
.branch__title { margin-top: 12px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.18; }
.branch__sum { margin-top: 11px; font-size: 14px; line-height: 1.55; color: var(--text-2); flex: 1; }
.branch__metrics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.branch__metric { font-size: 12px; color: var(--text-2); border: 1px solid var(--line-2); border-radius: 980px; padding: 5px 12px; }
.branch__go { margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 550; color: var(--text); }
.branch__go .ar { color: var(--text-3); transition: transform 0.25s var(--ease); }
.branch__card:hover .branch__go .ar { transform: translate(2px, -2px); }
@media (max-width: 760px) { .branch { grid-template-columns: 1fr; } }

/* restrained data table */
.ctable__scroll { overflow-x: auto; margin-top: 24px; -webkit-overflow-scrolling: touch; }
.ctable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.ctable th, .ctable td { text-align: left; vertical-align: top; padding: 12px 15px; border-bottom: 1px solid var(--line); line-height: 1.5; width: 50%; }
.ctable thead th { background: var(--surface); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--card-sub); white-space: nowrap; }
.ctable tbody tr:last-child td { border-bottom: none; }
.ctable td b { color: var(--text); font-weight: 600; }

/* single-column case layout for the microsite: the side label becomes a
   normal heading above the content, so text runs wider with more room.
   The whole microsite uses one small kit: heading, text, list, table,
   metrics, before/after, images. */
/* one content width for the whole microsite: header, meta, text, tables,
   and screens all align to the same left/right edges (single-column grid) */
.rev .wrap { max-width: 1200px; }
.case-hero--plain { border-bottom: none; }
.rev .case-hero h1 { font-size: clamp(22px, 2.5vw, 30px); }
.rev .case-sec { grid-template-columns: 1fr; gap: 0; padding-bottom: clamp(72px, 10vh, 104px); }
/* a section that pairs tightly with the block right below it */
.rev .case-sec.case-sec--tight { padding-bottom: var(--pair-gap); }
.rev .case-sec--tight + .case-sec .hero-board { margin-top: 0; }
.rev .case-sec:last-child { padding-bottom: 0; }
.rev .case-sec__label { font-size: clamp(20px, 2.3vw, 25px); font-weight: 600; letter-spacing: -0.02em; text-transform: none; color: var(--text); padding-top: 0; margin-bottom: 18px; line-height: 1.2; }
.rev .case-sec__body { max-width: none; }
.rev .case-sec__body p, .rev .case-list { max-width: none; }
.rev .case-sec__body p { font-size: 16px; line-height: 1.65; }
.rev .case-list li { font-size: 16px; }
.rev .case-sec__body p + .case-list { margin-top: 20px; }
/* one rhythm across every case: text ↔ block = 22, major block ↔ major block = --block-gap */
.rev .case-sec__body :is(.case-list, .ctable__scroll, .figure, .shots, .ba, .phonefan, .board-card, .board-cards) + p { margin-top: 22px; }
.rev .case-sec__body p + :is(.figure, .shots, .ba, .phonefan, .board-card, .board-cards) { margin-top: 22px; }
.rev .case-sec__body :is(.figure, .shots, .ba, .phonefan, .board-card, .board-cards, .ctable__scroll) + :is(.figure, .shots, .ba, .phonefan, .board-card, .board-cards) { margin-top: var(--block-gap); }
/* a board-cards pair groups with its neighbours: the gap in/out matches the gutter between the cards */
.rev .case-sec__body :is(.figure, .shots, .ba, .phonefan, .board-card, .board-cards, .ctable__scroll) + .board-cards,
.rev .case-sec__body .board-cards + :is(.figure, .shots, .ba, .phonefan, .board-card, .board-cards) { margin-top: var(--pair-gap); }
/* deliberate tight pairings keep their own gap */
.rev .case-sec__body .board-cards .board-card + .board-card { margin-top: 0; }
/* inside a reveal the vertical rhythm is the 20px grid gap, so lift the paired
   grid's gutter to match — even horizontal/vertical spacing there too */
.rev .reveal__body .board-cards { gap: 20px; }
/* board-card text overrides the generic .rev body-paragraph rules (match Figma) */
.rev .case-sec__body .board-card__eyebrow { font-size: 16px; font-weight: 400; line-height: 1.2; color: var(--card-sub); max-width: none; }
.rev .case-sec__body .board-card__title { margin-top: 8px; font-size: 20px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--card-ink); max-width: none; }
.rev .ctable { width: 100%; }
/* even rhythm inside expanders: the grid gap is the only spacing */
.rev .case-sec__body .reveal__body > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.rev .case-sec__body .reveal__body > :first-child { margin-top: 16px !important; }
/* opt-in: phone rows grow to fill the grid width (use only with 4+ screens) */
.rev .shots--fill .shot { flex: 1 1 150px; }
.rev .shots--fill .shot img { width: 100%; height: auto; }

/* first blocks: the hero summary runs the full content width too */
.rev .case-hero__sum { max-width: none; }
/* soften body text ~10% toward the background, keep headings and metrics strong */
.rev .case-hero__sum,
.rev .case-sec__body p,
.rev .case-list li { color: color-mix(in srgb, var(--text) 90%, var(--bg)); }
.rev .case-sec__body p b,
.rev .case-list b { color: inherit; }
/* impact insights keep the Figma two-tone (dark lead + muted rest) inside .rev too */
.rev .case-sec__body .impact-card__learned p { color: var(--card-sub); }
.rev .case-sec__body .impact-card__learned b { color: var(--card-ink); }
/* bullets: one consistent indent, marker centred on the first line */
.rev .case-list { gap: 11px; }
.rev .case-list li { padding-left: 24px; }
.rev .case-list li::before { top: 13px; width: 11px; }

/* hub: tighter vertical rhythm, the greeting sits close to the cards */
.rev.hub .case-hero { padding-top: clamp(32px, 5vh, 56px); padding-bottom: clamp(14px, 2vh, 20px); }
.rev.hub .case-body { padding: clamp(16px, 2.5vh, 24px) 0 clamp(28px, 4vh, 40px); }
.rev.hub .branch { margin-top: 0; }

/* sticky footer: keep the footer at the bottom on short pages */
.rev { min-height: 100vh; display: flex; flex-direction: column; }
.rev main { flex: 1 0 auto; }
.rev .foot { flex-shrink: 0; }

/* account-setup hero board: card sits on the 1200 grid, the 3D shield bleeds past it */
.hero-board { position: relative; margin-top: 20px; border-radius: 30px; }
/* purely decorative montage: not interactive, not selectable, not draggable */
.hero-board, .hero-board * { pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.hero-board__img { display: block; width: 100%; height: auto; border-radius: 30px; }
/* the 3D shield floats past the board's left edge, as in the source design (scaled 0.8, centre kept) */
.hero-board__ill { position: absolute; left: -5.8%; top: 57.6%; width: 33.6%; max-width: none; height: auto; }

/* ---------- feature block: slate phone card + a light card of capabilities (Figma 977-26132) ---------- */
.kfeat { position: relative; display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: var(--pair-gap); align-items: stretch; --notch-w: 300px; --notch-h: 120px; }
.kfeat, .kfeat * { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.kfeat__phone { position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--grad-slate); min-height: 440px; }
/* the phone screen already carries its dark device frame, baked in — just a soft cast shadow */
.kfeat__phone img { position: absolute; left: 50%; transform: translateX(-50%); top: clamp(26px, 2.8vw, 42px); width: 84%; max-width: 380px; height: auto; display: block; filter: drop-shadow(0 26px 46px rgba(0, 0, 0, 0.32)); }
/* a notch is bitten out of the card's bottom-right (Figma Subtract 987-26268): every curve is r30 —
   the card's own corners round INTO the cutout at both edges, the inner corner is a concave r30 */
.kfeat__grid { position: relative; background: var(--card-bg); border: 1px solid var(--card-line); border-radius: var(--r-card); padding: clamp(30px, 3.4vw, 52px);
  -webkit-mask: linear-gradient(#000 0 0), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="330" height="150" viewBox="0 0 330 150"><path d="M330 0A30 30 0 0 1 300 30L60 30A30 30 0 0 0 30 60L30 120A30 30 0 0 1 0 150L330 150L330 0Z" fill="black"/></svg>') right bottom / calc(var(--notch-w) + 30px) calc(var(--notch-h) + 30px) no-repeat;
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="330" height="150" viewBox="0 0 330 150"><path d="M330 0A30 30 0 0 1 300 30L60 30A30 30 0 0 0 30 60L30 120A30 30 0 0 1 0 150L330 150L330 0Z" fill="black"/></svg>') right bottom / calc(var(--notch-w) + 30px) calc(var(--notch-h) + 30px) no-repeat; mask-composite: exclude; }
.kfeat__list { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 3.4vw, 48px) clamp(20px, 2.4vw, 40px); height: 100%; align-content: center; }
.kfeat__item { display: flex; align-items: center; gap: clamp(14px, 1.3vw, 20px); }
.kfeat__ic { flex: none; width: clamp(52px, 5vw, 66px); height: clamp(52px, 5vw, 66px); }
.kfeat__ic img { width: 100%; height: 100%; display: block; }
.kfeat__label { font-size: clamp(16px, 1.4vw, 19px); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: var(--card-ink); }
/* the lockup sits directly on the page background inside the notch, inset 30-ish from its edges */
.kfeat__brand { position: absolute; right: 29px; bottom: 29px; width: calc(var(--notch-w) - 59px); }
.kfeat__brand img { width: 100%; height: auto; display: block; }
/* hairline along the notch cut — the mask eats the element's own border there */
.kfeat__edge { position: absolute; right: 0; bottom: 0; width: calc(var(--notch-w) + 30px); height: calc(var(--notch-h) + 30px); color: var(--card-line); pointer-events: none; }
@media (max-width: 820px) {
  .kfeat { grid-template-columns: 1fr; }
  .kfeat__phone { min-height: 0; aspect-ratio: 5 / 4; }
  .kfeat__list { grid-template-columns: 1fr; gap: clamp(18px, 4vw, 26px); }
  .kfeat__grid { -webkit-mask: none; mask: none; }
  .kfeat__brand, .kfeat__edge { display: none; }
}

/* ---------- lightbox: click any product screen to zoom (not research boards) ---------- */
.rev .figure img, .rev .shot img, .rev .ba__img { cursor: zoom-in; }
.rev .shots--boards .shot > img { cursor: default; }
.rev .mboard__dev img { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 28px; background: rgba(0, 0, 0, 0.8); opacity: 0; transition: opacity 0.3s var(--ease); cursor: zoom-out; }
.lightbox.on { opacity: 1; }
.lightbox img { max-width: min(1600px, 94vw); max-height: 92vh; width: auto; height: auto; border-radius: 12px; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
  .cover:hover, .cover:hover .cover__media img, .masthead__links a:hover .ar { transform: none !important; }
  .branch__card:hover, .branch__card:hover .branch__media img, .branch__card:hover .branch__go .ar { transform: none !important; }
}

/* mobile: smaller radii everywhere — cards and media are physically smaller,
   so the large desktop rounding reads as oversized. Placed last to win. */
@media (max-width: 600px) {
  :root { --shot-radius: 10px; }
  .hero, .edu, .quote, .impact-card, .phonefan, .hero-board__img, .hero-board, .ba,
  .chero__card, .chero__cover, .board-card, .board-card--row { border-radius: 20px; }
  .chero__cover--frame { border-radius: 14px; }
  .board-card__img, .board-card__media { border-radius: 12px; }
  .board-card--row .board-card__img { border-radius: 14px; }
  .phonefan__item, .gv-media, .xp-cover, .dv--win, .ba__img, .ba--phone .ba__stage { border-radius: 12px; }
  .shots--boards .shot > img, .mboard { border-radius: 20px; }
  .dv--phone { border-radius: 30px; }
  .dv--phone .dv__screen { border-radius: 22px; }
}

@media print {
  :root { --bg: #fff; --surface: #fff; --text: #000; --text-2: #222; --text-3: #555; --line: #ddd; }
  .topbar, .toggle, .skip-link, .foot, .casenav, .back { display: none !important; }
  main { opacity: 1 !important; }
  .block, .xp__item, .case-sec { break-inside: avoid; }
  .block { grid-template-columns: 150px 1fr; padding: 16px 0; }
  .wrap { max-width: 100%; padding: 0; }
  a { color: #000; }
}