/* =====================================================
   EXTRAS: animations, product demos, easter eggs and
   the hire / reading / ask / redesign pages.
   Uses the tokens defined in styles.css.
   ===================================================== */

/* ── Page transitions (fjord-blue wipe) ── */
@view-transition { navigation: auto; }
html::view-transition { background: var(--panel-blue); }
::view-transition-old(root) { animation: wipe-out .26s ease-in both; }
::view-transition-new(root) { animation: wipe-in .34s ease-out .2s both; }
@keyframes wipe-out { to   { clip-path: inset(0 0 0 100%); } }
@keyframes wipe-in  { from { clip-path: inset(0 100% 0 0); } }

/* ── Barça mode ── */
:root[data-club="barca"] {
  --primary: #004D98;
  --primary-dark: #003A73;
  --primary-pale: rgba(0, 77, 152, .1);
  --on-primary: #ffffff;
  --accent: #A50044;
  --amber: #B8860B;
  --panel-blue: #004D98;
  --panel-clay: #A50044;
  --panel-sage: #003A73;
}
:root[data-club="barca"][data-theme="dark"] {
  --primary: #6FA8E8;
  --primary-dark: #9CC4F2;
  --on-primary: #06192E;
  --accent: #F0598F;
  --amber: #EDBB00;
}
:root[data-club="barca"] .scroll-progress {
  background: repeating-linear-gradient(90deg, #A50044 0 24px, #004D98 24px 48px);
}

.confetti {
  position: fixed;
  inset: 0;
  z-index: 400;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ── Northern lights (dark theme only) ── */
.aurora { display: none; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
[data-theme="dark"] .aurora { display: block; }
.aurora i {
  position: absolute;
  width: 60vw; height: 46vh;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .34;
  animation: aurora 22s ease-in-out infinite alternate;
}
.aurora i:nth-child(1) { top: -18%; left: -8%;  background: #2FD8A2; }
.aurora i:nth-child(2) { top: -24%; left: 30%;  background: #3E8EDE; animation-duration: 28s; animation-delay: -6s; }
.aurora i:nth-child(3) { top: -12%; right: -14%; background: #9B6BE0; animation-duration: 34s; animation-delay: -12s; opacity: .26; }
@keyframes aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate3d(6vw, 5vh, 0) scale(1.25) rotate(8deg); }
  100% { transform: translate3d(-5vw, 2vh, 0) scale(.9) rotate(-6deg); }
}
.hero > .container { position: relative; }

/* ── Tilting tiles ── */
.bento { perspective: 900px; }
.tile.tilting { transition: transform .08s linear, box-shadow .25s; will-change: transform; }

/* ── Intro video ── */
.play-btn {
  position: absolute;
  left: 50%; bottom: 12px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  color: #1E2A32;
  background: rgba(253, 252, 249, .94);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.play-btn::before { content: ''; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.tile-photo video { width: 100%; height: 100%; object-fit: cover; }

/* ── Duolingo flame ── */
.streak { display: flex; align-items: center; gap: 12px; }
.flame {
  flex: none;
  width: 34px; height: 34px;
  transform-origin: 50% 90%;
  transform: scale(var(--flame, 1));
  animation: flicker 1.6s ease-in-out infinite;
}
@keyframes flicker {
  0%, 100% { transform: scale(var(--flame, 1)) rotate(-2deg); }
  50%      { transform: scale(calc(var(--flame, 1) * 1.08)) rotate(2deg); }
}

/* ── Journey map ── */
.journey-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 64px;
  padding-top: 34px;
}
.journey-map::before, .journey-map::after {
  content: '';
  position: absolute;
  top: 8px; left: 0;
  height: 2px;
  border-radius: 2px;
}
.journey-map::before { width: 100%; background: var(--border); }
.journey-map::after {
  width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 2.4s cubic-bezier(.6, 0, .3, 1) .2s;
}
.journey-map.visible::after { transform: scaleX(1); }

.stop { position: relative; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.journey-map.visible .stop { opacity: 1; transform: none; }
.journey-map.visible .stop:nth-child(1) { transition-delay: .2s; }
.journey-map.visible .stop:nth-child(2) { transition-delay: .6s; }
.journey-map.visible .stop:nth-child(3) { transition-delay: 1s; }
.journey-map.visible .stop:nth-child(4) { transition-delay: 1.4s; }
.journey-map.visible .stop:nth-child(5) { transition-delay: 1.8s; }
.journey-map.visible .stop:nth-child(6) { transition-delay: 2.2s; }
.stop::before {
  content: '';
  position: absolute;
  top: -32px; left: 0;
  width: 14px; height: 14px;
  background: var(--bg);
  border: 3px solid var(--primary);
  border-radius: 50%;
}
.stop:last-child::before { background: var(--accent); border-color: var(--accent); }
.stop-year  { font-size: .78rem; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.stop-place { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; letter-spacing: -.015em; }
.stop-what  { margin-top: 4px; font-size: .84rem; color: var(--text-muted); }

/* ── Lab card previews ── */
.card-preview {
  position: relative;
  margin: -26px -26px 20px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-tint);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom: 1px solid var(--border);
}
.card-preview img, .card-preview video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
}
.card-preview video { opacity: 0; transition: opacity .3s; }
.card-preview.playing video { opacity: 1; }
.preview-hint {
  position: absolute;
  right: 10px; bottom: 10px;
  padding: 3px 10px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #F7F4EE;
  background: rgba(18, 25, 30, .72);
  border-radius: 999px;
  transition: opacity .2s;
}
.card-preview.playing .preview-hint { opacity: 0; }

/* ── Testimonials ── */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.quote {
  padding: 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.quote blockquote { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.4; letter-spacing: -.01em; }
.quote figcaption { margin-top: 18px; font-size: .88rem; color: var(--text-muted); }
.quote figcaption strong { display: block; color: var(--text); }

/* ── Product demos (case studies) ── */
.demo {
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.demo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.demo-label {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.demo-note { margin-top: 16px; font-size: .8rem; color: var(--text-light); }
.demo-replay {
  padding: 5px 12px;
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  color: var(--primary);
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.demo-replay:hover { border-color: var(--primary); }

/* Release time */
.release-value {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.release-value.done { color: var(--accent); }
.release-track { height: 14px; margin-top: 22px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; }
.release-fill {
  width: 100%; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  border-radius: 999px;
  transition: width .38s ease;
}
.release-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: .78rem; color: var(--text-light); }

/* Odds ticker */
.odds { display: grid; gap: 8px; }
.odds-row {
  display: grid;
  grid-template-columns: 1fr repeat(3, 76px);
  gap: 8px;
  align-items: center;
  font-size: .9rem;
}
.odds-head { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-light); }
.odds-head span:not(:first-child) { text-align: center; }
.odds-match { font-weight: 500; }
.odds-match small { display: block; font-size: .74rem; font-weight: 400; color: var(--text-light); }
.price {
  padding: 8px 0;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  transition: background .6s, color .6s;
}
.price-none { text-align: center; color: var(--text-light); }
.price.up   { background: var(--ok-bg);     color: var(--ok-fg); }
.price.down { background: var(--danger-bg); color: var(--danger-fg); }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; color: var(--danger-fg); }
.live-dot::before { content: ''; width: 8px; height: 8px; background: currentColor; border-radius: 50%; animation: pulse-dot 1.4s infinite; }
@keyframes pulse-dot { 50% { opacity: .25; } }

/* Set-top box */
.stb { max-width: 640px; }
.tv {
  position: relative;
  aspect-ratio: 16 / 9;
  padding: 10px;
  background: #0E1317;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}
.tv-screen { position: relative; width: 100%; height: 100%; overflow: hidden; color: #ECE7DD; background: #16212A; border-radius: 6px; }
.tv-stand { width: 120px; height: 8px; margin: 0 auto; background: #0E1317; border-radius: 0 0 8px 8px; }
.tv-view {
  position: absolute;
  inset: 0;
  padding: 5%;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .6s, transform .6s;
  font-size: clamp(.6rem, 1.7vw, .85rem);
}
.tv-view.on { opacity: 1; transform: none; }
.tv-title { margin-bottom: 4%; font-size: 1.25em; font-weight: 600; }
.tv-guide { display: grid; gap: 3%; }
.tv-guide div { display: grid; grid-template-columns: 22% 1fr 1fr; gap: 2%; }
.tv-guide span { padding: 3% 4%; background: rgba(236, 231, 221, .08); border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-guide div.sel span { background: #8FC1DD; color: #10222C; font-weight: 600; }
.tv-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; height: 74%; }
.tv-apps span { display: grid; place-items: center; font-weight: 600; border-radius: 8px; }
.tv-apps span:nth-child(1) { background: #A84A33; } .tv-apps span:nth-child(2) { background: #24506B; }
.tv-apps span:nth-child(3) { background: #3C5A4F; } .tv-apps span:nth-child(4) { background: #6B4E8A; }
.tv-apps span:nth-child(5) { background: #B7791F; } .tv-apps span:nth-child(6) { background: #35607A; }
.tv-apps span.sel { outline: 3px solid #ECE7DD; outline-offset: 2px; }
.tv-player { display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(160deg, #24506B, #12191E 70%); }
.tv-progress { height: 5px; margin-top: 3%; background: rgba(236, 231, 221, .25); border-radius: 999px; overflow: hidden; }
.tv-progress i { display: block; width: 0; height: 100%; background: #E58A6E; }
.tv-view.on .tv-progress i { animation: tv-play 3.4s linear forwards; }
@keyframes tv-play { to { width: 62%; } }

/* A/B test */
.ab { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.variant { position: relative; padding: 22px; background: var(--bg-soft); border-radius: var(--radius); }
.variant-name { font-size: .74rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); }
.variant-mock { display: grid; gap: 8px; margin: 16px 0 20px; }
.variant-mock i { display: block; height: 9px; background: var(--border); border-radius: 999px; }
.variant-mock i:nth-child(2) { width: 70%; }
.variant-mock b { justify-self: start; margin-top: 6px; padding: 8px 18px; font-size: .8rem; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; }
.variant.b .variant-mock b { color: var(--on-primary); background: var(--primary); border-color: var(--primary); }
.ab-track { height: 12px; background: var(--border-soft); border-radius: 999px; overflow: hidden; }
.ab-fill { width: 0; height: 100%; background: var(--text-light); border-radius: 999px; transition: width 1.4s cubic-bezier(.3, 0, .2, 1); }
.variant.b .ab-fill { background: var(--accent); }
.ab-figure { margin-top: 10px; font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -.02em; }
.winner {
  position: absolute;
  top: 16px; right: 16px;
  padding: 3px 11px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ok-fg);
  background: var(--ok-bg);
  border-radius: 999px;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .4s 1.3s, transform .4s 1.3s cubic-bezier(.3, 1.6, .5, 1);
}
.ab.run .winner { opacity: 1; transform: none; }

/* Terminal */
.terminal {
  overflow: hidden;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: .84rem;
  line-height: 1.7;
  color: #D6DEE3;
  background: #0E1317;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.terminal-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #1A2229; }
.terminal-bar i { width: 11px; height: 11px; background: #3A4650; border-radius: 50%; }
.terminal-bar span { margin-left: 8px; font-size: .74rem; color: #8E9AA2; }
.terminal-body { height: 270px; padding: 16px 18px; overflow: hidden; white-space: pre-wrap; }
.terminal-body .cmd::before { content: '$ '; color: #E58A6E; }
.terminal-body .ok   { color: #A5D6BF; }
.terminal-body .dim  { color: #8E9AA2; }
.terminal-body .head { color: #8FC1DD; font-weight: 600; }
.caret { display: inline-block; width: 8px; height: 1.05em; vertical-align: text-bottom; background: #D6DEE3; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.feature-demo { grid-column: 1 / -1; }
.feature-demo .demo-note { color: var(--panel-muted); }

/* ── Cricket easter egg ── */
.game {
  width: min(680px, calc(100vw - 32px));
  margin: auto;
  padding: 22px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.game::backdrop { background: rgba(18, 25, 30, .6); backdrop-filter: blur(3px); }
.game-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.game-head h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; }
.game canvas { display: block; width: 100%; height: auto; background: #3C5A4F; border-radius: var(--radius); touch-action: manipulation; cursor: pointer; }
.game-score { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: .9rem; color: var(--text-muted); }
.game-score strong { color: var(--text); font-variant-numeric: tabular-nums; }
.game-help { margin-top: 8px; font-size: .82rem; color: var(--text-light); }

/* ── Before / after slider ── */
.compare {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  --split: 50%;
}
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; user-select: none; pointer-events: none; }
.compare .after { clip-path: inset(0 0 0 var(--split)); }
.compare-line { position: absolute; top: 0; bottom: 0; left: var(--split); width: 3px; margin-left: -1.5px; background: #FDFCF9; box-shadow: 0 0 0 1px rgba(18, 25, 30, .25); pointer-events: none; }
.compare-line::after {
  content: '⟷';
  position: absolute;
  top: 50%; left: 50%;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  color: #1E2A32;
  background: #FDFCF9;
  border-radius: 50%;
  box-shadow: var(--shadow);
  transform: translate(-50%, -50%);
}
.compare input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.compare-tag {
  position: absolute;
  top: 14px;
  padding: 4px 12px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #F7F4EE;
  background: rgba(18, 25, 30, .75);
  border-radius: 999px;
  pointer-events: none;
}
.compare-tag.before { left: 14px; }
.compare-tag.after-tag { right: 14px; }
.compare:focus-within { outline: 2px solid var(--primary); outline-offset: 3px; }

/* ── Hire page ── */
.hire { max-width: 900px; }
.hire-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.hire-head h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 500; line-height: 1.05; letter-spacing: -.025em; }
.hire-head p { margin-top: 6px; color: var(--text-muted); }
.hire-contact { display: grid; gap: 4px; font-size: .9rem; text-align: right; }
.hire-contact a { color: var(--primary); text-decoration: none; }
.hire-section { display: grid; grid-template-columns: 170px 1fr; gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--border-soft); }
.hire-section > h2 { font-size: .76rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.hire-role + .hire-role { margin-top: 22px; }
.hire-role h3 { font-size: 1.02rem; font-weight: 600; }
.hire-role h3 span { font-weight: 400; color: var(--text-muted); }
.hire-role ul { margin-top: 8px; padding-left: 18px; list-style: disc; color: var(--text-muted); }
.hire-role li { margin-top: 4px; font-size: .93rem; }
.hire-wins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hire-wins div { padding: 16px; background: var(--bg-soft); border-radius: var(--radius); }
.hire-wins strong { display: block; font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; color: var(--primary); }
.hire-wins span { font-size: .82rem; color: var(--text-muted); }
.hire-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ── Reading list ── */
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.book { padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.book-status { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); }
.book-status.reading { color: var(--accent); }
.book h3 { margin-top: 6px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; line-height: 1.25; letter-spacing: -.015em; }
.book-author { font-size: .86rem; color: var(--text-muted); }
.book-note { margin-top: 10px; padding-top: 10px; font-size: .88rem; color: var(--text-muted); border-top: 1px solid var(--border-soft); }

/* ── Ask my work ── */
.ask-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.ask-examples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.answers { display: grid; gap: 12px; margin-top: 28px; max-width: 860px; }
.answer { display: block; padding: 22px 24px; text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color .2s; }
.answer:hover { border-color: var(--primary); }
.answer-source { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sage); }
.answer p { margin-top: 6px; color: var(--text); }
.answer mark { padding: 0 2px; color: inherit; background: var(--warn-bg); border-radius: 3px; }

@media (max-width: 820px) {
  .journey-map { grid-template-columns: repeat(3, 1fr); gap: 40px 12px; }
  .journey-map::before, .journey-map::after { display: none; }
  .stop::before { position: static; display: block; margin-bottom: 8px; }
  .ab { grid-template-columns: 1fr; }
  .odds-row { grid-template-columns: 1fr repeat(3, 58px); font-size: .82rem; }
  .hire-section { grid-template-columns: 1fr; gap: 12px; }
  .hire-wins { grid-template-columns: 1fr; }
  .hire-contact { text-align: left; }
  .ask-form { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .aurora i, .flame, .live-dot::before, .caret { animation: none; }
  .journey-map::after { transform: scaleX(1); }
  .stop { opacity: 1; transform: none; }
}

/* ── Print: the hire page as a one-page PDF ── */
@media print {
  .site-header, .site-footer, .scroll-progress, .skip-link, .back-link, .hire-actions, .palette, .toast, .aurora { display: none !important; }
  body { background: #fff; color: #111; font-size: 10.5pt; }
  .page-hero, .page-body { padding: 0; }
  .hire { max-width: none; }
  .hire-section { padding: 12pt 0; gap: 16pt; break-inside: avoid; }
  .hire-wins div { background: none; border: 1px solid #ccc; }
  a { color: inherit; text-decoration: none; }
  @page { margin: 14mm; }
}

/* Streak line: the number inherits the heading style */
.streak p { margin: 0; }
.side-item strong span { font: inherit; color: inherit; }

/* =====================================================
   Second batch: study entries, language switch, shipping
   pill, match-day banner, forms, RICE, questions, chart
   ===================================================== */

/* Study entries in the timeline */
.timeline > li.study::before { border-color: var(--sage); border-radius: 3px; }
.timeline > li.study .timeline-year { color: var(--sage); }
.journey-map { grid-template-columns: repeat(7, 1fr); }
.journey-map.visible .stop:nth-child(7) { transition-delay: 2.6s; }

/* Language switch */
.lang select {
  height: 40px;
  padding: 0 10px;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.lang select:hover { border-color: var(--text-muted); }

/* Currently shipping */
.hero-copy { min-width: 0; }
.ship-bar {
  display: inline-flex;
  overflow: hidden;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-bottom: 18px;
  padding: 7px 14px;
  font-size: .8rem;
  color: var(--text-muted);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: border-color .2s;
}
.ship-bar:hover { border-color: var(--primary); }
.ship-bar strong { flex: none; color: var(--text); font-weight: 600; }
.ship-dot { flex: none; width: 8px; height: 8px; background: var(--sage); border-radius: 50%; animation: pulse-dot 1.6s infinite; }
.ship-repo { flex: none; font-weight: 600; color: var(--primary); }
.ship-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ship-when { flex: none; color: var(--text-light); }

/* Match-day banner */
.matchday {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: var(--header-h);
  padding: 9px 48px 9px 16px;
  font-size: .86rem;
  color: #ffffff;
  text-align: center;
  background: linear-gradient(90deg, #A50044, #004D98);
}
.matchday:not([hidden]) + .hero { padding-top: 56px; }
.matchday-close {
  position: absolute;
  right: 12px; top: 50%;
  width: 28px; height: 28px;
  font-size: 1.1rem;
  line-height: 1;
  color: inherit;
  background: rgba(255, 255, 255, .16);
  border: 0;
  border-radius: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/* Forms */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 760px; }
.form label { display: grid; gap: 6px; font-size: .86rem; font-weight: 600; }
.form .wide, .form button { grid-column: 1 / -1; }
.form button { justify-self: start; }
.form input, .form textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-weight: 400;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.form input:focus, .form textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.form textarea { resize: vertical; }

/* RICE calculator */
.rice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.rice-wrap { position: relative; max-width: 100%; overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.rice { width: 100%; min-width: 760px; border-collapse: collapse; }
.rice th, .rice td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-soft); }
.rice th { font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-soft); }
.rice th small { display: block; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-light); }
.rice tr:last-child td { border-bottom: 0; }
.rice input, .rice select {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: .9rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.rice td:not(.rice-name) input { max-width: 110px; }
.rice-name { min-width: 220px; }
.rice-rank { width: 40px; font-weight: 600; color: var(--text-light); font-variant-numeric: tabular-nums; }
.rice-score { font-family: var(--font-display); font-size: 1.4rem; font-variant-numeric: tabular-nums; color: var(--primary); }
.rice tr.top .rice-score, .rice tr.top .rice-rank { color: var(--accent); }
.rice-remove { width: 30px; height: 30px; font-size: 1.1rem; color: var(--text-muted); background: none; border: 1px solid var(--border); border-radius: 50%; cursor: pointer; }
.rice-remove:hover { color: var(--danger-fg); border-color: var(--danger-fg); }
#riceEmpty { margin: 16px; }

/* Interview questions */
.questions { display: grid; gap: 10px; max-width: 860px; }
.question { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.question[open] { border-color: var(--primary); }
.question summary { display: grid; gap: 4px; padding: 18px 48px 18px 22px; position: relative; cursor: pointer; list-style: none; }
.question summary::-webkit-details-marker { display: none; }
.question summary::after { content: '+'; position: absolute; right: 20px; top: 50%; font-size: 1.4rem; color: var(--text-muted); transform: translateY(-50%); }
.question[open] summary::after { content: '–'; }
.question-text { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.3; letter-spacing: -.015em; }
.question-steps { margin: 0 22px 18px 44px; list-style: decimal; color: var(--text-muted); }
.question-steps li { padding: 4px 0; }
.question-watch { margin: 0 22px 20px; padding: 10px 14px; font-size: .88rem; color: var(--warn-fg); background: var(--warn-bg); border-radius: var(--radius-sm); }

/* Year in review chart */
.chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; align-items: end; height: 240px; padding: 16px 0 0; }
.bar { display: grid; grid-template-rows: 1fr auto; gap: 6px; height: 100%; min-height: 0; text-align: center; }
.bar-area { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 0; }
.bar i { flex: none; display: block; width: 100%; min-height: 2px; background: var(--primary); border-radius: 6px 6px 0 0; transition: height 1.2s cubic-bezier(.3, 0, .2, 1); }
.bar.top i { background: var(--accent); }
.bar-value { font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-label { font-size: .74rem; color: var(--text-light); }

/* Intro video dialog */
.video-dialog { width: min(960px, calc(100vw - 32px)); padding: 14px; }
.video-dialog video { display: block; width: 100%; border-radius: var(--radius); background: #000; }
.video-dialog .icon-btn { margin: 0 0 10px auto; display: flex; }

@media (max-width: 1100px) {
  .lang select { padding: 0 6px; }
}
@media (max-width: 820px) {
  .journey-map { grid-template-columns: repeat(3, 1fr); }
  .form { grid-template-columns: 1fr; }
  .chart { gap: 4px; height: 200px; }
  .ship-when { display: none; }
}

/* Speaker kit and event types */
.result-word { font-size: 1.7rem !important; }
.kit { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; max-width: 900px; }
.kit-photo { display: grid; gap: 12px; justify-items: start; }
.kit-photo img { width: 220px; height: 220px; object-fit: cover; object-position: center 12%; border-radius: var(--radius-lg); }
.kit-bios { display: grid; gap: 14px; }
.kit-bio { padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.kit-bio .demo-head { margin-bottom: 10px; }
.kit-bio p { color: var(--text-muted); }
.form select {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-weight: 400;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
@media (max-width: 820px) { .kit { grid-template-columns: 1fr; } }

/* =====================================================
   Third batch: events, writing hub, journal, glossary,
   AI page, streak, visitors, achievements, recruiter view
   ===================================================== */

.hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.hub .principle-no { font-family: var(--font-display); font-size: 2rem; font-style: italic; line-height: 1; color: var(--accent); }

/* Ideas on the events page */
.idea-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.idea { padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.idea .principle-no { font-family: var(--font-display); font-size: 2.2rem; font-style: italic; line-height: 1; color: var(--accent); }
.idea h3 { margin: 10px 0 8px; font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; letter-spacing: -.02em; }
.idea > p { margin-bottom: 8px; color: var(--text-muted); }
.idea .checks li { padding: 9px 0 9px 26px; font-size: .92rem; }
.idea .checks li::before { top: 17px; width: 7px; height: 7px; }

/* Skill of the week */
.sotw {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 4px 20px;
  align-items: center;
  margin-bottom: 26px;
  padding: 20px 26px;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  transition: border-color .2s, transform .2s;
}
.sotw:hover { transform: translateY(-2px); border-color: var(--accent); }
.sotw-label { grid-row: span 2; font-size: .74rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); }
.sotw-title { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -.015em; }
.sotw-summary { grid-column: 2; font-size: .9rem; color: var(--text-muted); }
.sotw .card-cat { grid-column: 3; grid-row: 1 / span 2; }

/* Decision journal */
.decisions { display: grid; gap: 16px; max-width: 860px; }
.decision { padding: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.decision h2 { margin: 8px 0 18px; font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.decision-row { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border-soft); }
.decision-row h3 { font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding-top: 3px; }
.decision-row p { color: var(--text-muted); }
.decision-row:last-child p { color: var(--text); font-weight: 500; }

/* Glossary */
.term-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.term { padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.term h2 { margin: 6px 0 8px; font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; letter-spacing: -.015em; }
.term p { font-size: .93rem; color: var(--text-muted); }
.term-example { margin-top: 12px; padding: 10px 14px; color: var(--info-fg) !important; background: var(--info-bg); border-radius: var(--radius-sm); }

/* How I use AI */
.ai-steps { display: grid; gap: 16px; }
.ai-step { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; padding: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.ai-step h2 { margin: 10px 0; font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.ai-step p { margin-bottom: 14px; color: var(--text-muted); }
.ai-step .principle-no { font-family: var(--font-display); font-size: 2.2rem; font-style: italic; line-height: 1; color: var(--accent); }
.ai-shot { overflow: hidden; border-radius: var(--radius); }
.ai-shot img { width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.ai-shot:empty, .ai-shot:not(:has(img)) { display: none; }
.ai-step:not(:has(img)) { grid-template-columns: 1fr; }

/* Predictions */
#nextMatch h2 { margin: 6px 0 10px; font-family: var(--font-display); font-size: 2rem; font-weight: 500; letter-spacing: -.02em; }
.predict-score { font-size: 1.05rem; font-weight: 600; color: var(--primary); }

/* Streak milestones */
.milestones > li.ahead { opacity: .55; }
.milestones > li.ahead::before { border-style: dashed; }
.milestones > li.done::before { background: var(--primary); }
.timeline.milestones > li:first-child::before { background: var(--primary); border-color: var(--primary); }

/* Visitors */
.countries { display: grid; gap: 8px; max-width: 860px; }
.countries li { display: grid; grid-template-columns: 220px 1fr 70px; gap: 16px; align-items: center; }
.country-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.country-bar { height: 12px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; }
.country-bar i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.countries strong { text-align: right; font-variant-numeric: tabular-nums; }

/* Achievements */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.badge { padding: 24px; text-align: center; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.badge.earned { border-style: solid; border-color: var(--amber); }
.badge-mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 14px; font-size: 1.5rem; color: var(--text-light); background: var(--bg-soft); border-radius: 50%; }
.badge.earned .badge-mark { color: #fff; background: var(--amber); }
.badge h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; }
.badge p { margin-top: 4px; font-size: .86rem; color: var(--text-muted); }
.badge-date { display: block; margin-top: 10px; font-size: .74rem; color: var(--text-light); }

/* Availability */
.availability { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.availability > div { padding: 14px 16px; background: var(--ok-bg); border-radius: var(--radius); }
.availability dt { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ok-fg); }
.availability dd { margin-top: 4px; font-weight: 600; }

.pdf-link { margin-top: 22px; }

/* Recruiter view: role, results and availability only */
.recruiter-bar {
  position: sticky;
  top: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  padding: 9px 16px;
  font-size: .86rem;
  color: var(--panel-text);
  background: var(--panel-blue);
}
.recruiter-bar a { color: inherit; font-weight: 600; }
.recruiter-bar button { padding: 4px 14px; font: inherit; font-weight: 600; color: #1E2A32; background: var(--panel-text); border: 0; border-radius: 999px; cursor: pointer; }
[data-recruiter] .site-header { top: 38px; }
[data-recruiter] #lab,
[data-recruiter] #writing,
[data-recruiter] #testimonials,
[data-recruiter] .section-tight,
[data-recruiter] .aurora,
[data-recruiter] .matchday,
[data-recruiter] .ship-bar,
[data-recruiter] .tile-log,
[data-recruiter] .side-card + .side-card,
[data-recruiter] .footer-pages,
[data-recruiter] .lang { display: none !important; }
[data-recruiter] .bento { grid-template-columns: 1fr 1fr; }

@media (max-width: 820px) {
  .hub-grid, .idea-grid, .ai-step { grid-template-columns: 1fr; }
  .decision { padding: 22px; }
  .decision-row { grid-template-columns: 1fr; gap: 2px; }
  .sotw { grid-template-columns: 1fr; }
  .sotw-label, .sotw .card-cat, .sotw-summary { grid-column: 1; grid-row: auto; }
  .countries li { grid-template-columns: 1fr 60px; }
  .country-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* Case studies and teardowns print as clean documents */
@media print {
  .demo, .stb, .next-case, .pdf-link, .recruiter-bar, .matchday, .compare, .demo-note, [data-terminal] { display: none !important; }
  .page-title { font-size: 28pt; }
  .facts { margin-bottom: 18pt; }
  .cs-block { margin-bottom: 16pt; break-inside: avoid; }
  .cs-block:has(> .demo:only-of-type), .cs-block:has(> .stb) { display: none; }
  .result { border: 1px solid #ccc; background: none; }
  .result strong { font-size: 20pt; }
  .checks li { padding: 5pt 0 5pt 18pt; }
}

/* Long notes in a row wrap instead of pushing the page wide */
.rows li > span { flex: 0 1 auto; min-width: 0; text-align: right; }

/* Site statistics */
.stat-table li { grid-template-columns: minmax(0, 1.4fr) 1fr 56px; }
.stat-table .stat-empty { display: block; color: var(--text-muted); }
#statChart .bar-label { font-size: .62rem; writing-mode: vertical-rl; justify-self: center; }

/* =====================================================
   Prediction game
   ===================================================== */
.predict { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
.predict-main, .predict-side { display: grid; gap: 16px; }
.predict-match { margin: 6px 0 22px; font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.predict-rules li { padding: 9px 0 9px 26px; font-size: .9rem; }
.predict-rules li::before { top: 17px; width: 7px; height: 7px; }

.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 18px; }
.price-btn {
  display: grid;
  gap: 4px;
  padding: 16px 12px;
  font: inherit;
  text-align: center;
  color: var(--text);
  background: var(--bg-soft);
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s;
}
.price-btn:hover { transform: translateY(-2px); border-color: var(--border); }
.price-btn span { font-size: .84rem; color: var(--text-muted); }
.price-btn strong { font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.price-btn.on { background: var(--primary-pale); border-color: var(--primary); }
.price-btn.on strong { color: var(--primary); }

.stake { display: grid; gap: 14px; }
.stake-row { display: grid; grid-template-columns: 60px 1fr; gap: 12px; align-items: center; font-size: .86rem; font-weight: 600; }
.stake-row input { width: 100%; accent-color: var(--primary); }
.score-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .86rem; color: var(--text-muted); }
.score-row input {
  width: 58px;
  padding: 8px;
  font: inherit;
  text-align: center;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.slip-line { margin-top: 8px; font-family: var(--font-display); font-size: 1.7rem; letter-spacing: -.02em; color: var(--primary); }
.slip-detail { font-size: .95rem; color: var(--text); }
.stake .btn { justify-self: start; }
.stake .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.crowd-row { display: grid; grid-template-columns: 150px 1fr 44px; gap: 12px; align-items: center; margin-top: 12px; font-size: .88rem; }
.crowd-row strong { text-align: right; font-variant-numeric: tabular-nums; }
.rows .won { color: var(--ok-fg); font-weight: 700; }
.rows .lost { color: var(--danger-fg); font-weight: 700; }
.matchday a { color: inherit; font-weight: 600; }

@media (max-width: 820px) {
  .predict { grid-template-columns: 1fr; }
  .crowd-row { grid-template-columns: 110px 1fr 40px; }
  .price-btn strong { font-size: 1.5rem; }
}