/* Stats band */
.statband { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }

@media (max-width: 760px){ .statband { grid-template-columns: 1fr 1fr; } }

/* ---- Decade heatmap: a replay of ten years of shipping ---- */
.heatmap { position: relative; display: grid; grid-template-columns: repeat(44, 1fr); gap: 3px; }

.heatmap i { aspect-ratio: 1; border-radius: 2.5px; background: rgba(255,255,255,.05); animation: hm-in .5s var(--ease) both;
  transition: filter .5s var(--ease), box-shadow .5s var(--ease); }

@keyframes hm-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }

/* playhead flare: the column under the scrubber lights up, then cools back down */
.heatmap i.hot { filter: brightness(2.2) saturate(1.4); box-shadow: 0 0 9px rgba(67,231,208,.55); transition-duration: .06s; }
/* live-commit twinkle: a random cell flashes - still shipping right now */
.heatmap i.spark { filter: brightness(2.5); box-shadow: 0 0 11px rgba(67,231,208,.85); transition-duration: .1s; }

/* the decade scrubber (positioned by widgets/heatmap.js each frame) */
.hm-cursor { position: absolute; top: -4px; bottom: -4px; left: 0; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, rgba(67,231,208,.95), transparent);
  box-shadow: 0 0 14px rgba(67,231,208,.6); pointer-events: none; transition: opacity .5s ease; }
.hm-year { position: absolute; top: -9px; left: 0; padding: 2px 7px; border-radius: 100px;
  background: #0c0f17; border: 1px solid rgba(67,231,208,.45); color: var(--accent-2);
  font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; line-height: 1.4;
  pointer-events: none; transition: opacity .5s ease; }

.iu-bar { height: 8px; border-radius: 4px; background: rgba(140,165,235,.18); display: block; }

.iu-progress { height: 5px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }

.iu-progress b { display: block; height: 100%; width: 40%; border-radius: 4px; background: var(--grad); animation: iu-fill 3.4s var(--ease) infinite; }

@keyframes iu-fill { 0% { width: 12%; } 55%,80% { width: 96%; } 100% { width: 96%; opacity: .4; } }

/* Grid stretches every .flip to the row height; the flex chain passes that
   height down so all cards in a row are always equal. */
.flip { position: relative; display: flex; }

.flip-inner { position: relative; width: 100%; display: flex; }

.flip-face { position: relative; width: 100%; transition: opacity .45s var(--ease), transform .45s var(--ease); }

.flip-face.flip-back { position: absolute; inset: 0; }

.flip-back { opacity: 0; transform: translateY(16px); pointer-events: none;
  background: linear-gradient(140deg, rgba(109,139,255,.08), var(--surface) 55%); border-color: var(--border-strong); }

.flip:hover .flip-face:not(.flip-back) { opacity: 0; transform: translateY(-12px); }

.flip:hover .flip-back { opacity: 1; transform: none; pointer-events: auto; }

.flip-hint { margin-top: auto; font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; color: var(--text-mute); text-transform: uppercase; }

/* "In practice" checklist on the flip-back face - console-style rows (ties into the
   deploy-console/checklist language used elsewhere) instead of a dense mono paragraph.
   Rows stagger in just after the flip completes, each nudging in from the left. */
.flip-checks { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 11px;
  font-family: var(--mono); font-size: .8rem; line-height: 1.35; color: var(--text-soft); }

.flip-checks li { display: flex; align-items: flex-start; gap: 10px;
  opacity: 0; transform: translateX(-8px); transition: opacity .35s var(--ease), transform .35s var(--ease); }

.flip-checks li i { flex: none; width: 17px; height: 17px; margin-top: -1px; border-radius: 50%;
  background: var(--grad-soft); border: 1px solid var(--border-strong); color: var(--accent-2);
  font-style: normal; font-size: .62rem; font-weight: 700; display: grid; place-items: center; }

.flip:hover .flip-checks li { opacity: 1; transform: none; }

.flip:hover .flip-checks li:nth-child(1) { transition-delay: .12s; }

.flip:hover .flip-checks li:nth-child(2) { transition-delay: .2s; }

.flip:hover .flip-checks li:nth-child(3) { transition-delay: .28s; }

@media (hover: none) { /* touch devices: show both stacked */
  .flip-inner { flex-direction: column; } /* .flip-inner is a flex row by default - without
    this, position:static front/back faces sit side by side instead of stacking */
  .flip-face { position: static; opacity: 1 !important; transform: none !important; }
  .flip-back { margin-top: 10px; pointer-events: auto; }
  .flip-hint { display: none; }
  .flip-checks li { opacity: 1; transform: none; }
}

.p-ui { margin-bottom: 16px; }

/* ---- Flip-back arrival glow: the reveal moment gets a soft accent halo ---- */
.flip:hover .flip-back { border-color: rgba(67,231,208,.35); box-shadow: 0 22px 55px -20px rgba(67,231,208,.28); }

/* ============================================================
   Principle-card minis ("ab-" prefix, about-page exclusive).
   One literal metaphor per principle - deliberately none of the
   patterns used by the services/industries minis.
   ============================================================ */

/* Craft over shortcuts - a live code-review diff: the red quick hack gets
   struck through and fades back, the green crafted line lands in its place,
   and the "+1 -1 approved" tag pops. The profession's actual craft ritual. */
.ab-diff { position: relative; font-family: var(--mono); font-size: .68rem; display: grid; gap: 5px; }
.ab-dl { display: flex; align-items: center; gap: 8px; height: 20px; padding-inline: 8px;
  border-radius: 5px; overflow: hidden; }
.ab-dl b { font-weight: 700; }
.ab-dl span { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-del { color: #ff8f6b; background: rgba(255,110,80,.09); animation: ab-delrow 5.2s ease infinite; }
.ab-del span::after { content: ""; position: absolute; left: 0; top: 50%; height: 1.5px; width: 0;
  background: #ff8f6b; animation: ab-strikeout 5.2s ease infinite; }
@keyframes ab-strikeout { 0%, 18% { width: 0; } 28%, 100% { width: 100%; } }
@keyframes ab-delrow {
  0%, 2% { opacity: 0; transform: translateX(-8px); }
  8%, 34% { opacity: 1; transform: none; }
  46%, 94% { opacity: .22; transform: none; }
  100% { opacity: 0; transform: none; }
}
.ab-add { color: var(--accent-2); background: rgba(67,231,208,.1); opacity: 0; animation: ab-addrow 5.2s ease infinite; }
@keyframes ab-addrow {
  0%, 36% { opacity: 0; transform: translateY(9px); }
  46% { opacity: 1; transform: none; background: rgba(67,231,208,.28); }
  54%, 94% { opacity: 1; transform: none; background: rgba(67,231,208,.1); }
  100% { opacity: 0; transform: translateY(9px); }
}
.ab-diff-tag { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .6rem;
  letter-spacing: .06em; color: var(--accent-2); opacity: 0; transform: scale(.7); transform-origin: left;
  animation: ab-tagpop 5.2s ease infinite; }
.ab-diff-tag em { font-style: normal; color: var(--text-mute); }
@keyframes ab-tagpop { 0%, 54% { opacity: 0; transform: scale(.7); } 62% { opacity: 1; transform: scale(1.12); } 66%, 94% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.7); } }

/* Clarity always - the knot untangles: the tangled ask dissolves while one
   clean line draws straight through to a pulsing endpoint. */
.ab-untangle svg { width: 100%; height: 46px; overflow: visible; display: block; }
.ab-ut-lbl { font-family: var(--mono); font-size: 6.5px; letter-spacing: .1em; fill: var(--text-mute); text-transform: uppercase; }
.ab-ut-lbl2 { animation: ab-lbl2in 5.6s ease infinite; }
@keyframes ab-lbl2in { 0%, 46% { fill: var(--text-mute); opacity: .5; } 56%, 100% { fill: #43e7d0; opacity: 1; } }
.ab-knot { fill: none; stroke: #b078ff; stroke-width: 1.8; stroke-linecap: round;
  animation: ab-dissolve 5.6s ease infinite; }
@keyframes ab-dissolve {
  0%, 16% { opacity: .85; filter: blur(0); }
  44%, 90% { opacity: .1; filter: blur(2.5px); }
  100% { opacity: .85; filter: blur(0); }
}
.ab-line { fill: none; stroke: var(--accent-2); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 180; stroke-dashoffset: 180; animation: ab-drawline 5.6s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(67,231,208,.4)); }
@keyframes ab-drawline { 0%, 18% { stroke-dashoffset: 180; } 52%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 180; } }
.ab-line-dot { fill: var(--accent-2); opacity: 0; animation: ab-dotland 5.6s ease infinite;
  filter: drop-shadow(0 0 5px rgba(67,231,208,.8)); transform-origin: 191px 26px; transform-box: view-box; }
@keyframes ab-dotland { 0%, 48% { opacity: 0; transform: scale(.3); } 56% { opacity: 1; transform: scale(1.4); } 62%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.3); } }

/* Security by default - the padlock clicks shut (shackle drops with a tiny
   overshoot), the keyhole flashes, a scan ring radiates outward. */
.ab-lock { display: flex; align-items: center; gap: 14px; }
.ab-lock svg { flex: none; width: 40px; height: 44px; overflow: visible; }
.ab-shackle { fill: none; stroke: #c9d2f5; stroke-width: 3; stroke-linecap: round;
  animation: ab-shut 4.2s ease infinite; }
@keyframes ab-shut { 0%, 18% { transform: translateY(-5px); } 30% { transform: translateY(.8px); } 36%, 100% { transform: translateY(0); } }
.ab-lockbody { fill: rgba(109,139,255,.22); stroke: #c9d2f5; stroke-width: 2;
  animation: ab-clunk 4.2s ease infinite; transform-origin: 18px 27px; transform-box: view-box; }
@keyframes ab-clunk { 0%, 30% { transform: scale(1); } 34% { transform: scale(1.06); } 40%, 100% { transform: scale(1); } }
.ab-keyhole { fill: rgba(201,210,245,.6); animation: ab-keyflash 4.2s ease infinite; }
@keyframes ab-keyflash { 0%, 32% { fill: rgba(201,210,245,.6); } 38%, 82% { fill: #43e7d0; } 100% { fill: rgba(201,210,245,.6); } }
.ab-scan { fill: none; stroke: #43e7d0; stroke-width: 1.4; opacity: 0;
  transform-origin: 18px 26px; transform-box: view-box; animation: ab-scanout 4.2s ease-out infinite; }
@keyframes ab-scanout { 0%, 34% { opacity: 0; transform: scale(.4); } 42% { opacity: .7; } 68%, 100% { opacity: 0; transform: scale(1.5); } }
.ab-lock-meta { display: grid; gap: 5px; font-family: var(--mono); min-width: 0; }
.ab-lock-meta b { font-size: .72rem; color: var(--text); white-space: nowrap; }
.ab-lock-meta span { font-size: .64rem; color: var(--text-mute); }

/* Outcomes, not hours - "hours logged" gets struck through and demoted;
   the metric that matters rises up to replace it. */
.ab-outcome { position: relative; height: 44px; font-family: var(--mono); }
.ab-outcome > span { position: absolute; inset: 0; display: flex; align-items: center; gap: 7px; }
.ab-hours { font-size: .74rem; color: var(--text-soft); animation: ab-demote 5s ease infinite; }
.ab-hours::after { content: ""; position: absolute; left: 0; top: 50%; height: 1.5px; width: 0;
  background: #ff8f6b; animation: ab-strike 5s ease infinite; }
@keyframes ab-strike { 0%, 22% { width: 0; } 34%, 96% { width: 132px; } 100% { width: 132px; opacity: 0; } }
@keyframes ab-demote { 0%, 30% { opacity: 1; transform: none; } 44%, 92% { opacity: .28; transform: translateY(-11px) scale(.88); } 100% { opacity: 1; transform: none; } }
.ab-metric { font-size: .78rem; color: var(--text); opacity: 0; animation: ab-promote 5s ease infinite; }
.ab-metric b { color: var(--accent-2); font-size: .92rem; }
.ab-metric svg { width: 13px; height: 13px; fill: none; stroke: var(--accent-2); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
@keyframes ab-promote { 0%, 36% { opacity: 0; transform: translateY(14px); } 50%, 94% { opacity: 1; transform: translateY(7px); } 100% { opacity: 0; transform: translateY(14px); } }

/* Long-term partners - a contribution streak filling cell by cell across the
   years: the relationship keeps shipping. */
.ab-streak { display: grid; gap: 7px; }
.ab-cells { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.ab-cells i { aspect-ratio: 1; border-radius: 2.5px; background: rgba(140,165,235,.14);
  animation: ab-commit 6.2s ease infinite; animation-delay: calc(var(--i, 0) * .22s); }
@keyframes ab-commit {
  0%, 4% { background: rgba(140,165,235,.14); transform: scale(1); }
  7% { background: rgba(67,231,208, var(--l, .8)); transform: scale(1.35); }
  10%, 88% { background: rgba(67,231,208, calc(var(--l, .8) * .8)); transform: scale(1); }
  96%, 100% { background: rgba(140,165,235,.14); transform: scale(1); }
}
.ab-years { display: flex; justify-content: space-between; font-family: var(--mono);
  font-size: .6rem; letter-spacing: .1em; color: var(--text-mute); text-transform: uppercase; }

/* Global mindset - three ticking analog clocks over a pulsing shared-overlap
   band: different hours, same working window. */
.ab-clocks { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ab-clock { display: grid; justify-items: center; gap: 4px; }
.ab-clock svg { width: 34px; height: 34px; }
.ab-clock span { font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; color: var(--text-mute); }
.ab-cface { fill: rgba(109,139,255,.08); stroke: rgba(140,165,235,.4); stroke-width: 1.5; }
.ab-hh, .ab-mh { stroke: #dfe6ff; stroke-linecap: round; transform-origin: 15px 15px; transform-box: view-box; }
.ab-hh { stroke-width: 2.2; transform: rotate(var(--r0, 0deg)); animation: ab-tick 48s linear infinite; }
.ab-mh { stroke-width: 1.4; stroke: var(--accent-2); transform: rotate(var(--r0, 0deg)); animation: ab-tick 6s linear infinite; }
@keyframes ab-tick { to { transform: rotate(calc(var(--r0, 0deg) + 360deg)); } }
.ab-overlap { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); }
.ab-overlap i { width: 26px; height: 5px; border-radius: 3px; background: var(--grad);
  animation: ab-window 2.6s ease infinite; }
@keyframes ab-window { 0%, 100% { opacity: .45; } 50% { opacity: 1; box-shadow: 0 0 8px rgba(67,231,208,.6); } }

/* Automation first - the switches flip themselves on, one by one:
   deploys, then tests, then reports. Machines do the repetition. */
.ab-autos { display: grid; gap: 8px; }
.ab-auto { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .68rem; }
.ab-auto b { color: var(--text-mute); font-weight: 500; animation: ab-lbl 4.8s ease infinite; animation-delay: calc(var(--i, 0) * .5s); }
@keyframes ab-lbl { 0%, 16% { color: var(--text-mute); } 24%, 86% { color: var(--text); } 100% { color: var(--text-mute); } }
.ab-sw { position: relative; flex: none; width: 27px; height: 15px; border-radius: 100px;
  border: 1px solid var(--border-strong); background: rgba(140,165,235,.12);
  animation: ab-swbg 4.8s ease infinite; animation-delay: calc(var(--i, 0) * .5s); }
@keyframes ab-swbg { 0%, 16% { background: rgba(140,165,235,.12); border-color: var(--border-strong); } 24%, 86% { background: rgba(67,231,208,.35); border-color: rgba(67,231,208,.6); } 100% { background: rgba(140,165,235,.12); border-color: var(--border-strong); } }
.ab-sw i { position: absolute; top: 1.5px; left: 2px; width: 10px; height: 10px; border-radius: 50%;
  background: #cfd6ea; animation: ab-knob 4.8s ease infinite; animation-delay: calc(var(--i, 0) * .5s); }
@keyframes ab-knob { 0%, 16% { transform: none; background: #cfd6ea; } 24%, 86% { transform: translateX(12px); background: #fff; box-shadow: 0 0 6px rgba(67,231,208,.7); } 100% { transform: none; background: #cfd6ea; } }

/* Performance is a feature - a drag race to the checkered flag: our bar
   zips home in 0.9s while "typical" is still crawling at 4.2s. */
.ab-race { display: grid; gap: 9px; }
.ab-lane { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: .62rem; }
.ab-lane b { flex: none; width: 44px; color: var(--text-soft); font-weight: 500; }
.ab-track { position: relative; flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.05); overflow: hidden; }
.ab-track::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 7px; opacity: .5;
  background: repeating-conic-gradient(rgba(255,255,255,.5) 0% 25%, transparent 0% 50%) 0 0 / 4px 4px; }
.ab-run { position: absolute; inset: 0; border-radius: 4px; transform: scaleX(0); transform-origin: left; }
.ab-run.ab-fast { background: linear-gradient(90deg, rgba(67,231,208,.25), var(--accent-2));
  box-shadow: 0 0 9px rgba(67,231,208,.45); animation: ab-zip 5.5s ease-out infinite; }
@keyframes ab-zip { 0%, 6% { transform: scaleX(0); } 15%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.ab-run.ab-slow { background: linear-gradient(90deg, rgba(255,143,107,.25), #ff8f6b);
  animation: ab-crawl 5.5s linear infinite; }
@keyframes ab-crawl { 0%, 6% { transform: scaleX(0); } 80%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.ab-time { flex: none; width: 30px; color: var(--text-mute); opacity: 0; }
.ab-time.ab-t1 { color: var(--accent-2); animation: ab-tin1 5.5s ease infinite; }
.ab-time.ab-t2 { animation: ab-tin2 5.5s ease infinite; }
@keyframes ab-tin1 { 0%, 14% { opacity: 0; } 18%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ab-tin2 { 0%, 78% { opacity: 0; } 82%, 94% { opacity: 1; } 100% { opacity: 0; } }

/* You own everything - the handover: a signature draws itself on the deed,
   then the "yours" stamp slams in. */
.ab-deed { position: relative; display: flex; align-items: center; gap: 12px; }
.ab-doc { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 8px;
  background: rgba(255,255,255,.02); padding: 9px 11px 6px; display: grid; gap: 6px; }
.ab-doc > i { height: 5px; border-radius: 3px; background: rgba(140,165,235,.25); }
.ab-sign { width: 86px; height: 21px; margin-top: 1px; }
.ab-sign path { fill: none; stroke: var(--accent-2); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 150; animation: ab-signdraw 5s ease-in-out infinite;
  filter: drop-shadow(0 0 3px rgba(67,231,208,.35)); }
@keyframes ab-signdraw { 0%, 8% { stroke-dashoffset: 150; } 46%, 94% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 150; } }
.ab-stamp { flex: none; font-family: var(--mono); font-size: .66rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: #b078ff; padding: 5px 9px;
  border: 2px solid rgba(176,120,255,.75); border-radius: 6px; transform: rotate(-8deg) scale(0);
  animation: ab-slam 5s ease infinite; }
@keyframes ab-slam {
  0%, 50% { transform: rotate(-8deg) scale(0); opacity: 0; }
  58% { transform: rotate(-8deg) scale(1.25); opacity: 1; }
  62%, 94% { transform: rotate(-8deg) scale(1); opacity: 1; box-shadow: 0 0 14px rgba(176,120,255,.25); }
  100% { transform: rotate(-8deg) scale(0); opacity: 0; }
}