/* Digital Mundo — home page (generated into site/home.css by src/build.mjs).
   A fixed rail on the left (nav, wordmark, contact, brand stripe) and a
   mosaic of project cards on the right. Each card is a small composition in
   that project's colors (--c1/--c2/--c3) from src/home/cards/<slug>/; inside a
   card everything is sized in container units so it scales with the slot. */

:root{
  --blue:#2F5DFF;
  --blue-soft:#5B84FF;
  --ink:#14161A;
  --muted:#5A6072;
  --paper:#FAFAFA;
  --white:#FFFFFF;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --rail:clamp(220px,17vw,290px);
  --pad:clamp(14px,1.55vw,24px);
  --ease:cubic-bezier(.65,0,.35,1);
  --out:cubic-bezier(.2,.8,.2,1);
  --grid:
    repeating-linear-gradient(to right,rgba(255,255,255,.07) 0 1px,transparent 1px 80px),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.07) 0 1px,transparent 1px 80px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;
  background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--blue);color:var(--white)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation:none !important}
}

/* ---------- rail ---------- */
.rail{
  position:fixed;left:0;top:0;bottom:0;z-index:3;width:var(--rail);
  background:var(--grid),var(--blue);color:var(--white);
  display:flex;flex-direction:column;justify-content:space-between;
  padding:28px 22px 26px 40px;
}
.stripe{position:absolute;left:0;top:0;bottom:0;display:flex}
.stripe i{display:block;height:100%;transition:background-color .6s var(--ease)}
.stripe i:nth-child(1){width:9px;background:var(--s1,#14161A)}
.stripe i:nth-child(2){width:6px;background:var(--s2,var(--blue-soft))}
.stripe i:nth-child(3){width:4px;background:var(--s3,#FFFFFF)}
.rail-foot{display:flex;flex-direction:column;gap:18px}
.rail-mark{
  display:flex;flex-direction:column;
  font-size:calc((var(--rail) - 62px) * .262);
  font-weight:600;letter-spacing:-.035em;line-height:.98;
}
.rail-mark svg{width:.6625em;height:.6625em;vertical-align:-.062em;margin-left:.015em}
.rail-meta{display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.35}
.rail-meta span{opacity:.75}
.rail-meta a{align-self:flex-start;opacity:.75;border-bottom:1px solid rgba(255,255,255,.3);transition:opacity .2s,border-color .2s}
.rail-meta a:hover{opacity:1;border-bottom-color:var(--white)}
.rail a:focus-visible{outline:2px solid var(--white);outline-offset:4px}

/* ---------- color flood (fades in as the footer comes up) ---------- */
.flood{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--grid),var(--blue);opacity:var(--p,0)}

/* ---------- mosaic ---------- */
.wrap{position:relative;z-index:1;margin-left:var(--rail);padding:var(--pad) var(--pad) 0}
.cards{container-type:inline-size}
/* The headline card above the mosaic, on the rail's blue grid. */
.intro{
  margin-bottom:calc(14 * 100cqw / 819);border-radius:8px;color:var(--white);
  background:var(--grid),var(--blue);background-position:-1px -1px;
  padding:clamp(36px,7vh,84px) clamp(24px,4vw,64px) clamp(32px,6vh,64px);
}
.intro h1{font-size:clamp(38px,4.6vw,72px);font-weight:600;letter-spacing:-.045em;line-height:1;text-wrap:balance;max-width:14ch}
.intro p{margin-top:clamp(14px,2vh,22px);max-width:600px;font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:rgba(255,255,255,.86);text-wrap:pretty}
/* Book a call first (white), Learn more beside it (outline). About only shows on phones, where the rail nav is hidden. */
.intro-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(24px,4vh,36px)}
.intro-cta a{display:inline-flex;align-items:center;gap:10px;padding:12px 23px;border-radius:999px;border:1px solid rgba(255,255,255,.5);font-size:16px;font-weight:600;letter-spacing:-.01em;transition:background .2s,color .2s,border-color .2s}
.intro-cta .cta-book{background:var(--white);color:var(--blue);border-color:var(--white)}
.intro-cta .cta-book:hover{background:#E6EDFF;border-color:#E6EDFF}
.intro-cta .cta-more::after{content:"\2192"}
.intro-cta .cta-more:hover,.intro-cta .cta-about:hover{background:rgba(255,255,255,.12);border-color:var(--white)}
.intro-cta .cta-about{display:none}
.intro-cta a:focus-visible{outline:2px solid var(--white);outline-offset:4px}
.intro-cta .ext{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-left:-2px}
/* One card for the headline and the globe: the copy on the left, the globe on the right, on one grid. */
.intro-row{
  display:grid;grid-template-columns:3fr 2fr;margin-bottom:calc(14 * 100cqw / 819);
  border-radius:8px;overflow:hidden;background:var(--grid),var(--blue);background-position:-1px -1px;
}
.intro-row .intro{margin-bottom:0;border-radius:0;background:none}
.intro-globe{position:relative}
.intro-globe canvas{position:absolute;inset:0;width:100%;height:100%}
@container (max-width:759px){
  .intro-row{grid-template-columns:1fr}
  .intro-row .intro{padding-bottom:0}
  .intro-globe{height:260px}
}
.blk{--u:calc(100cqw / 819);display:grid;margin-bottom:calc(14 * var(--u))}
/* Block A: a staggered pair of columns; B and C: wide + narrow rows; solo: one
   full-width card. Proportions after rima.space, in units of 1/819 width. */
.blk-a{
  grid-template-columns:320fr 484fr;column-gap:calc(16 * var(--u));
  grid-template-rows:calc(378 * var(--u)) calc(14 * var(--u)) calc(98 * var(--u)) calc(14 * var(--u)) calc(252 * var(--u));
}
.blk-a > :nth-child(1){grid-area:1 / 1 / 2 / 2}
.blk-a > :nth-child(2){grid-area:1 / 2 / 4 / 3}
.blk-a > :nth-child(3){grid-area:3 / 1 / 6 / 2}
.blk-a > :nth-child(4){grid-area:5 / 2 / 6 / 3}
.blk-b{grid-template-columns:544fr 260fr;column-gap:calc(15 * var(--u));grid-template-rows:calc(364 * var(--u))}
.blk-c{grid-template-columns:264fr 540fr;column-gap:calc(16 * var(--u));grid-template-rows:calc(378 * var(--u))}
.blk-solo{grid-template-rows:calc(378 * var(--u))}

.card{
  position:relative;display:block;overflow:hidden;border-radius:8px;
  container-type:size;isolation:isolate;
  background:var(--c1);color:var(--c3);
}
.card .art{position:absolute;inset:0}
/* Loops only run while the card is on screen (home.js adds .live). */
.card:not(.live) *,.card:not(.live) *::before,.card:not(.live) *::after{animation-play-state:paused !important}
.card::after{
  content:"";position:absolute;inset:auto 0 0 0;height:34%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.42),transparent);
  opacity:0;transition:opacity .5s var(--ease);
}
.cap{
  position:absolute;left:clamp(14px,5.2cqmin,22px);bottom:clamp(12px,4.6cqmin,20px);z-index:2;
  display:flex;flex-direction:column;gap:2px;color:var(--white);
  opacity:0;transition:opacity .5s var(--ease);pointer-events:none;
}
.cap b{font-size:clamp(16px,5.4cqmin,22px);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.cap i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.04em;opacity:.8}
.card:hover::after,.card:focus-visible::after,.card:hover .cap,.card:focus-visible .cap{opacity:1}
.card:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
@media (hover:none){.card::after,.cap{opacity:1}}

/* Default card for a product without its own composition: the icon, large. */
.art-icon{display:grid;place-items:center}
.art-icon img{width:34cqmin;height:34cqmin;border-radius:22%;box-shadow:0 2cqmin 6cqmin -2cqmin rgba(0,0,0,.4);animation:icon-float 5s var(--ease) infinite alternate}
@keyframes icon-float{to{transform:translateY(-3cqmin) rotate(-3deg)}}

/* ---------- footer ---------- */
.foot{
  position:relative;z-index:1;color:var(--white);
  padding:clamp(96px,16vh,180px) 0 calc(var(--pad) + 8px);
  display:flex;flex-direction:column;gap:clamp(56px,10vh,110px);
}
.foot-about h2{font-size:clamp(34px,4.2vw,64px);font-weight:600;letter-spacing:-.035em;line-height:1.02}
.foot-cols{margin-top:clamp(28px,4vh,44px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,72px);max-width:1100px}
.foot-cols p{font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:rgba(255,255,255,.88)}
.foot-cols a{color:var(--white);text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:3px}
.foot-cols a:hover{text-decoration-color:var(--white)}
.foot-links{margin-top:clamp(28px,4vh,40px);display:flex;flex-wrap:wrap;gap:10px}
.foot-links a{padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.4);font-size:14.5px;font-weight:500;transition:background .2s,color .2s}
.foot-links a:hover,.foot-links a:focus-visible{background:var(--white);color:var(--blue)}
.foot-row{display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:space-between;font-size:12px;letter-spacing:.01em}
.foot-row b{font-weight:600}
.foot-row a:hover,.foot-row a:focus-visible{text-decoration:underline;text-underline-offset:3px}

/* ---------- phone ---------- */
@media (max-width:760px){
  :root{--rail:100vw;--pad:12px}
  .rail{position:relative;bottom:auto;padding:22px 20px 24px 34px;min-height:236px;justify-content:flex-end}
  .stripe{position:fixed;z-index:4}
  .rail-mark{font-size:58px;position:relative}
  .rail-meta{position:relative}
  .wrap{margin-left:0;padding-left:28px}
  .blk{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
  .card.s-tall{aspect-ratio:4/5}
  .card.s-square{aspect-ratio:1}
  .card.s-wide{aspect-ratio:5/4}
  .foot{padding-top:96px}
  .foot-cols{grid-template-columns:1fr;gap:18px}
  /* One blue block on phones: the rail (wordmark and nav), the headline under it on the same grid, and the
     globe tucked into the corner, and one row of buttons. The rail is two grid squares tall so the lines run on. */
  .rail{height:160px;min-height:0;padding-bottom:4px}
  .rail .rail-meta,.rail .rail-nav{display:none}
  .intro-cta{gap:8px;margin-top:24px;position:relative;z-index:1}
  .intro-cta a{padding:8px 14px;font-size:14.5px;gap:8px}
  .intro-cta .cta-more,.intro-cta .cta-about{background:var(--blue)}
  .intro-cta .cta-more::after{display:none}
  .intro-cta .cta-about{display:inline-flex}
  .intro-row{display:block;position:relative;overflow:hidden;margin:calc(-1 * var(--pad)) calc(-1 * var(--pad)) 12px -28px;border-radius:0;background:var(--grid),var(--blue)}
  .intro-row .intro{padding:28px 20px 40px 34px}
  .intro h1{font-size:40px}
  .intro-globe{position:absolute;right:-64px;bottom:-84px;width:240px;height:240px;background:none;border-radius:0}
}

/* Page-to-page transitions (same-origin, where supported): a home page card
   grows into its product's hero and shrinks back on the way home. */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.55s;animation-timing-function:cubic-bezier(.65,0,.35,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
::view-transition-image-pair(*.product){overflow:hidden;border-radius:8px}
::view-transition-old(*.product),::view-transition-new(*.product){width:100%;height:100%;object-fit:cover;object-position:top left}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ===== cards/hiretalent-ph ===== */
/* Stacked talent profiles that keep settling into line. */
.c-hiretalent-ph{background:
  repeating-linear-gradient(to right,rgba(255,255,255,.16) 0 1px,transparent 1px 7cqw),
  repeating-linear-gradient(to bottom,rgba(255,255,255,.16) 0 1px,transparent 1px 7cqw),var(--c1)}
.ht-stack{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3.4cqh}
.ht-chip{
  width:80cqw;display:flex;align-items:center;gap:3.4cqw;padding:3.4cqw 4cqw;
  background:var(--white);border-radius:4.2cqw;color:var(--c3);
  box-shadow:0 1.6cqw 4cqw -1.6cqw rgba(14,15,26,.35);
  transform:translateX(var(--tx)) rotate(var(--r));
  animation:ht-tidy 7s var(--ease) infinite;
}
.ht-chip:nth-child(1){--tx:-5cqw;--r:-2deg}
.ht-chip:nth-child(2){--tx:4cqw;--r:1.5deg;animation-delay:.15s}
.ht-chip:nth-child(3){--tx:-2cqw;--r:-1deg;animation-delay:.3s}
@keyframes ht-tidy{0%,12%,88%,100%{transform:translateX(var(--tx)) rotate(var(--r))}38%,62%{transform:none}}
.c-hiretalent-ph .av{
  flex:none;width:11cqw;height:11cqw;border-radius:50%;display:grid;place-items:center;
  background:var(--c2);color:var(--white);font-size:3.6cqw;font-weight:600;letter-spacing:.02em;
}
.c-hiretalent-ph .who{display:flex;flex-direction:column;flex:1;min-width:0}
.c-hiretalent-ph .who b{font-size:4.3cqw;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.c-hiretalent-ph .who i{font-style:normal;font-size:3.3cqw;color:#5A6072}
.ht-chip em{font-style:normal;font-size:3cqw;font-weight:600;padding:1cqw 2.4cqw;border-radius:99px;background:#D7F5F1;color:var(--c2)}

/* ===== cards/ferrylend ===== */
/* A deal pipeline; one deal keeps moving to Funded. */
.c-ferrylend{color:#E6F4EF;background:var(--c3)}
.c-ferrylend .art{display:flex;flex-direction:column;justify-content:center;padding:0 5cqw;gap:4cqw}
.fe-top{display:flex;justify-content:space-between;align-items:baseline;font-size:4.4cqw;font-weight:600;letter-spacing:-.02em}
.fe-top i{font-style:normal;font-family:var(--mono);font-size:2.4cqw;color:#8FB5AC;font-weight:400}
.fe-board{display:grid;grid-template-columns:repeat(3,1fr);gap:3cqw;align-items:start}
.fe-col{display:flex;flex-direction:column;gap:2.4cqw;padding:2.4cqw;border-radius:2.4cqw;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
.fe-col .h{font-family:var(--mono);font-size:2.4cqw;letter-spacing:.06em;text-transform:uppercase;color:var(--c1);margin-bottom:1cqw}
.deal{display:flex;flex-direction:column;gap:.4cqw;padding:2.2cqw;border-radius:1.6cqw;background:#12303A;border:1px solid rgba(255,255,255,.08)}
.deal b{font-size:3cqw;font-weight:600;line-height:1.2}
.deal i{font-style:normal;font-family:var(--mono);font-size:2.4cqw;color:#8FB5AC}
.deal.won{background:var(--c2);border-color:var(--c1)}
.deal.slot{min-height:11cqw;background:none;border:1px dashed rgba(31,191,143,.35)}
.deal.mover{position:relative;z-index:1;transition:transform 1.1s var(--ease),background-color 1.1s var(--ease),border-color 1.1s var(--ease)}
.deal.mover.moved{transform:translate(var(--mx,0),var(--my,0));background:var(--c2);border-color:var(--c1)}

/* ===== cards/speechtherapymagic ===== */
/* A practice word, scored live; the words keep coming. */
.c-speechtherapymagic{background:var(--c2);color:var(--c1)}
.c-speechtherapymagic .art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5cqh}
.st-card{width:76cqw;background:var(--white);border-radius:5cqw;padding:7cqw 6cqw 6cqw;display:flex;flex-direction:column;align-items:center;gap:2.6cqw;box-shadow:0 2cqw 5cqw -2cqw rgba(0,100,124,.4)}
.st-sound{font-family:var(--mono);font-size:3.2cqw;color:var(--c3);opacity:.7}
.st-word{font-size:14cqw;font-weight:700;letter-spacing:-.04em;line-height:1;transition:opacity .3s ease,transform .3s ease}
.st-word.swap{opacity:0;transform:translateY(1.6cqw)}
.st-ring{width:30cqw;margin-top:2cqw}
.st-ring circle{fill:none;stroke-width:9}
.st-ring .trk{stroke:#E3F6FF}
.st-ring .val{stroke:var(--c1);stroke-linecap:round;stroke-dasharray:84 100;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dasharray 1s var(--out)}
.st-ring text{font-size:26px;font-weight:700;fill:var(--c1);text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}
.st-note{font-size:3.8cqw;font-weight:600;color:var(--c3)}
.st-chips{display:flex;gap:2.4cqw}
.st-chips span{font-family:var(--mono);font-size:3.4cqw;font-weight:600;padding:1.6cqw 3.2cqw;border-radius:99px;background:rgba(255,255,255,.55)}
.st-chips span:first-child{background:var(--c1);color:var(--white)}

/* ===== cards/vela ===== */
/* Senior people, Latin America to the US. */
.c-vela{background:#F5F0E6;color:var(--c3)}
.ve-line{position:absolute;left:5cqw;top:max(6cqh,4cqw);max-width:15ch;font-size:min(6.4cqw,11cqh);font-weight:500;letter-spacing:-.035em;line-height:1.02}
.ve-line em{font-style:normal;color:var(--c1);white-space:nowrap}
.ve-arc{position:absolute;right:3cqw;bottom:10cqh;width:min(58cqw,90cqh);color:var(--c2)}
.ve-arc circle{fill:var(--c1)}
.ve-arc .mover{fill:var(--c2)}
.ve-arc text{font-family:var(--mono);font-size:13px;fill:#7A6E5C}
.ve-arc .dash{animation:ve-flow 1.4s linear infinite}
@keyframes ve-flow{to{stroke-dashoffset:-18}}
.ve-card{
  position:absolute;left:5cqw;bottom:11cqh;display:flex;align-items:center;gap:1.8cqw;
  background:var(--white);border-radius:1.6cqw;padding:1.8cqw 2.6cqw 1.8cqw 1.8cqw;
  box-shadow:0 1cqw 3cqw -1cqw rgba(31,24,18,.3);animation:ve-bob 3.6s var(--ease) infinite;
}
@keyframes ve-bob{0%,70%,100%{transform:none}85%{transform:translateY(-1cqw)}}
.ve-card .ok{width:5cqw;height:5cqw;border-radius:50%;background:var(--c1);color:var(--white);display:grid;place-items:center;font-size:2.6cqw;font-weight:700}
.ve-card b{display:block;font-size:2.4cqw;font-weight:600}
.ve-card i{font-style:normal;font-size:1.9cqw;color:#7A6E5C}

/* ===== cards/aicopyright ===== */
/* The © on a copier glass: a pink scan line passes over it, and everything above the line
   becomes the slit-scan streaks of the row under the head, as in aicopyright.com's hero. */
.c-aicopyright{background:#fff;color:var(--c3)}
.ac-scan{position:absolute;inset:0;width:100%;height:100%}
.ac-line{position:absolute;left:5cqw;top:max(6cqh,4cqw);z-index:1;max-width:9ch;font-size:min(6.4cqw,11cqh);font-weight:500;letter-spacing:-.035em;line-height:1.02}
.ac-line em{font-style:normal;color:var(--c1)}
.ac-read{position:absolute;left:5cqw;top:calc(max(6cqh,4cqw) + 3.3 * min(6.4cqw,11cqh));z-index:1;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--c2)}
.ac-read b{font-weight:400;display:inline-block;min-width:4ch}
/* A hairline and printer's crop marks, so the white glass reads on the white page. */
.c-aicopyright{box-shadow:inset 0 0 0 1px rgba(5,5,28,.1)}
.c-aicopyright .art::after{
  content:"";position:absolute;inset:clamp(8px,2.4cqmin,14px);pointer-events:none;
  --m:clamp(10px,3.2cqmin,18px);--t:1.5px;
  background:
    linear-gradient(var(--c1),var(--c1)) 0 0/var(--m) var(--t),linear-gradient(var(--c1),var(--c1)) 0 0/var(--t) var(--m),
    linear-gradient(var(--c1),var(--c1)) 100% 0/var(--m) var(--t),linear-gradient(var(--c1),var(--c1)) 100% 0/var(--t) var(--m),
    linear-gradient(var(--c1),var(--c1)) 0 100%/var(--m) var(--t),linear-gradient(var(--c1),var(--c1)) 0 100%/var(--t) var(--m),
    linear-gradient(var(--c1),var(--c1)) 100% 100%/var(--m) var(--t),linear-gradient(var(--c1),var(--c1)) 100% 100%/var(--t) var(--m);
  background-repeat:no-repeat;
}

/* ===== cards/yapper ===== */
/* Voice in, words out. */
.c-yapper{background:var(--c2);color:var(--white)}
.c-yapper .art{display:flex;flex-direction:column;justify-content:center;padding:0 8cqw;gap:8cqh}
.ya-pill{align-self:flex-start;display:flex;align-items:center;gap:2cqw;font-family:var(--mono);font-size:3.2cqw;color:var(--c3);border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:1.4cqw 3.2cqw}
.ya-pill .dot{width:2.2cqw;height:2.2cqw;border-radius:50%;background:var(--c1);animation:ya-pulse 1.6s ease-in-out infinite}
@keyframes ya-pulse{50%{opacity:.3}}
.ya-wave{display:flex;align-items:center;gap:1.5cqw;height:22cqh}
.ya-wave i{flex:1;border-radius:99px;background:var(--c1);height:calc(var(--h) * 1%);animation:ya-talk .9s ease-in-out infinite alternate;animation-delay:calc(var(--d) * -1s)}
@keyframes ya-talk{to{transform:scaleY(.3)}}
.ya-text{font-size:13cqw;font-weight:700;letter-spacing:-.04em;line-height:.98}
.ya-text em{font-style:normal;color:var(--c1)}
.ya-text .ch{visibility:hidden}
.ya-text .ch.on{visibility:visible}
.caret{display:inline-block;width:1.2cqw;height:.82em;margin-left:1.4cqw;vertical-align:-.04em;background:var(--white);animation:ya-blink 1s steps(1) infinite}
@keyframes ya-blink{50%{opacity:0}}

/* ===== cards/hiretalent-lat ===== */
/* A search that keeps typing new roles, with matches from across the region. */
.c-hiretalent-lat{background:var(--c1)}
.c-hiretalent-lat .art{display:flex;flex-direction:column;justify-content:center;padding:0 7cqw;gap:3.2cqh}
.hl-line{font-size:8.6cqw;font-weight:700;letter-spacing:-.035em;line-height:1.02;margin-bottom:3cqh}
.hl-search{display:flex;align-items:center;justify-content:space-between;gap:2cqw;background:var(--white);border-radius:99px;padding:1.6cqw 1.6cqw 1.6cqw 5cqw;box-shadow:0 1cqw 3cqw -1cqw rgba(14,15,26,.25)}
.hl-search .q{font-size:3.8cqw;color:#3B3F4C;white-space:nowrap;overflow:hidden}
.hl-search .q::after{content:"";display:inline-block;width:.4cqw;height:1em;margin-left:.6cqw;vertical-align:-.15em;background:var(--c2);animation:hl-blink 1s steps(1) infinite}
@keyframes hl-blink{50%{opacity:0}}
.hl-search .go{flex:none;background:var(--c2);color:var(--white);font-size:3.6cqw;font-weight:600;border-radius:99px;padding:2.2cqw 4.4cqw}
.hl-rows{display:flex;flex-direction:column;gap:3.2cqh;transition:opacity .4s ease,transform .4s ease}
.hl-rows.swap{opacity:0;transform:translateY(1.4cqw)}
.hl-row{display:flex;align-items:center;gap:3.4cqw;background:rgba(255,255,255,.62);border-radius:3.6cqw;padding:3cqw 3.6cqw}
.c-hiretalent-lat .av{flex:none;width:11cqw;height:11cqw;border-radius:50%;display:grid;place-items:center;background:var(--c2);color:var(--white);font-size:3.6cqw;font-weight:600}
.c-hiretalent-lat .who{display:flex;flex-direction:column;min-width:0}
.c-hiretalent-lat .who b{font-size:4.3cqw;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.c-hiretalent-lat .who i{font-style:normal;font-size:3.3cqw;color:#5A6072}

/* ===== cards/casewell ===== */
/* Handwriting goes in, a clean case file comes out, on a loop. */
.c-casewell{background:#F2EEE6;color:var(--c3)}
.c-casewell .art{display:flex;align-items:center;justify-content:center;gap:3cqw;padding:0 5cqw}
.cw-paper,.cw-file{position:relative;background:var(--white);border-radius:1.2cqw;padding:2.6cqw;box-shadow:0 1cqw 3cqw -1.2cqw rgba(28,27,24,.35)}
.cw-paper{width:36cqw;transform:rotate(-3.5deg);background:#FFFDF6}
.cw-paper svg{display:block;width:100%;margin-top:1.4cqw}
.c-casewell .lbl{display:block;font-family:var(--mono);font-size:max(9px,1.45cqw);letter-spacing:.04em;text-transform:uppercase;color:#8A8577}
.cw-arrow{font-size:5cqw;color:var(--c1);animation:cw-nudge 7s var(--ease) infinite}
.cw-file{width:40cqw}
.cw-file dl{margin-top:1.6cqw}
.cw-file dl div{display:flex;justify-content:space-between;gap:2cqw;padding:1.15cqw 0;border-bottom:1px solid #ECE8DF;font-size:max(11px,1.9cqw);animation:cw-row 7s var(--ease) infinite}
.cw-file dl div:nth-child(2){animation-delay:.25s}
.cw-file dl div:nth-child(3){animation-delay:.5s}
.cw-file dl div:nth-child(4){animation-delay:.75s}
.cw-file dt{color:#8A8577}
.cw-file dd{font-weight:600;font-variant-numeric:tabular-nums}
.ready{display:inline-block;margin-top:2cqw;font-size:max(10px,1.7cqw);font-weight:600;color:var(--white);background:var(--c1);border-radius:99px;padding:.8cqw 2cqw;animation:cw-ready 7s var(--ease) infinite}
.ink path{stroke-dasharray:1;animation:cw-ink 7s var(--ease) infinite}
.ink path:nth-child(2){animation-delay:.2s}
.ink path:nth-child(3){animation-delay:.4s}
.ink path:nth-child(4){animation-delay:.6s}
@keyframes cw-ink{0%{stroke-dashoffset:1}18%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes cw-nudge{0%,22%,40%,100%{transform:none}30%{transform:translateX(1.4cqw)}}
@keyframes cw-row{0%,30%{opacity:0;transform:translateY(.8cqw)}40%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes cw-ready{0%,48%{opacity:0;transform:scale(.8)}56%,90%{opacity:1;transform:none}100%{opacity:0}}

/* ===== cards/mercyhealth ===== */
/* An offline protocol list that keeps opening the next protocol. */
.c-mercyhealth{background:var(--c1);color:var(--ink)}
.c-mercyhealth .art{display:flex;align-items:center;justify-content:center}
.me-panel{width:82cqw;background:var(--white);border-radius:4.6cqw;padding:3cqw;display:flex;flex-direction:column;box-shadow:0 2cqw 6cqw -2cqw rgba(11,62,145,.6)}
.me-head{display:flex;justify-content:space-between;align-items:center;padding:2.6cqw 2.6cqw 3.4cqw}
.me-head b{font-size:6cqw;font-weight:700;letter-spacing:-.03em}
.off{display:flex;align-items:center;gap:1.4cqw;font-family:var(--mono);font-size:2.8cqw;color:var(--c2);background:#E8F0FD;border-radius:99px;padding:1cqw 2.4cqw}
.off i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:#22C55E}
.me-row{display:flex;flex-direction:column;gap:1cqw;padding:3.4cqw 2.6cqw;border-top:1px solid #EEF1F6;position:relative;border-radius:2.6cqw;transition:background-color .5s var(--ease)}
.me-row b{font-size:4cqw;font-weight:600}
.me-row::after{content:"›";position:absolute;right:2.6cqw;top:2.6cqw;font-size:5cqw;color:#A0A8B8;line-height:1;transition:transform .5s var(--ease),color .5s}
.me-row.open{background:#F2F6FE;border-top-color:transparent}
.me-row.open + .me-row{border-top-color:transparent}
.me-row.open::after{transform:rotate(90deg);color:var(--c1)}
.dose{font-family:var(--mono);font-size:3.2cqw;color:var(--c2);max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .6s var(--ease)}
.me-row.open .dose{max-height:8cqw;opacity:1}

/* ===== cards/nyc-world ===== */
/* A pixel skyline; lit windows flicker, one tile is claimed. */
.c-nyc-world{background:var(--c3);color:var(--c1)}
.nyc-city{position:absolute;inset:0;width:100%;height:100%}
.nyc-logo{position:absolute;z-index:1;left:5cqw;top:4.6cqw;font-family:var(--mono);font-size:4.4cqw;font-weight:700;letter-spacing:.02em}
.nyc-tag{position:absolute;z-index:1;left:5cqw;top:11.5cqw;font-family:var(--mono);font-size:2.6cqw;color:var(--c3);background:var(--c1);padding:.8cqw 1.8cqw}
.nyc-city .tw{animation:nyc-twinkle 2.4s steps(2) infinite}
.nyc-city .claim{animation:nyc-claim 2.4s ease-in-out infinite}
@keyframes nyc-twinkle{50%{opacity:.12}}
@keyframes nyc-claim{50%{opacity:.35}}

/* ===== cards/parky ===== */
/* A park passport; a new stamp keeps landing. */
.c-parky{background:var(--c2);color:var(--c1)}
.c-parky .art{display:flex;flex-direction:column;padding:8cqw 7cqw;gap:6cqw}
.pk-head{font-family:var(--mono);font-size:3.4cqw;letter-spacing:.06em;text-transform:uppercase;color:var(--c3);display:flex;justify-content:space-between}
.pk-head b{color:var(--c1)}
.pk-grid{display:grid;grid-template-columns:repeat(2,min(34cqw,22cqh));gap:3.6cqh 6cqw;flex:1;align-content:center;justify-content:center}
.stamp{display:block;aspect-ratio:1;transform:rotate(var(--r,0deg));color:var(--c1)}
.stamp.alt{color:var(--c3)}
.stamp svg{display:block;width:100%;height:100%}
.stamp text{font-family:var(--mono);font-size:9.6px;font-weight:700;letter-spacing:1.6px;fill:currentColor}
.stamp.empty{border:2px dashed rgba(168,239,198,.25);border-radius:50%}
.stamp.e1,.stamp.next{grid-area:3 / 1}
.stamp.next{opacity:0;transform:rotate(var(--r)) scale(1.6);transition:opacity .3s ease,transform .45s cubic-bezier(.3,1.6,.5,1)}
.c-parky.stamped .stamp.next{opacity:1;transform:rotate(var(--r)) scale(1)}

/* ===== cards/climogram ===== */
/* climogram.com's compare hero: two places, a year of monthly averages each on the one temperature scale. */
.c-climogram{background:#F4F2EC;color:var(--c3)}
.cl-head{position:absolute;left:5cqw;top:max(6cqh,4cqw);right:5cqw;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.cl-pair{display:block;font-size:min(7cqw,12cqh);font-weight:700;letter-spacing:-.05em;line-height:1}
.cl-pair i{font-style:normal;font-weight:500;font-size:.5em;letter-spacing:-.01em;color:#6B707A}
.cl-says{margin-top:1.4cqh;font-size:max(12px,2.4cqw);font-weight:500;letter-spacing:-.015em;color:#4D5260}
.c-climogram.swap .cl-head{opacity:0;transform:translateY(4px)}
.cl-panel{
  position:absolute;left:4cqw;right:4cqw;bottom:5cqh;padding:3.4cqw 3.4cqw 2.2cqw;
  background:#fff;border-radius:min(3.6cqw,22px);box-shadow:0 1px 2px rgba(21,23,27,.04),0 12px 32px -16px rgba(21,23,27,.16);
}
.cl-panel > b{display:block;margin-bottom:1.6cqw;font-size:max(11px,1.9cqw);font-weight:600;letter-spacing:-.02em}
.cl-strips{display:block;width:100%;height:auto;overflow:visible}
.cl-strips rect{transition:fill .7s var(--ease)}
.cl-strips text{font-size:12px;fill:#4D5260;font-weight:500}
.cl-strips .m{font-size:10px;letter-spacing:.06em;fill:#6B707A}
.cl-strips .nm{transition:opacity .4s var(--ease)}
.c-climogram.swap .cl-strips .nm{opacity:0}
.cl-strips .today{stroke:#15171B;stroke-opacity:.5}

/* ===== cards/gold-penguin ===== */
/* goldpenguin.org's new hero: off-white with a faint 10px grid, glyph penguins paddling top-down
   (the site's own pond renderer, card.js), a frosted halo behind the light lowercase headline,
   and the white search box with example chips. */
.c-gold-penguin{
  background:#FBFBFA;color:#141418;box-shadow:inset 0 0 0 1px rgba(20,20,24,.08);
  background-image:
    repeating-linear-gradient(to right,rgba(20,20,24,.045) 0 1px,transparent 1px 10px),
    repeating-linear-gradient(to bottom,rgba(20,20,24,.045) 0 1px,transparent 1px 10px);
}
.gp-pond{position:absolute;inset:0;width:100%;height:100%;display:block}
.gp-hero{position:absolute;z-index:1;left:6cqw;right:6cqw;top:50%;transform:translateY(-62%);display:flex;flex-direction:column;align-items:center;text-align:center}
.gp-hero::before{
  content:"";position:absolute;z-index:-1;left:-14cqw;right:-14cqw;top:-14cqh;bottom:-10cqh;border-radius:50%;
  background:radial-gradient(closest-side,rgba(250,250,249,.86),rgba(250,250,249,.45) 60%,rgba(250,250,249,0));
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  -webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent);mask-image:radial-gradient(closest-side,#000 45%,transparent);
}
.gp-head{font-size:max(22px,10.4cqw);font-weight:300;letter-spacing:-.045em;line-height:1.02;color:#111114}
.gp-search{
  width:100%;margin-top:max(14px,6cqw);display:grid;grid-template-columns:1fr auto;gap:max(8px,2.6cqw);text-align:left;
  background:#fff;border:1px solid #CDCDC9;border-radius:max(10px,4cqw);padding:max(10px,3.6cqw);
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 18px 40px -16px rgba(0,0,0,.22);
}
.gp-q{grid-column:1 / -1;font-size:max(11px,4cqw);color:#8B8B92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gp-chips{display:flex;flex-wrap:wrap;gap:max(4px,1.4cqw);align-self:center;overflow:hidden;max-height:max(22px,7.4cqw)}
.gp-chips i{
  font-style:normal;font-family:var(--mono);font-size:max(9px,2.7cqw);color:#55555C;white-space:nowrap;
  border:1px solid #E2E2DF;border-radius:99px;background:#FAFAF8;padding:max(3px,.9cqw) max(7px,2.4cqw);
}
.gp-go{width:max(24px,8.6cqw);aspect-ratio:1;border-radius:max(7px,2.4cqw);background:#141418;display:grid;place-items:center}
.gp-go svg{width:45%;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ===== cards/brainy-skills ===== */
/* Four game tiles in a slow wave. */
.c-brainy-skills{background:linear-gradient(130deg,var(--c1),var(--c2) 55%,var(--c3));color:var(--white)}
.c-brainy-skills .art{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6cqh}
.br-tiles{display:flex;gap:2.6cqw}
.tile{
  width:min(16.5cqw,34cqh);aspect-ratio:1;border-radius:22%;background:var(--white);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6cqw;
  box-shadow:0 1.4cqw 3cqw -1cqw rgba(30,27,90,.45);animation:br-wave 3.2s var(--ease) infinite;
}
.tile:nth-child(2){animation-delay:.18s}
.tile:nth-child(3){animation-delay:.36s}
.tile:nth-child(4){animation-delay:.54s}
@keyframes br-wave{0%,40%,100%{transform:none}20%{transform:translateY(-2.2cqw)}}
.tile b{font-size:min(5.8cqw,12cqh);font-weight:800;letter-spacing:-.03em;background:linear-gradient(130deg,var(--c1),var(--c3));-webkit-background-clip:text;background-clip:text;color:transparent}
.tile i{font-style:normal;font-size:min(1.8cqw,3.8cqh);font-weight:600;color:#4B4F7A}
.br-line{font-size:min(2.5cqw,5cqh);font-weight:500;opacity:.85}

/* ===== cards/walkalyze ===== */
/* Explorer tiles under fog; the walk keeps redrawing itself. */
.c-walkalyze{background:var(--c2);color:var(--c1)}
.wk-map{position:absolute;inset:0;width:100%;height:100%}
.wk-map .route{stroke-dasharray:var(--len);animation:wk-draw 6s var(--ease) infinite}
.wk-map .end{animation:wk-end 6s var(--ease) infinite}
@keyframes wk-draw{0%{stroke-dashoffset:var(--len);opacity:1}60%,90%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes wk-end{0%,56%{opacity:0}62%,90%{opacity:1}100%{opacity:0}}
.wk-stat{position:absolute;right:4cqw;top:5cqh;display:flex;flex-direction:column;align-items:flex-end;background:rgba(23,38,59,.85);border:1px solid rgba(255,255,255,.1);border-radius:1.6cqw;padding:1.6cqw 2.4cqw}
.wk-stat i{font-style:normal;font-family:var(--mono);font-size:max(10px,1.4cqw);color:#8DA2BE;text-transform:uppercase;letter-spacing:.06em}
.wk-stat b{font-size:3.6cqw;font-weight:700;letter-spacing:-.02em;color:var(--white)}

/* ===== cards/insane-intelligence ===== */
/* A neon poster with a button that keeps getting pressed. */
.c-insane-intelligence{background:var(--c1);color:var(--c3)}
.c-insane-intelligence .art{display:flex;flex-direction:column;padding:7cqw 6cqw}
.in-top{align-self:flex-start;font-family:var(--mono);font-size:3.2cqw;font-weight:700;text-transform:uppercase;letter-spacing:.08em;border:.5cqw solid currentColor;padding:1cqw 2.4cqw}
.in-word{margin-top:auto;display:flex;flex-direction:column;font-weight:900;letter-spacing:-.045em;line-height:.84}
.in-word span:first-child{font-size:22.5cqw}
.in-word span:last-child{font-size:11.3cqw;letter-spacing:-.04em}
.in-play{
  align-self:flex-start;margin-top:7cqw;font-size:5cqw;font-weight:900;text-transform:uppercase;letter-spacing:.02em;
  background:var(--c2);color:var(--c3);padding:2.2cqw 5cqw;border:.6cqw solid var(--c3);
  box-shadow:1.6cqw 1.6cqw 0 var(--c3);animation:in-press 2.2s var(--ease) infinite;
}
@keyframes in-press{0%,55%,100%{transform:none;box-shadow:1.6cqw 1.6cqw 0 var(--c3)}70%,80%{transform:translate(1.6cqw,1.6cqw);box-shadow:0 0 0 var(--c3)}}
.in-foot{margin-top:6cqw;margin-bottom:12cqh;font-family:var(--mono);font-size:3.1cqw;font-weight:600}