/*
NOONBOUND SITE STYLES
Version: 20260616r

Editing map:
1. Base / legacy site styles
   - Shared typography, header, nav, cards, portfolio pages, older helper classes.
   - Some legacy selectors remain because portfolio/detail pages still use them.

2. Current page systems
   - HOME PAGE: hfx-* classes
   - PROTOTYPES PAGE: proto2-* classes
   - RESUME PAGE: resume-* classes
   These are the safest areas to edit for the current visible layouts.

Notes:
- There is now one active stylesheet: /assets/css/style.css
- HTML pages reference it with a cache-busting query string.
- Old style.20260616*.css files were removed from the package.
*/

:root{
  --bg:#101322; --panel:#1b203a; --ink:#fbf9ff; --muted:#cdc9dc;
  --line:rgba(255,255,255,.13); --purple:#b995ff; --cyan:#72e7ff; --orange:#ffd078;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:radial-gradient(circle at 20% 0,#34276d 0,#101322 42%,#0b0d18 100%);
  color:var(--ink);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.5;
}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
.site-header{
  position:sticky; top:0; z-index:999;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:16px 28px;
  background:rgba(11,13,24,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.contact{display:flex;flex-direction:column;gap:2px}
.contact b{font-size:15px}
.contact a{font-size:13px;color:var(--muted)}
.nav{display:flex;gap:18px;flex-wrap:wrap}
.nav a{font-weight:800;color:#f8f5ff}
.nav a.active{color:var(--cyan)}
.wrap{max-width:1120px;margin:auto;padding:54px 22px 80px}
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center}
.card{
  background:rgba(24,28,50,.92);border:1px solid var(--line);border-radius:28px;
  box-shadow:0 24px 70px rgba(0,0,0,.26);padding:26px;
}
.eyebrow{
  display:block !important;
  width:max-content !important;
  margin:0 0 22px !important;
  padding:0 !important;
  background:transparent !important;
  color:#f2efff !important;
  font-size:13px !important;
  line-height:1.1 !important;
  font-weight:850 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}
h1{font-size:clamp(44px,6.2vw,76px);line-height:1.0;margin:0 0 20px;letter-spacing:-.02em}
h2{font-size:30px;line-height:1.08;margin:0 0 14px;letter-spacing:-.01em}
h3{font-size:20px;line-height:1.16;margin:0 0 10px;letter-spacing:-.01em}
p{margin:0 0 14px;color:#ebe7ff}
.muted{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}
.list{display:grid;gap:14px;margin-top:18px}
.item{background:rgba(255,255,255,.055);border:1px solid var(--line);border-radius:20px;padding:18px}
.item b{display:block;color:#fff;margin-bottom:7px;line-height:1.2;letter-spacing:-.01em}
.button{
  display:inline-block;margin-top:8px;color:#0b0d18;background:var(--cyan);
  border-radius:999px;padding:11px 16px;font-weight:850;
}
.button.secondary{background:rgba(255,255,255,.08);color:#f8f5ff;border:1px solid var(--line)}
.thumb{width:100%;border-radius:18px;border:1px solid var(--line);display:block}
.footer{border-top:1px solid var(--line);padding:26px 22px;color:var(--muted);text-align:center}
@media(max-width:900px){
  .site-header{align-items:flex-start;flex-direction:column}
  .hero,.grid{grid-template-columns:1fr}
}


/* Homepage layout: individual single-line specialty pills + readable bullets */
.homepage-wrap{
  padding-top:30px;
}
.home-overview{
  margin-bottom:14px;
}
.home-overview h1{
  max-width:940px;
  margin-bottom:14px;
}
.bio-copy{
  max-width:920px;
  font-size:18px;
}
.skill-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 18px;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.skill-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 14px;
  border:0;
  outline:1px solid rgba(255,255,255,.18);
  outline-offset:0;
  border-radius:999px;
  background:transparent;
  box-shadow:none;
  color:var(--muted);
  font-weight:800;
  font-size:13px;
  line-height:1;
}
.skill-chip::before,
.skill-chip::after{
  content:none;
  display:none;
}
.resume-summary-grid{
  margin-top:0;
  align-items:stretch;
}
.resume-summary-grid .item{
  min-height:136px;
}
.resume-summary-grid .item b{
  display:block;
  margin-bottom:10px;
}
.mini-list{
  margin:0;
  padding-left:18px;
  line-height:1.55;
}
.mini-list li{
  margin:0 0 4px;
}

/* Keep top navigation links on one line on desktop */
.site-header{
  align-items:center;
}
.nav{
  flex-wrap:nowrap;
  white-space:nowrap;
}
.nav a{
  display:inline-block;
}
@media(max-width:700px){
  .site-header{
    align-items:flex-start;
  }
  .nav{
    flex-wrap:wrap;
    white-space:normal;
  }
}


/* FINAL PILL FIX: filled pills only, no border, no outline, no rectangle artifact */
.skill-chip-row{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin:0 0 18px !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.skill-chip-row .skill-chip,
.skill-chip-row .skill-chip:first-child{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:34px !important;
  padding:0 15px !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.10) !important;
  background-clip:padding-box !important;
  color:var(--muted) !important;
  font-weight:800 !important;
  font-size:13px !important;
  line-height:1 !important;
  text-decoration:none !important;
  appearance:none !important;
}
.skill-chip-row .skill-chip::before,
.skill-chip-row .skill-chip::after{
  content:none !important;
  display:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}


/* FINAL FLAT SKILL CHIPS
   Uses div.skill-chip instead of span so inherited span/card styling cannot create an inner capsule. */
.skill-chip-row{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:12px 14px !important;
  margin:0 0 18px !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.skill-chip-row > .skill-chip{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  height:34px !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 16px !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.13) !important;
  color:var(--muted) !important;
  font-weight:800 !important;
  font-size:13px !important;
  line-height:1 !important;
  text-decoration:none !important;
}
.skill-chip-row > .skill-chip::before,
.skill-chip-row > .skill-chip::after{
  content:none !important;
  display:none !important;
}


/* Homepage final: plain dotted specialties + bullet cards */
.homepage-wrap{
  padding-top:30px;
}
.home-overview{
  margin-bottom:14px;
}
.home-overview h1{
  max-width:940px;
  margin-bottom:12px;
}
.specialty-line{
  display:block;
  max-width:920px;
  margin:0 0 20px;
  color:var(--muted);
  font-weight:800;
  font-size:15px;
  line-height:1.55;
}
.specialty-line span{
  opacity:.55;
  margin:0 7px;
  font-weight:700;
}
.bio-copy{
  max-width:920px;
  font-size:18px;
}
.resume-summary-grid{
  margin-top:0;
  align-items:stretch;
}
.resume-summary-grid .item{
  min-height:136px;
}
.resume-summary-grid .item b{
  display:block;
  margin-bottom:10px;
}
.mini-list{
  margin:0;
  padding-left:18px;
  line-height:1.55;
}
.mini-list li{
  margin:0 0 4px;
}

/* Keep top navigation links on one line on desktop */
.site-header{
  align-items:center;
}
.nav{
  flex-wrap:nowrap;
  white-space:nowrap;
}
.nav a{
  display:inline-block;
}
@media(max-width:700px){
  .site-header{
    align-items:flex-start;
  }
  .nav{
    flex-wrap:wrap;
    white-space:normal;
  }
}


/* Homepage final: vertical summary rows, no bullets */
.homepage-wrap{
  padding-top:30px;
}
.home-overview{
  margin-bottom:16px;
}
.home-overview h1{
  max-width:940px;
  margin-bottom:12px;
}
.specialty-line{
  display:block;
  max-width:920px;
  margin:0 0 20px;
  color:var(--muted);
  font-weight:800;
  font-size:15px;
  line-height:1.55;
}
.specialty-line span{
  opacity:.55;
  margin:0 7px;
  font-weight:700;
}
.bio-copy{
  max-width:920px;
  font-size:18px;
}
.resume-summary-stack{
  display:grid;
  gap:14px;
  margin-top:0;
}
.summary-row{
  display:grid;
  grid-template-columns:190px 1fr;
  gap:20px;
  align-items:start;
}
.summary-row b{
  display:block;
  margin:0;
}
.summary-row span{
  display:block;
  line-height:1.6;
}

/* Keep top navigation links on one line on desktop */
.site-header{
  align-items:center;
}
.nav{
  flex-wrap:nowrap;
  white-space:nowrap;
}
.nav a{
  display:inline-block;
}
@media(max-width:800px){
  .summary-row{
    grid-template-columns:1fr;
    gap:6px;
  }
}
@media(max-width:700px){
  .site-header{
    align-items:flex-start;
  }
  .nav{
    flex-wrap:wrap;
    white-space:normal;
  }
}


/* Homepage final: stacked summary blocks */
.homepage-wrap{
  padding-top:30px;
}
.home-overview{
  margin-bottom:16px;
}
.home-overview h1{
  max-width:940px;
  margin-bottom:12px;
}
.specialty-line{
  display:block;
  max-width:920px;
  margin:0 0 20px;
  color:var(--muted);
  font-weight:800;
  font-size:15px;
  line-height:1.55;
}
.specialty-line span{
  opacity:.55;
  margin:0 7px;
  font-weight:700;
}
.bio-copy{
  max-width:920px;
  font-size:18px;
}
.resume-summary-stack{
  display:grid;
  gap:14px;
  margin-top:0;
}
.summary-block{
  display:block;
  padding:18px;
}
.summary-block b{
  display:block;
  margin:0 0 8px;
  color:#fff;
}
.summary-block span{
  display:block;
  line-height:1.6;
}

/* Keep top navigation links on one line on desktop */
.site-header{
  align-items:center;
}
.nav{
  flex-wrap:nowrap;
  white-space:nowrap;
}
.nav a{
  display:inline-block;
}
@media(max-width:700px){
  .site-header{
    align-items:flex-start;
  }
  .nav{
    flex-wrap:wrap;
    white-space:normal;
  }
}


/* Slightly smaller homepage bio/about text */
.bio-copy{
  font-size:16px !important;
  line-height:1.65 !important;
}


/* Force visible spacing between stacked summary cards on live site */
.resume-summary-stack{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  margin-top:16px !important;
}
.resume-summary-stack > .summary-block{
  display:block !important;
  margin:0 0 16px 0 !important;
}
.resume-summary-stack > .summary-block:last-child{
  margin-bottom:0 !important;
}


/* Clickable home brand */
.contact .brand{
  color:#fff;
  font-weight:800;
  text-decoration:none;
  transition:opacity .18s ease, color .18s ease;
}
.contact .brand:hover,
.contact .brand:focus{
  opacity:.82;
  text-decoration:none;
}


/* Portfolio case study pages */
.portfolio-wrap,
.case-study-wrap{
  padding-top:30px;
}
.portfolio-hero{
  margin-bottom:16px;
}
.portfolio-hero h1,
.case-hero h1{
  margin-bottom:8px;
}
.portfolio-intro{
  max-width:820px;
  font-size:17px;
  line-height:1.65;
}
.eyebrow{
  display:block !important;
  width:max-content !important;
  margin:0 0 22px !important;
  padding:0 !important;
  background:transparent !important;
  color:#f2efff !important;
  font-size:13px !important;
  line-height:1.1 !important;
  font-weight:850 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}
.case-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.case-card{
  display:grid;
  grid-template-columns:74px 1fr;
  gap:16px;
  align-items:start;
  padding:18px;
  border:1px solid var(--line);
  border-radius:24px;
  background:rgba(255,255,255,.045);
  color:inherit;
  text-decoration:none;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.case-card:hover,
.case-card:focus{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.065);
  text-decoration:none;
}
.case-card h2{
  margin:0 0 8px;
  font-size:22px;
}
.case-card p{
  margin:0 0 12px;
}
.case-icon{
  width:64px;
  height:64px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-weight:900;
  font-size:20px;
  letter-spacing:-.03em;
  box-shadow:0 12px 30px rgba(0,0,0,.24);
}
.case-icon.large{
  width:86px;
  height:86px;
  border-radius:24px;
  font-size:26px;
}
.proto-icon{
  background:linear-gradient(135deg,#7c6dff,#d66fb5);
}
.choices-icon{
  background:linear-gradient(135deg,#7658ff,#ff6cae);
}
.ffxv-icon{
  background:linear-gradient(135deg,#243c70,#c7d4ff);
  color:#fff;
}
.tools-icon{
  background:linear-gradient(135deg,#2bc4a8,#6c6dff);
}
.tag-line{
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  line-height:1.45;
}
.back-link{
  display:inline-block;
  margin:0 0 14px;
  color:var(--muted);
  font-weight:800;
  text-decoration:none;
}
.back-link:hover,
.back-link:focus{
  color:#fff;
}
.case-hero{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:18px;
  align-items:center;
  margin-bottom:16px;
}
.case-subtitle{
  margin:0;
  color:var(--muted);
  font-size:19px;
  line-height:1.5;
}
.case-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:16px;
  align-items:start;
}
.case-main h2{
  margin-top:28px;
  margin-bottom:10px;
}
.case-main h2:first-child{
  margin-top:0;
}
.case-main p{
  color:var(--muted);
  line-height:1.72;
}
.case-list{
  margin:0;
  padding-left:20px;
  color:var(--muted);
  line-height:1.7;
}
.case-list li{
  margin-bottom:7px;
}
.case-side{
  display:grid;
  gap:14px;
}
.case-side .item{
  padding:16px;
}
.case-side .item b{
  display:block;
  margin-bottom:8px;
}
@media(max-width:860px){
  .case-grid{
    grid-template-columns:1fr;
  }
  .case-layout{
    grid-template-columns:1fr;
  }
}
@media(max-width:620px){
  .case-card,
  .case-hero{
    grid-template-columns:1fr;
  }
}


/* Portfolio app icon updates */
.case-icon.image-icon{
  padding:0;
  overflow:hidden;
  background:transparent;
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}
.case-icon.image-icon img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}

.app-icon-showcase{
  margin-top:16px;
}
.showcase-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,420px);
  gap:18px;
  align-items:end;
  margin-bottom:18px;
}
.showcase-head h2{
  margin:0;
}
.showcase-head p{
  margin:0;
  line-height:1.65;
}
.app-icon-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:14px;
}
.app-icon-grid img{
  width:100%;
  aspect-ratio:1 / 1;
  display:block;
  object-fit:cover;
  border-radius:24px;
  background:rgba(255,255,255,.05);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  transition:transform .18s ease, box-shadow .18s ease;
}
.app-icon-grid img:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 16px 30px rgba(0,0,0,.25);
}
@media(max-width:860px){
  .showcase-head{
    grid-template-columns:1fr;
    align-items:start;
  }
}


/* Portfolio projects section layout */
.portfolio-projects-page .portfolio-hero{
  margin-bottom:16px;
}
.projects-icon-wall{
  margin-bottom:28px;
}
.app-icon-grid-large{
  grid-template-columns:repeat(auto-fit,minmax(86px,1fr));
}
.portfolio-company-section{
  margin-top:28px;
}
.section-heading{
  margin:0 0 14px;
}
.section-heading h2{
  margin:0 0 8px;
}
.section-heading p{
  max-width:820px;
  line-height:1.65;
}
.compact-case-grid{
  margin-top:0;
}
.static-card{
  cursor:default;
}
.static-card:hover{
  transform:none;
}
@media(max-width:860px){
  .app-icon-grid-large{
    grid-template-columns:repeat(auto-fit,minmax(72px,1fr));
  }
}


/* Portfolio icon wall: single neat row with wrapping only when needed */
.app-icon-grid.app-icon-grid-large{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:14px !important;
}
.app-icon-grid.app-icon-grid-large img{
  width:82px !important;
  height:82px !important;
  flex:0 0 82px !important;
  aspect-ratio:1 / 1 !important;
  object-fit:cover !important;
}
@media(max-width:700px){
  .app-icon-grid.app-icon-grid-large img{
    width:68px !important;
    height:68px !important;
    flex-basis:68px !important;
  }
}


/* Game History icon row: simple heading + icons only */
.game-history-strip{
  margin-bottom:28px;
}
.game-history-strip h2{
  margin:0 0 14px;
}
.game-history-icons{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:10px !important;
  overflow-x:auto !important;
  padding:2px 0 8px !important;
  scrollbar-width:thin;
}
.game-history-icons img{
  width:68px !important;
  height:68px !important;
  flex:0 0 68px !important;
  aspect-ratio:1 / 1 !important;
  object-fit:cover !important;
  border-radius:18px !important;
}
@media(min-width:1200px){
  .game-history-icons{
    overflow-x:visible !important;
  }
}
@media(max-width:700px){
  .game-history-icons img{
    width:62px !important;
    height:62px !important;
    flex-basis:62px !important;
    border-radius:16px !important;
  }
}


/* Portfolio update: remove top hero, make game history icons clickable, add game stubs */
.portfolio-projects-page{
  padding-top:30px;
}
.game-history-strip{
  margin-bottom:28px;
}
.game-history-icons{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:10px !important;
  overflow-x:auto !important;
  padding:2px 0 8px !important;
  scrollbar-width:thin;
}
.game-icon-link{
  display:block;
  width:68px;
  height:68px;
  flex:0 0 68px;
  border-radius:18px;
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}
.game-icon-link:hover,
.game-icon-link:focus{
  transform:translateY(-3px);
}
.game-icon-link img,
.game-history-icons img{
  width:68px !important;
  height:68px !important;
  flex:0 0 68px !important;
  aspect-ratio:1 / 1 !important;
  object-fit:cover !important;
  border-radius:18px !important;
  display:block;
}
.game-stub-hero{
  margin-bottom:16px;
}
@media(max-width:700px){
  .game-icon-link,
  .game-icon-link img,
  .game-history-icons img{
    width:62px !important;
    height:62px !important;
    flex-basis:62px !important;
    border-radius:16px !important;
  }
}


/* Game History icons: smaller and designed to fit in at most 2 rows on desktop */
.game-history-icons{
  display:grid !important;
  grid-template-columns:repeat(7, 56px) !important;
  grid-auto-rows:56px !important;
  gap:10px !important;
  justify-content:start !important;
  align-content:start !important;
  overflow:visible !important;
  padding:2px 0 4px !important;
}
.game-icon-link{
  width:56px !important;
  height:56px !important;
  flex:none !important;
  border-radius:15px !important;
}
.game-icon-link img,
.game-history-icons img{
  width:56px !important;
  height:56px !important;
  flex:none !important;
  border-radius:15px !important;
}
@media(max-width:900px){
  .game-history-icons{
    grid-template-columns:repeat(7, 50px) !important;
    grid-auto-rows:50px !important;
    gap:8px !important;
  }
  .game-icon-link,
  .game-icon-link img,
  .game-history-icons img{
    width:50px !important;
    height:50px !important;
    border-radius:13px !important;
  }
}
@media(max-width:700px){
  .game-history-icons{
    grid-template-columns:repeat(5, 50px) !important;
  }
}


/* Game History icons: true resized icons, not just tighter spacing */
.game-history-strip .game-history-icons{
  display:grid !important;
  grid-template-columns:repeat(7, 52px) !important;
  grid-auto-rows:52px !important;
  gap:10px !important;
  justify-content:start !important;
  align-content:start !important;
  overflow:visible !important;
  padding:2px 0 4px !important;
  max-width:max-content !important;
}

.game-history-strip .game-history-icons .game-icon-link{
  display:block !important;
  width:52px !important;
  min-width:52px !important;
  max-width:52px !important;
  height:52px !important;
  min-height:52px !important;
  max-height:52px !important;
  flex:none !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:14px !important;
  overflow:hidden !important;
  line-height:0 !important;
}

.game-history-strip .game-history-icons .game-icon-link img{
  display:block !important;
  width:52px !important;
  min-width:52px !important;
  max-width:52px !important;
  height:52px !important;
  min-height:52px !important;
  max-height:52px !important;
  object-fit:cover !important;
  border-radius:14px !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

@media (max-width: 900px){
  .game-history-strip .game-history-icons{
    grid-template-columns:repeat(7, 48px) !important;
    grid-auto-rows:48px !important;
    gap:8px !important;
  }
  .game-history-strip .game-history-icons .game-icon-link,
  .game-history-strip .game-history-icons .game-icon-link img{
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;
    height:48px !important;
    min-height:48px !important;
    max-height:48px !important;
    border-radius:12px !important;
  }
}

@media (max-width: 700px){
  .game-history-strip .game-history-icons{
    grid-template-columns:repeat(5, 48px) !important;
  }
}


/* Portfolio: job/company containers instead of per-title cards */
.job-overview-list{
  display:grid;
  gap:16px;
  margin-top:26px;
}
.job-overview-card{
  padding:20px;
}
.job-overview-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:10px;
}
.job-overview-head h2{
  margin:0;
}
.job-overview-card p{
  max-width:940px;
  line-height:1.68;
  margin:0 0 12px;
}
.job-overview-link{
  flex:0 0 auto;
  color:var(--muted);
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 12px;
}
.job-overview-link:hover,
.job-overview-link:focus{
  color:#fff;
  border-color:rgba(255,255,255,.28);
  text-decoration:none;
}
.job-focus-line{
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  line-height:1.45;
}
@media(max-width:700px){
  .job-overview-head{
    display:block;
  }
  .job-overview-link{
    display:inline-block;
    margin-top:10px;
  }
}


/* Corrected portfolio job containers */
.job-overview-list{
  display:grid;
  gap:16px;
  margin-top:26px;
}
.job-overview-card{
  padding:20px;
}
.job-overview-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:10px;
}
.job-overview-head h2{
  margin:0;
}
.job-overview-card p{
  max-width:980px;
  line-height:1.68;
  margin:0 0 12px;
}
.job-overview-link{
  flex:0 0 auto;
  color:var(--muted);
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 12px;
}
.job-overview-link:hover,
.job-overview-link:focus{
  color:#fff;
  border-color:rgba(255,255,255,.28);
  text-decoration:none;
}
.job-focus-line{
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  line-height:1.45;
}
@media(max-width:700px){
  .job-overview-head{
    display:block;
  }
  .job-overview-link{
    display:inline-block;
    margin-top:10px;
  }
}


/* Portfolio job containers: slightly smaller titles */
.job-overview-head h2{
  font-size:22px !important;
  line-height:1.2 !important;
}

@media(max-width:700px){
  .job-overview-head h2{
    font-size:20px !important;
  }
}


/* HARD FIX: constrain Game History app icons on the live site */
main.portfolio-projects-page .game-history-strip .game-history-icons{
  display:grid !important;
  grid-template-columns:repeat(7, 52px) !important;
  grid-auto-rows:52px !important;
  gap:10px !important;
  width:max-content !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  align-items:center !important;
  justify-items:center !important;
  padding:2px 0 6px !important;
}

main.portfolio-projects-page .game-history-strip .game-history-icons > a.game-icon-link{
  display:block !important;
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
  min-height:52px !important;
  max-width:52px !important;
  max-height:52px !important;
  margin:0 !important;
  padding:0 !important;
  flex:none !important;
  overflow:hidden !important;
  border-radius:14px !important;
  line-height:0 !important;
}

main.portfolio-projects-page .game-history-strip .game-history-icons > a.game-icon-link > img{
  display:block !important;
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
  min-height:52px !important;
  max-width:52px !important;
  max-height:52px !important;
  margin:0 !important;
  padding:0 !important;
  object-fit:cover !important;
  border-radius:14px !important;
  box-sizing:border-box !important;
}

/* Safety net: any direct images accidentally left in this row still get constrained */
main.portfolio-projects-page .game-history-strip .game-history-icons > img{
  display:block !important;
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
  min-height:52px !important;
  max-width:52px !important;
  max-height:52px !important;
  object-fit:cover !important;
  border-radius:14px !important;
}

@media(max-width:700px){
  main.portfolio-projects-page .game-history-strip .game-history-icons{
    grid-template-columns:repeat(5, 48px) !important;
    grid-auto-rows:48px !important;
    gap:8px !important;
  }
  main.portfolio-projects-page .game-history-strip .game-history-icons > a.game-icon-link,
  main.portfolio-projects-page .game-history-strip .game-history-icons > a.game-icon-link > img,
  main.portfolio-projects-page .game-history-strip .game-history-icons > img{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    min-height:48px !important;
    max-width:48px !important;
    max-height:48px !important;
    border-radius:12px !important;
  }
}


/* Global section/card buffer polish for homepage + portfolio */
.homepage-wrap .home-overview{
  margin-bottom:22px !important;
}

.homepage-wrap .resume-summary-stack{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  margin-top:0 !important;
}

.homepage-wrap .resume-summary-stack > .summary-block,
.homepage-wrap .resume-summary-stack > .item{
  margin-bottom:18px !important;
}

.homepage-wrap .resume-summary-stack > .summary-block:last-child,
.homepage-wrap .resume-summary-stack > .item:last-child{
  margin-bottom:0 !important;
}

/* Portfolio spacing between the major rectangular sections */
.portfolio-projects-page .game-history-strip{
  margin-bottom:34px !important;
}

.portfolio-projects-page .job-overview-list{
  display:flex !important;
  flex-direction:column !important;
  gap:0 !important;
  margin-top:0 !important;
}

.portfolio-projects-page .job-overview-list > .job-overview-card{
  margin-bottom:20px !important;
}

.portfolio-projects-page .job-overview-list > .job-overview-card:last-child{
  margin-bottom:0 !important;
}

/* Also cover older portfolio section/card class names in case any page still uses them */
.portfolio-company-section{
  margin-top:34px !important;
}

.compact-case-grid,
.case-grid{
  gap:20px !important;
}

.case-card,
.card{
  box-sizing:border-box;
}


/* Homepage title: slightly smaller so it fits on one line more often */
.homepage-wrap .home-overview h1{
  font-size:clamp(48px, 6.2vw, 86px) !important;
  line-height:.98 !important;
  letter-spacing:-.055em !important;
  max-width:1120px !important;
}

/* Clickable home brand with subtle home icon */
.contact .home-brand{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.contact .home-glyph{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:6px;
  background:rgba(255,255,255,.08);
  color:var(--muted);
  font-size:13px;
  line-height:1;
  transform:translateY(-1px);
}
.contact .home-brand:hover .home-glyph,
.contact .home-brand:focus .home-glyph{
  background:rgba(255,255,255,.14);
  color:#fff;
}

@media(max-width:700px){
  .homepage-wrap .home-overview h1{
    font-size:clamp(40px, 11vw, 58px) !important;
  }
}


/* Header home link: subtle inline icon, no badge/box */
.contact .home-brand{
  display:inline-flex !important;
  align-items:baseline !important;
  gap:5px !important;
}
.contact .home-glyph{
  display:inline !important;
  width:auto !important;
  height:auto !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--muted) !important;
  font-size:.9em !important;
  line-height:1 !important;
  transform:none !important;
  opacity:.75 !important;
}
.contact .home-brand:hover .home-glyph,
.contact .home-brand:focus .home-glyph{
  background:transparent !important;
  color:#fff !important;
  opacity:1 !important;
}


/* Header home affordance: visible, readable, and in-flow */
.contact .home-brand{
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  color:#fff !important;
  font-weight:800 !important;
  text-decoration:none !important;
}
.contact .home-separator{
  color:var(--muted) !important;
  opacity:.65 !important;
  font-weight:700 !important;
  margin-left:2px !important;
}
.contact .home-glyph{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  height:auto !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  color:inherit !important;
  font-size:13px !important;
  line-height:1 !important;
  opacity:.9 !important;
  transform:none !important;
}
.contact .home-label{
  color:var(--muted) !important;
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
}
.contact .home-brand:hover .home-label,
.contact .home-brand:focus .home-label,
.contact .home-brand:hover .home-glyph,
.contact .home-brand:focus .home-glyph{
  color:#fff !important;
  opacity:1 !important;
}


/* Header home affordance: icon + name on one line, email below in same header area */
.contact{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:3px !important;
}
.contact .home-brand{
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  color:#fff !important;
  font-weight:800 !important;
  text-decoration:none !important;
  line-height:1.1 !important;
}
.contact .home-glyph{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:17px !important;
  height:17px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  color:var(--muted) !important;
  font-size:15px !important;
  line-height:1 !important;
  opacity:.9 !important;
  transform:none !important;
}
.contact .home-brand:hover .home-glyph,
.contact .home-brand:focus .home-glyph{
  color:#fff !important;
  opacity:1 !important;
}
.contact > a[href^="mailto:"]{
  margin-left:24px !important;
}


/* Header alignment fix: keep home icon + name on one clean baseline */
.contact .home-brand{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  white-space:nowrap !important;
  line-height:1 !important;
}

.contact .home-brand span{
  display:inline-flex !important;
  align-items:center !important;
  white-space:nowrap !important;
  line-height:1 !important;
}

.contact .home-glyph{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:16px !important;
  min-width:16px !important;
  height:16px !important;
  min-height:16px !important;
  font-size:15px !important;
  line-height:1 !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
  vertical-align:middle !important;
}

.contact > a[href^="mailto:"]{
  display:block !important;
  margin-left:24px !important;
  line-height:1.2 !important;
}


/* Header: remove home icon styling and keep name as clean clickable home link */
.contact .brand{
  display:inline !important;
  color:#fff !important;
  font-weight:800 !important;
  text-decoration:none !important;
  line-height:1.1 !important;
}
.contact .brand:hover,
.contact .brand:focus{
  opacity:.82 !important;
  text-decoration:none !important;
}
.contact .home-glyph,
.contact .home-separator,
.contact .home-label{
  display:none !important;
}
.contact > a[href^="mailto:"]{
  margin-left:0 !important;
}


/* Match major page headers more closely to the smaller Game History scale */
.homepage-wrap .home-overview h1,
.resume-wrap h1,
.portfolio-wrap h1,
.case-study-wrap h1,
.wrap > .card:first-child h1{
  font-size:clamp(32px, 4vw, 48px) !important;
  line-height:1.08 !important;
  letter-spacing:-.035em !important;
}

/* Keep Game History and related section titles in the same visual family */
.game-history-strip h2,
.section-heading h2,
.job-overview-head h2{
  font-size:clamp(24px, 2.6vw, 32px) !important;
  line-height:1.15 !important;
}

@media(max-width:700px){
  .homepage-wrap .home-overview h1,
  .resume-wrap h1,
  .portfolio-wrap h1,
  .case-study-wrap h1,
  .wrap > .card:first-child h1{
    font-size:34px !important;
  }
}


/* Portfolio: expandable job sections */
.experience-highlights{
  margin-top:30px;
}
.experience-highlights > h2{
  font-size:clamp(24px, 2.6vw, 32px);
  line-height:1.15;
  margin:0 0 14px;
}
.experience-card{
  margin-bottom:20px;
  padding:20px;
}
.experience-card:last-child{
  margin-bottom:0;
}
.experience-summary h3{
  margin:0 0 6px;
  font-size:22px;
  line-height:1.2;
}
.experience-focus{
  margin:0 0 10px;
  color:var(--accent);
  font-weight:900;
  line-height:1.45;
}
.experience-summary .muted{
  margin:0 0 14px;
  max-width:980px;
  line-height:1.68;
}
.job-details{
  border-top:1px solid var(--line);
  padding-top:12px;
}
.job-details summary{
  cursor:pointer;
  color:var(--muted);
  font-weight:900;
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.job-details summary::-webkit-details-marker{
  display:none;
}
.job-details summary::before{
  content:"▸";
  display:inline-block;
  color:var(--accent);
  transition:transform .18s ease;
}
.job-details[open] summary::before{
  transform:rotate(90deg);
}
.job-details summary:hover,
.job-details summary:focus{
  color:#fff;
}
.expanded-content{
  margin-top:16px;
  display:grid;
  gap:16px;
}
.expanded-content .case-hero{
  display:none;
}
.expanded-content .case-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:16px;
}
.expanded-content .detail-main,
.expanded-content .case-main,
.expanded-content article{
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
}
.expanded-content .detail-side,
.expanded-content .case-side{
  display:grid;
  gap:12px;
}
.expanded-content .detail-note,
.expanded-content .item{
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
}
.expanded-content h2,
.expanded-content h3{
  margin-top:0;
}
.expanded-content p,
.expanded-content li{
  color:var(--muted);
  line-height:1.68;
}
@media(max-width:800px){
  .expanded-content .case-layout{
    grid-template-columns:1fr;
  }
}
@media(max-width:700px){
  .experience-summary h3{
    font-size:20px;
  }
}


/* Portfolio expandable sections: plus/minus on the right */
.job-details{
  border-top:1px solid var(--line);
  padding-top:12px;
}

.job-details summary{
  cursor:pointer;
  color:var(--muted);
  font-weight:900;
  list-style:none;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  width:100% !important;
  padding:4px 0 !important;
}

.job-details summary::-webkit-details-marker{
  display:none;
}

.job-details summary::before{
  content:none !important;
  display:none !important;
}

.job-details summary::after{
  content:"+";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 24px;
  width:24px;
  height:24px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--accent);
  font-size:18px;
  font-weight:900;
  line-height:1;
}

.job-details[open] summary::after{
  content:"−";
}

.job-details summary:hover,
.job-details summary:focus{
  color:#fff;
}

.job-details summary:hover::after,
.job-details summary:focus::after{
  border-color:rgba(255,255,255,.3);
  color:#fff;
}


/* Portfolio experience format v2:
   Company — Title
   Tags
   General overview
   Expandable details */
.experience-highlights{
  margin-top:30px;
}
.experience-highlights > h2{
  font-size:clamp(24px, 2.6vw, 32px);
  line-height:1.15;
  margin:0 0 14px;
}
.experience-card.format-v2{
  margin-bottom:20px;
  padding:20px;
}
.experience-card.format-v2:last-child{
  margin-bottom:0;
}
.experience-card.format-v2 h3{
  margin:0 0 10px;
  font-size:22px;
  line-height:1.2;
}
.experience-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 14px;
}
.experience-tags span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  line-height:1;
}
.experience-overview{
  max-width:980px;
  line-height:1.68;
  margin:0 0 16px;
}
.job-details.v2-details{
  border-top:1px solid var(--line);
  padding-top:12px;
}
.job-details.v2-details summary{
  cursor:pointer;
  color:var(--muted);
  font-weight:900;
  list-style:none;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  width:100% !important;
  padding:4px 0 !important;
}
.job-details.v2-details summary::-webkit-details-marker{
  display:none;
}
.job-details.v2-details summary::before{
  content:none !important;
  display:none !important;
}
.job-details.v2-details summary::after{
  content:"+";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 24px;
  width:24px;
  height:24px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--accent);
  font-size:18px;
  font-weight:900;
  line-height:1;
}
.job-details.v2-details[open] summary::after{
  content:"−";
}
.job-details.v2-details summary:hover,
.job-details.v2-details summary:focus{
  color:#fff;
}
.job-details.v2-details summary:hover::after,
.job-details.v2-details summary:focus::after{
  border-color:rgba(255,255,255,.3);
  color:#fff;
}
@media(max-width:700px){
  .experience-card.format-v2 h3{
    font-size:20px;
  }
}


/* Portfolio experience format v3: no accordion, project detail buttons */
.experience-card.format-v3{
  margin-bottom:20px;
  padding:20px;
}
.experience-card.format-v3:last-child{
  margin-bottom:0;
}
.experience-card.format-v3 h3{
  margin:0 0 10px;
  font-size:22px;
  line-height:1.2;
}
.experience-card.format-v3 .experience-overview{
  margin-bottom:16px;
}
.experience-actions{
  display:flex;
  justify-content:flex-start;
  align-items:center;
}
.project-detail-button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:#fff;
  font-size:13px;
  font-weight:900;
  text-decoration:none;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.project-detail-button span{
  color:var(--accent);
  font-size:15px;
  line-height:1;
}
.project-detail-button:hover,
.project-detail-button:focus{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.32);
  background:rgba(255,255,255,.085);
}
@media(max-width:700px){
  .experience-card.format-v3 h3{
    font-size:20px;
  }
  .project-detail-button{
    width:100%;
    justify-content:center;
  }
}


/* Company / game detail page clean layout */
.company-detail-page{
  max-width:1040px;
}

.company-hero-clean{
  padding:28px;
  margin-bottom:22px;
}

.company-hero-clean .eyebrow,
.game-title-block .eyebrow{
  display:block !important;
  width:max-content !important;
  margin:0 0 22px !important;
  padding:0 !important;
  background:transparent !important;
  color:#f2efff !important;
  font-size:13px !important;
  line-height:1.1 !important;
  font-weight:850 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

.company-hero-clean h1{
  margin:0 0 16px;
  font-size:clamp(34px, 4.5vw, 56px);
  line-height:1.05;
  letter-spacing:-.04em;
}

.company-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 24px;
}

.company-tags span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  line-height:1;
}

.game-title-block{
  border-top:1px solid var(--line);
  padding-top:22px;
}

.game-title-block h2{
  margin:0 0 8px;
  font-size:clamp(26px, 3vw, 38px);
  line-height:1.1;
}

.game-title-block .muted{
  margin:0;
  max-width:820px;
  line-height:1.68;
}

.game-specific-info{
  padding:28px;
}

.game-specific-info h2{
  margin:0 0 20px;
  font-size:clamp(26px, 3vw, 36px);
  line-height:1.1;
}

.info-section{
  padding:18px 0;
  border-top:1px solid var(--line);
}

.info-section:first-of-type{
  border-top:0;
  padding-top:0;
}

.info-section h3{
  margin:0 0 8px;
  font-size:18px;
  line-height:1.2;
}

.info-section p,
.info-section li{
  color:var(--muted);
  line-height:1.68;
}

.info-section p{
  margin:0;
}

.info-section ul{
  margin:0;
  padding-left:20px;
}

.info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  border-top:1px solid var(--line);
}

.info-grid .info-section{
  border-top:0;
  padding:18px 0;
}

@media(max-width:760px){
  .company-hero-clean,
  .game-specific-info{
    padding:20px;
  }

  .info-grid{
    grid-template-columns:1fr;
    gap:0;
  }

  .info-grid .info-section + .info-section{
    border-top:1px solid var(--line);
  }
}


/* Portfolio studio experience: studio cards only, no detail buttons yet */
.studio-experience{
  margin-top:30px;
}
.studio-experience > h2{
  font-size:clamp(24px, 2.6vw, 32px);
  line-height:1.15;
  margin:0 0 14px;
}
.studio-card{
  margin-bottom:20px;
  padding:20px;
}
.studio-card:last-child{
  margin-bottom:0;
}
.studio-card h3{
  margin:0 0 10px;
  font-size:22px;
  line-height:1.2;
}
.studio-card .experience-overview{
  margin:0;
  max-width:980px;
  line-height:1.68;
}
.studio-card .experience-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 14px;
}
.studio-card .experience-tags span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  line-height:1;
}
@media(max-width:700px){
  .studio-card h3{
    font-size:20px;
  }
}


/* Main subpage back-home link */
.back-home-link{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  margin:0 0 12px !important;
  color:#bdd0ff !important;
  font-size:15px !important;
  line-height:1.15 !important;
  font-weight:850 !important;
  text-decoration:none !important;
  letter-spacing:.01em !important;
}
.back-home-link:hover,
.back-home-link:focus{
  color:#fff;
  transform:translateX(-2px);
}


/* Consistent page title sizing */
.homepage-wrap .home-overview h1,
.wrap > h1,
.portfolio-wrap h1,
.resume-wrap h1,
.company-detail-page .company-hero-clean h1{
  font-size:clamp(34px, 4vw, 48px) !important;
  line-height:1.08 !important;
  letter-spacing:-.035em !important;
}

.portfolio-projects-page .game-history-strip h2,
.studio-experience > h2,
.game-specific-info h2{
  font-size:clamp(26px, 3vw, 34px) !important;
  line-height:1.12 !important;
  letter-spacing:-.025em !important;
}

/* Prototype coming-soon cards */
.prototype-coming-soon{
  min-height:180px;
}
.coming-soon-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  line-height:1;
  margin-bottom:14px;
}


/* Final title normalization: match portfolio page title sizing across all pages */
main.wrap > h1,
main.wrap .hero h1,
main.wrap .resume-hero h1,
main.wrap .portfolio-hero h1,
main.wrap .prototype-hero h1,
.resume-wrap h1,
.portfolio-wrap h1,
.prototypes-wrap h1,
.company-detail-page .company-hero-clean h1,
.case-study-wrap h1,
.homepage-wrap .home-overview h1{
  font-size:clamp(38px, 4vw, 52px) !important;
  line-height:1.08 !important;
  letter-spacing:-.035em !important;
}

/* Keep secondary section headings visually aligned with the portfolio title style */
.studio-experience > h2,
.portfolio-projects-page .game-history-strip h2,
.game-specific-info h2,
.resume-wrap h2,
.prototypes-wrap h2{
  font-size:clamp(32px, 3.4vw, 44px) !important;
  line-height:1.12 !important;
  letter-spacing:-.03em !important;
}

/* Prevent older giant display-title rules from overpowering subpage titles */
.display-title,
.page-title,
.resume-title{
  font-size:clamp(38px, 4vw, 52px) !important;
  line-height:1.08 !important;
  letter-spacing:-.035em !important;
}


/* Portfolio: Game History outside of a boxed card */
main.portfolio-projects-page .game-history-open{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 0 42px !important;
  border-radius:0 !important;
}

main.portfolio-projects-page .game-history-open h2{
  margin:0 0 18px !important;
}

main.portfolio-projects-page .game-history-open .game-history-icons{
  padding:0 0 6px !important;
}


/* Portfolio: Experience heading, icon line, then studio cards */
main.portfolio-projects-page .studio-experience{
  margin-top:0 !important;
}

main.portfolio-projects-page .studio-experience > h2{
  margin:0 0 18px !important;
}

/* Game history becomes a compact icon line under Experience */
main.portfolio-projects-page .game-history-open{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 0 24px !important;
  border-radius:0 !important;
}

main.portfolio-projects-page .game-history-open h2{
  display:none !important;
}

main.portfolio-projects-page .game-history-open .game-history-icons{
  display:grid !important;
  grid-template-columns:repeat(14, 46px) !important;
  grid-auto-rows:46px !important;
  gap:8px !important;
  width:max-content !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  align-items:center !important;
  justify-items:center !important;
  padding:2px 0 8px !important;
}

main.portfolio-projects-page .game-history-open .game-icon-link,
main.portfolio-projects-page .game-history-open .game-icon-link > img{
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  max-width:46px !important;
  min-height:46px !important;
  max-height:46px !important;
}

main.portfolio-projects-page .game-history-open .game-icon-link{
  display:block !important;
  border-radius:12px !important;
  pointer-events:none !important;
  cursor:default !important;
}

main.portfolio-projects-page .game-history-open .game-icon-link > img{
  object-fit:cover !important;
  border-radius:12px !important;
  display:block !important;
}

@media(max-width:900px){
  main.portfolio-projects-page .game-history-open .game-history-icons{
    grid-template-columns:repeat(7, 46px) !important;
  }
}


/* Resume page update */
.resume-download-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
}
.resume-download-card h2{
  margin:0 0 6px;
  font-size:clamp(24px, 2.8vw, 34px);
  line-height:1.15;
}
.resume-download-card p{
  margin:0;
}
.resume-summary-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.resume-summary-grid h3{
  margin-top:0;
}
.resume-summary-grid p,
.resume-summary-grid li{
  color:var(--muted);
  line-height:1.65;
}
@media(max-width:800px){
  .resume-download-card{
    align-items:flex-start;
    flex-direction:column;
  }
  .resume-summary-grid{
    grid-template-columns:1fr;
  }
}


/* =========================
   Global spacing normalization
   Added to keep containers consistent across Home, Portfolio, Resume, and Prototypes.
   ========================= */

:root{
  --page-max-width: 1180px;
  --page-pad-x: 22px;
  --page-pad-top: 38px;
  --page-pad-bottom: 72px;
  --section-gap: 24px;
  --card-pad: 26px;
  --card-radius: 28px;
  --grid-gap: 18px;
}

/* Page frame consistency */
.wrap,
.homepage-wrap,
.resume-wrap,
.portfolio-wrap,
.case-study-wrap,
.prototypes-wrap,
.prototype-detail-wrap,
main.wrap{
  max-width: var(--page-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: var(--page-pad-top) var(--page-pad-x) var(--page-pad-bottom) !important;
}

/* Main stacked section rhythm */
.wrap > section,
.homepage-wrap > section,
.resume-wrap > section,
.portfolio-wrap > section,
.prototypes-wrap > section,
.prototype-detail-wrap > section,
main.wrap > section{
  margin-top: var(--section-gap) !important;
}

.wrap > section:first-of-type,
.homepage-wrap > section:first-of-type,
.resume-wrap > section:first-of-type,
.portfolio-wrap > section:first-of-type,
.prototypes-wrap > section:first-of-type,
.prototype-detail-wrap > section:first-of-type,
main.wrap > section:first-of-type{
  margin-top: 0 !important;
}

/* Consistent internal container padding */
.card,
.summary-block,
.project-card,
.prototype-card,
.prototype-tile,
.prototype-coming-soon,
.resume-download-card,
.resume-pdf-card,
.app-icon-showcase,
.studio-card,
.experience-card{
  padding: var(--card-pad) !important;
  border-radius: var(--card-radius) !important;
}

/* Consistent grid/container gaps */
.resume-summary-grid,
.prototype-card-grid,
.prototype-grid,
.prototype-breakdown-grid,
.project-grid,
.case-study-grid,
.experience-grid,
.studio-grid,
.columns,
.two-col{
  gap: var(--grid-gap) !important;
}

/* Consistent vertical gap between repeated cards */
.card + .card,
.summary-block + .summary-block,
.project-card + .project-card,
.prototype-card + .prototype-card,
.studio-card + .studio-card,
.experience-card + .experience-card{
  margin-top: var(--section-gap) !important;
}

/* Portfolio-specific spacing: icon line should sit neatly under Experience */
main.portfolio-projects-page .game-history-open{
  margin:0 0 var(--section-gap) !important;
  padding:0 !important;
}

/* Prototype cards keep image-to-copy rhythm consistent */
.prototype-card-title{
  margin-top:0 !important;
  margin-bottom:14px !important;
}
.prototype-thumb-frame,
.prototype-thumb,
.prototype-placeholder-art{
  margin-bottom:16px !important;
}
.prototype-card-copy,
.prototype-card-body p{
  margin-bottom:16px !important;
}

/* Headings inside containers should not create uneven top padding */
.card > h1:first-child,
.card > h2:first-child,
.card > h3:first-child,
.summary-block > h1:first-child,
.summary-block > h2:first-child,
.summary-block > h3:first-child{
  margin-top:0 !important;
}

/* Responsive spacing */
@media(max-width:900px){
  :root{
    --page-pad-x: 18px;
    --page-pad-top: 30px;
    --page-pad-bottom: 56px;
    --section-gap: 20px;
    --card-pad: 20px;
    --grid-gap: 16px;
  }
}


/* Homepage profile-card layout */
.homepage-specialty-pills{
  margin:0 0 20px !important;
}

.homepage-info-stack{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:var(--section-gap, 24px) !important;
  margin-top:var(--section-gap, 24px) !important;
}

.homepage-info-stack .summary-block{
  margin:0 !important;
}

.homepage-profile-list{
  margin:0;
  padding-left:20px;
  color:var(--muted);
  line-height:1.65;
}

.homepage-profile-list li{
  margin:0 0 8px;
}

.homepage-profile-list li:last-child{
  margin-bottom:0;
}

.homepage-profile-list strong{
  color:#fff;
}


/* Portfolio app icon row: keep icons on one line when space allows, wrap only when needed */
.portfolio-icon-line,
.game-history-open,
.game-icon-row,
.app-icon-row,
.app-icon-showcase,
.portfolio-app-icons,
.storm8-icon-line,
.experience-icon-line{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:14px !important;
}

.portfolio-icon-line img,
.game-history-open img,
.game-icon-row img,
.app-icon-row img,
.app-icon-showcase img,
.portfolio-app-icons img,
.storm8-icon-line img,
.experience-icon-line img{
  flex:0 0 auto !important;
  width:64px !important;
  height:64px !important;
  max-width:none !important;
  object-fit:cover !important;
}

/* If icons are wrapped in links/divs, keep each icon package as a fixed item. */
.portfolio-icon-line a,
.game-history-open a,
.game-icon-row a,
.app-icon-row a,
.app-icon-showcase a,
.portfolio-app-icons a,
.storm8-icon-line a,
.experience-icon-line a,
.portfolio-icon-line .game-icon,
.game-history-open .game-icon,
.game-icon-row .game-icon,
.app-icon-row .game-icon,
.app-icon-showcase .game-icon,
.portfolio-app-icons .game-icon,
.storm8-icon-line .game-icon,
.experience-icon-line .game-icon{
  flex:0 0 auto !important;
}

/* Keep the row compact instead of forcing evenly distributed columns. */
.game-history-open{
  width:100% !important;
}


/* Index2 display fix */
/* This uses unique nb-index2-* classes so the alternate homepage does not inherit
   older homepage experiment styles or generic summary/card overrides. */
.nb-index2-page{
  max-width:1180px !important;
  padding:38px 22px 72px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.nb-index2-page > section{
  margin-top:24px !important;
}

.nb-index2-page > section:first-child{
  margin-top:0 !important;
}

.nb-index2-title{
  margin:0 !important;
}

.nb-index2-name{
  margin:0 0 8px !important;
  color:var(--ink);
  font-weight:700;
  font-size:16px;
}

.nb-index2-title h1{
  margin:0 !important;
  font-size:clamp(38px, 5vw, 68px);
  line-height:.92;
  letter-spacing:-.055em;
}

.nb-index2-overview{
  padding:26px !important;
  border-radius:28px !important;
}

.nb-index2-overview h2{
  margin:0 0 18px !important;
  font-size:28px;
  line-height:1.15;
  letter-spacing:-.03em;
}

.nb-index2-overview-grid{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
  gap:12px !important;
  width:100% !important;
}

.nb-index2-overview-card{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:5px !important;
  min-height:82px !important;
  padding:14px 16px !important;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.07) !important;
  white-space:normal !important;
}

.nb-index2-overview-card strong{
  display:block !important;
  color:#fff !important;
  font-weight:900 !important;
  font-size:17px !important;
  line-height:1.1 !important;
  letter-spacing:-.02em !important;
}

.nb-index2-overview-card span{
  display:block !important;
  color:var(--muted) !important;
  font-size:13px !important;
  font-weight:750 !important;
  line-height:1.25 !important;
}

.nb-index2-hero{
  padding:26px !important;
  border-radius:28px !important;
}

.nb-index2-specialties{
  margin:0 0 20px !important;
}

.nb-index2-hero .bio-copy{
  max-width:86ch !important;
  font-size:17px !important;
  line-height:1.7 !important;
}

.nb-index2-detail-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:18px !important;
  margin-top:24px !important;
}

.nb-index2-detail-card,
.nb-index2-toolkit{
  margin:0 !important;
  padding:26px !important;
  border-radius:28px !important;
}

.nb-index2-toolkit{
  margin-top:24px !important;
}

.nb-index2-detail-card b,
.nb-index2-toolkit b{
  display:block !important;
  margin-bottom:8px !important;
}

.nb-index2-detail-card span,
.nb-index2-toolkit span{
  line-height:1.65 !important;
}

@media(max-width:1050px){
  .nb-index2-overview-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media(max-width:850px){
  .nb-index2-page{
    padding:30px 18px 56px !important;
  }
  .nb-index2-detail-grid{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:600px){
  .nb-index2-overview-grid{
    grid-template-columns:1fr !important;
  }
}

/* Final shared header + readability pass */
.back-home-link{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  margin:0 0 12px !important;
  color:#bdd0ff !important;
  font-size:15px !important;
  line-height:1.15 !important;
  font-weight:850 !important;
  text-decoration:none !important;
  letter-spacing:.01em !important;
}

.eyebrow{
  display:block !important;
  width:max-content !important;
  margin:0 0 22px !important;
  padding:0 !important;
  background:transparent !important;
  color:#f2efff !important;
  font-size:13px !important;
  line-height:1.1 !important;
  font-weight:850 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

.wrap{
  padding-top:44px !important;
}

.resume-wrap h1,
.portfolio-wrap h1,
.prototypes-wrap h1,
.prototype-index-wrap h1,
main.wrap > h1,
main.wrap .hero h1,
main.wrap .resume-hero h1,
main.wrap .portfolio-hero h1,
main.wrap .prototype-hero h1,
.case-study-wrap h1,
.company-detail-page .company-hero-clean h1,
.card > h1:first-child,
.summary-block > h1:first-child{
  font-size:clamp(28px, 3.4vw, 42px) !important;
  line-height:1.08 !important;
  letter-spacing:-.012em !important;
  color:#fff !important;
}

.nb2-name{
  font-size:clamp(34px, 4.1vw, 52px) !important;
  line-height:1.04 !important;
  letter-spacing:-.01em !important;
  color:#fff !important;
}

.nb2-title{
  font-size:clamp(20px, 2.35vw, 28px) !important;
  line-height:1.14 !important;
  letter-spacing:0 !important;
  color:#f2efff !important;
}

.muted,
.card .muted,
.item .muted,
.summary-block .muted,
.case-card .muted,
.project-card .muted,
.prototype-card .muted{
  color:#d9d5e8 !important;
}

body{
  color:#f4f1ff;
}

/* Portfolio game image row: one line when there is enough width, wrap only when needed */
.app-icon-showcase,
.projects-icon-wall,
.game-history-strip,
.game-history-open{
  display:block !important;
}

.app-icon-grid,
.app-icon-grid-large,
.game-history-icons,
.portfolio-icon-line,
.game-icon-row,
.app-icon-row,
.portfolio-app-icons,
.storm8-icon-line,
.experience-icon-line{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:14px !important;
}

.app-icon-grid img,
.app-icon-grid-large img,
.game-history-icons img,
.portfolio-icon-line img,
.game-icon-row img,
.app-icon-row img,
.portfolio-app-icons img,
.storm8-icon-line img,
.experience-icon-line img{
  flex:0 0 auto !important;
  width:64px !important;
  height:64px !important;
  object-fit:cover !important;
  border-radius:16px !important;
}

.portfolio-projects-page .game-history-strip h2{
  display:none !important;
}

.portfolio-projects-page .studio-experience > h2{
  display:none !important;
}


/* Plain small page labels */
.page-label,
.shared-page-label,
.page-heading-plain .page-label,
.page-header .page-label {
  display:block !important;
  width:max-content !important;
  margin:0 0 22px !important;
  padding:0 !important;
  background:transparent !important;
  color:#f2efff !important;
  font-size:13px !important;
  line-height:1.1 !important;
  font-weight:850 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

/* ============================================================
   CURRENT PAGE SYSTEMS - safest area to edit
   ============================================================ */


/* --- HOME PAGE - hfx isolated homepage layout --- */
html,
body{
  min-height:100%;
  margin:0;
  background:#0b0d18;
}

body{
  min-height:100vh;
  color:#f7f4ff;
  background:
    radial-gradient(circle at 16% 14%, rgba(120,92,255,.30), transparent 30%),
    linear-gradient(90deg, #241d55 0%, #12152d 45%, #0b0d18 100%) !important;
}

.site-header{
  background:#0b0d18 !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}

.hfx-home{
  max-width:1180px;
  width:100%;
  margin:0 auto;
  padding:38px 22px 44px;
  box-sizing:border-box;
}

.hfx-eyebrow{
  margin:0 0 12px;
  color:#f4f1ff;
  font-size:11px;
  line-height:1;
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.hfx-title{
  margin:0;
  color:#fff;
  font-size:clamp(42px,5vw,58px);
  line-height:.95;
  letter-spacing:-.03em;
  font-weight:900;
}

.hfx-subtitle{
  margin:8px 0 18px;
  color:#f7f4ff;
  font-size:clamp(21px,2.4vw,28px);
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:850;
}

.hfx-card,
.hfx-section{
  width:100%;
  box-sizing:border-box;
  background:rgba(31,36,64,.98);
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  box-shadow:0 24px 70px rgba(0,0,0,.24);
}

.hfx-card{
  padding:20px;
  margin:0 0 18px;
}

.hfx-overview{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:0 0 18px;
}

.hfx-overview-item{
  padding:13px 14px;
  border-radius:13px;
  background:rgba(255,255,255,.065);
  border:1px solid rgba(255,255,255,.12);
}

.hfx-overview-item b{
  display:block;
  margin:0 0 5px;
  color:#fff;
  font-size:13px;
  line-height:1.1;
  font-weight:850;
}

.hfx-overview-item span{
  display:block;
  color:#ebe7fb;
  font-size:11px;
  line-height:1.25;
  font-weight:400;
}

.hfx-intro{
  margin:0;
  max-width:90ch;
  color:#f2efff;
  font-size:15px;
  line-height:1.62;
}

.hfx-section{
  padding:18px 20px;
  margin:18px 0 0;
}

.hfx-section h2{
  margin:0 0 12px;
  color:#fff;
  font-size:15px;
  line-height:1.15;
  font-weight:850;
  letter-spacing:-.01em;
}

.hfx-pill-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.hfx-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.13);
  font-size:12px;
  line-height:1;
  font-weight:760;
  white-space:nowrap;
}

.footer{
  display:block !important;
  max-width:1180px !important;
  margin:0 auto !important;
  padding:0 22px 26px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:rgba(255,255,255,.72) !important;
  text-align:center !important;
  font-size:13px !important;
  line-height:1.4 !important;
}

body::after,
.footer::before,
.footer::after{
  content:none !important;
  display:none !important;
}

@media(max-width:760px){
  .hfx-home{
    padding:30px 18px 54px;
  }

  .hfx-overview{
    grid-template-columns:1fr;
  }

  .hfx-card,
  .hfx-section{
    border-radius:20px;
  }
}


/* --- PROTOTYPES PAGE - proto2 hard-reset card grid --- */
/* Hard-reset prototype grid.
   Uses proto2-* classes so old .prototype-card / .card CSS cannot leak in. */
.proto2-wrap{
  max-width:1180px !important;
  margin:0 auto !important;
  padding:38px 22px 72px !important;
}

.proto2-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:24px !important;
  margin-top:24px !important;
  align-items:start !important;
}

.proto2-card{
  display:grid !important;
  grid-template-rows:72px 360px 96px 52px !important;
  row-gap:14px !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:28px 24px 30px !important;
  border-radius:28px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(31,36,64,.98) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.26) !important;
  text-align:center !important;
  box-sizing:border-box !important;
}

.proto2-card-title{
  width:100% !important;
  height:72px !important;
  margin:0 !important;
  padding:0 0 15px !important;
  border:0 !important;
  border-bottom:1px solid rgba(255,255,255,.20) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}

.proto2-card-title h3{
  margin:0 !important;
  padding:0 !important;
  color:#fff !important;
  font-size:27px !important;
  line-height:1.18 !important;
  letter-spacing:0 !important;
  font-weight:850 !important;
  text-align:center !important;
}

.proto2-image-slot{
  width:100% !important;
  height:360px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}

.proto2-image-slot img{
  display:block !important;
  height:100% !important;
  width:auto !important;
  max-width:100% !important;
  object-fit:contain !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.13) !important;
}

.proto2-card-copy{
  width:100% !important;
  max-width:31ch !important;
  height:96px !important;
  margin:0 auto !important;
  padding:0 !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  overflow:hidden !important;
  color:#f1eeff !important;
  font-size:16px !important;
  line-height:1.5 !important;
  text-align:center !important;
  box-sizing:border-box !important;
}

.proto2-card-action{
  height:52px !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
}

.proto2-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:176px !important;
  min-height:46px !important;
  margin:0 !important;
  padding:11px 20px !important;
  border:0 !important;
  border-radius:999px !important;
  background:#72e7ff !important;
  color:#0b0d18 !important;
  font-size:17px !important;
  line-height:1.1 !important;
  font-weight:760 !important;
  letter-spacing:0 !important;
  text-decoration:none !important;
  box-sizing:border-box !important;
}

.proto2-button:hover{
  text-decoration:none !important;
}

@media(max-width:1100px){
  .proto2-grid{
    grid-template-columns:1fr !important;
  }

  .proto2-card{
    grid-template-rows:auto 320px auto 52px !important;
  }

  .proto2-card-title{
    height:auto !important;
    min-height:56px !important;
  }

  .proto2-image-slot{
    height:320px !important;
  }

  .proto2-card-copy{
    height:auto !important;
    min-height:0 !important;
  }
}


/* --- RESUME PAGE - scrollable rendered resume pages --- */
.resume-image-page{
  max-width:980px;
  margin:0 auto;
  padding:38px 22px 72px;
}

.resume-top-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin:0 0 14px;
}

.resume-top-bar .eyebrow{
  margin:0 !important;
}

.resume-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:0;
}

.resume-actions .button{
  font-weight:760;
  letter-spacing:0;
  text-decoration:none;
  margin-top:0;
}

.resume-scroll-frame{
  max-height:78vh;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:12px;
  border-radius:24px;
  background:rgba(31,36,64,.98);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 70px rgba(0,0,0,.26);
  scrollbar-gutter:stable;
}

.resume-scroll-frame::-webkit-scrollbar{
  width:12px;
}

.resume-scroll-frame::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06);
  border-radius:999px;
}

.resume-scroll-frame::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.22);
  border-radius:999px;
  border:3px solid rgba(31,36,64,.98);
}

.resume-image{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
  background:#fff;
  margin:0 0 8px;
}

.resume-image:last-child{
  margin-bottom:0;
}

@media(max-width:700px){
  .resume-image-page{
    padding:30px 16px 56px;
  }

  .resume-scroll-frame{
    max-height:76vh;
    padding:8px;
    border-radius:18px;
  }

  .resume-top-bar{
    align-items:flex-start;
  }
}


/* --- SHARED PAGE RAILS + FOOTER --- */
html,
body{
  min-height:100%;
  background:#0b0d18;
}

body{
  min-height:100vh;
  background:
    radial-gradient(circle at 16% 14%, rgba(120,92,255,.30), transparent 30%),
    linear-gradient(90deg, #241d55 0%, #12152d 45%, #0b0d18 100%) !important;
}

.site-header{
  background:#0b0d18 !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}

.footer{
  display:block !important;
  max-width:1180px !important;
  margin:0 auto !important;
  padding:0 22px 26px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:rgba(255,255,255,.72) !important;
  text-align:center !important;
  font-size:13px !important;
  line-height:1.4 !important;
}

body::after,
.footer::before,
.footer::after{
  content:none !important;
  display:none !important;
}

/* ============================================================
   SHARED DESIGN SYSTEM PASS 1
   Version: 20260616s

   Goal:
   - Establish one shared visual system underneath the current pages.
   - Preserve current layout and page-specific behavior.
   - Make future edits safer by routing shared visual decisions through tokens.
   - Do not remove hfx/proto2/resume/portfolio classes yet.

   Current page-specific systems:
   - Homepage: hfx-*
   - Prototype index: proto2-*
   - Resume: resume-*
   - Portfolio: legacy portfolio/card classes

   Next migration pass:
   - Add shared classes directly into HTML.
   - Reduce old page-specific styling once every page is verified.
   ============================================================ */

/* --- Shared tokens --- */
:root{
  --site-bg:#0b0d18;
  --site-bg-left:#241d55;
  --site-bg-mid:#12152d;
  --site-bg-right:#0b0d18;

  --site-ink:#fbf9ff;
  --site-muted:#d9d5e8;
  --site-soft:#f2efff;

  --site-page-max:1180px;
  --site-page-padding:22px;
  --site-page-padding-mobile:18px;

  --site-card-bg:rgba(31,36,64,.98);
  --site-card-bg-soft:rgba(255,255,255,.065);
  --site-card-border:rgba(255,255,255,.14);
  --site-card-inner-border:rgba(255,255,255,.12);
  --site-card-radius:24px;
  --site-card-radius-small:13px;
  --site-card-shadow:0 24px 70px rgba(0,0,0,.24);

  --site-pill-bg:rgba(255,255,255,.075);
  --site-pill-border:rgba(255,255,255,.13);
  --site-button-bg:#72e7ff;
  --site-button-text:#0b0d18;

  --site-section-gap:18px;
  --site-grid-gap:24px;
}

/* --- Shared page rail aliases --- */
:is(.hfx-home, .portfolio-wrap, .proto2-wrap, .resume-image-page){
  max-width:var(--site-page-max) !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:var(--site-page-padding) !important;
  padding-right:var(--site-page-padding) !important;
  box-sizing:border-box !important;
}

/* --- Shared card visual aliases --- */
:is(
  .hfx-card,
  .hfx-section,
  .proto2-card,
  .resume-scroll-frame,
  .portfolio-wrap .card,
  .portfolio-wrap .case-card,
  .portfolio-wrap .experience-card,
  .portfolio-wrap .job-card,
  .card
){
  background:var(--site-card-bg) !important;
  border-color:var(--site-card-border) !important;
  box-shadow:var(--site-card-shadow) !important;
}

/* --- Shared inner info-card aliases --- */
:is(
  .hfx-overview-item,
  .stat,
  .info-card,
  .profile-card,
  .proof-card,
  .metric-card
){
  background:var(--site-card-bg-soft) !important;
  border-color:var(--site-card-inner-border) !important;
}

/* --- Shared pill aliases --- */
:is(
  .hfx-pill,
  .nb2-pill,
  .pill,
  .tag,
  .chip,
  .skill,
  .stat-pill,
  .portfolio-wrap .tag,
  .portfolio-wrap .pill,
  .portfolio-wrap .chip
){
  background:var(--site-pill-bg) !important;
  border-color:var(--site-pill-border) !important;
  color:#fff !important;
}

/* --- Shared button aliases --- */
:is(.button, .proto2-button){
  text-decoration:none !important;
  letter-spacing:0 !important;
}

:is(.button, .proto2-button):hover{
  text-decoration:none !important;
}

/* --- Shared text behavior --- */
:is(.hfx-overview-item span, .stat p, .info-card p, .profile-card p, .proof-card p, .metric-card p){
  font-weight:400 !important;
}

/* --- Shared background and footer behavior --- */
html,
body{
  min-height:100%;
  background:var(--site-bg);
}

body{
  min-height:100vh;
  background:
    radial-gradient(circle at 16% 14%, rgba(120,92,255,.30), transparent 30%),
    linear-gradient(90deg, var(--site-bg-left) 0%, var(--site-bg-mid) 45%, var(--site-bg-right) 100%) !important;
  color:var(--site-ink);
}

.site-header{
  background:var(--site-bg) !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}

.footer{
  display:block !important;
  max-width:var(--site-page-max) !important;
  margin:0 auto !important;
  padding:0 var(--site-page-padding) 26px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:rgba(255,255,255,.72) !important;
  text-align:center !important;
  font-size:13px !important;
  line-height:1.4 !important;
}

body::after,
.footer::before,
.footer::after{
  content:none !important;
  display:none !important;
}

@media(max-width:760px){
  :root{
    --site-page-padding:var(--site-page-padding-mobile);
  }
}


/* Resume initial zoom tuning */
.resume-image-page{
  max-width:1180px !important;
}

.resume-top-bar{
  max-width:860px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.resume-scroll-frame{
  max-width:860px !important;
  max-height:78vh !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:10px !important;
}

.resume-image{
  width:100% !important;
  max-width:820px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  margin-bottom:6px !important;
}

@media(max-width:900px){
  .resume-top-bar,
  .resume-scroll-frame{
    max-width:100% !important;
  }

  .resume-image{
    max-width:100% !important;
  }
}


/* ============================================================
   SHARED DESIGN SYSTEM PASS 2 - HOMEPAGE SEMANTIC CLASSES
   Version: 20260616u

   This starts the HTML migration.
   The homepage now carries shared semantic classes:
   - site-page
   - site-label
   - site-title
   - site-subtitle
   - site-card
   - site-card-grid
   - site-info-card
   - site-section
   - site-pill-list
   - site-pill

   The older hfx-* classes remain in place as layout modifiers.
   This keeps the current visual design stable while making the page easier
   to edit from shared classes over time.
   ============================================================ */

/* --- Shared semantic page shell --- */
.site-page{
  max-width:var(--site-page-max, 1180px);
  width:100%;
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--site-page-padding, 22px);
  padding-right:var(--site-page-padding, 22px);
  box-sizing:border-box;
}

.site-label{
  margin:0 0 12px;
  color:#f4f1ff;
  font-size:11px;
  line-height:1;
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.site-title{
  margin:0;
  color:#fff;
  font-size:clamp(42px,5vw,58px);
  line-height:.95;
  letter-spacing:-.03em;
  font-weight:900;
}

.site-subtitle{
  margin:8px 0 18px;
  color:#f7f4ff;
  font-size:clamp(21px,2.4vw,28px);
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:850;
}

/* --- Shared semantic containers --- */
.site-card,
.site-section{
  width:100%;
  box-sizing:border-box;
  background:var(--site-card-bg, rgba(31,36,64,.98));
  border:1px solid var(--site-card-border, rgba(255,255,255,.14));
  border-radius:var(--site-card-radius, 24px);
  box-shadow:var(--site-card-shadow, 0 24px 70px rgba(0,0,0,.24));
}

.site-card{
  padding:20px;
  margin:0 0 var(--site-section-gap, 18px);
}

.site-section{
  padding:18px 20px;
  margin:var(--site-section-gap, 18px) 0 0;
}

.site-section h2{
  margin:0 0 12px;
  color:#fff;
  font-size:15px;
  line-height:1.15;
  font-weight:850;
  letter-spacing:-.01em;
}

.site-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:0 0 var(--site-section-gap, 18px);
}

.site-info-card{
  padding:13px 14px;
  border-radius:var(--site-card-radius-small, 13px);
  background:var(--site-card-bg-soft, rgba(255,255,255,.065));
  border:1px solid var(--site-card-inner-border, rgba(255,255,255,.12));
}

.site-info-card b{
  display:block;
  margin:0 0 5px;
  color:#fff;
  font-size:13px;
  line-height:1.1;
  font-weight:850;
}

.site-info-card span,
.site-info-card p{
  display:block;
  margin:0;
  color:#ebe7fb;
  font-size:11px;
  line-height:1.25;
  font-weight:400;
}

.site-copy{
  margin:0;
  max-width:90ch;
  color:#f2efff;
  font-size:15px;
  line-height:1.62;
}

.site-pill-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.site-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:999px;
  color:#fff;
  background:var(--site-pill-bg, rgba(255,255,255,.075));
  border:1px solid var(--site-pill-border, rgba(255,255,255,.13));
  font-size:12px;
  line-height:1;
  font-weight:760;
  white-space:nowrap;
}

@media(max-width:760px){
  .site-page{
    padding-left:var(--site-page-padding-mobile, 18px);
    padding-right:var(--site-page-padding-mobile, 18px);
  }

  .site-card-grid{
    grid-template-columns:1fr;
  }

  .site-card,
  .site-section{
    border-radius:20px;
  }
}


/* ============================================================
   SHARED DESIGN SYSTEM PASS 3 - PROTOTYPES SEMANTIC CLASSES
   Version: 20260616v

   This migrates the prototype index page toward shared classes.
   The old proto2-* classes remain in place as layout modifiers.

   Shared classes added:
   - site-page
   - site-label
   - site-title
   - site-subtitle
   - site-card
   - site-card-grid
   - site-button

   This keeps the prototype grid's hard-reset stability while allowing
   shared card/button/page edits through the design system.
   ============================================================ */

/* --- Shared prototype card behavior --- */
.site-card.proto2-card{
  background:var(--site-card-bg, rgba(31,36,64,.98)) !important;
  border-color:var(--site-card-border, rgba(255,255,255,.14)) !important;
  box-shadow:var(--site-card-shadow, 0 24px 70px rgba(0,0,0,.24)) !important;
}

.site-button.proto2-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none !important;
}

.site-button.proto2-button:hover{
  text-decoration:none !important;
}

/* Keep prototype grid layout owned by proto2-* until final cleanup. */
.site-card-grid.proto2-grid{
  margin:0 !important;
}


/* ============================================================
   SHARED DESIGN SYSTEM PASS 4 - RESUME SEMANTIC CLASSES
   Version: 20260616w

   This migrates the resume page toward shared semantic classes.
   The old resume-* classes remain in place as layout modifiers.

   Shared classes added:
   - site-page
   - site-label
   - site-title
   - site-subtitle
   - site-card
   - site-button
   - site-button-row

   This keeps the resume scroll/image behavior stable while allowing
   shared page/card/button edits through the design system.
   ============================================================ */

/* --- Shared button row --- */
.site-button-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* --- Resume shared card behavior --- */
.site-card.resume-scroll-frame{
  background:var(--site-card-bg, rgba(31,36,64,.98)) !important;
  border-color:var(--site-card-border, rgba(255,255,255,.14)) !important;
  box-shadow:var(--site-card-shadow, 0 24px 70px rgba(0,0,0,.24)) !important;
}

.site-button.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none !important;
}

.site-button.button:hover{
  text-decoration:none !important;
}

/* Keep resume zoom/display rules owned by resume-* until final cleanup. */
.site-page.resume-image-page{
  max-width:var(--site-page-max, 1180px) !important;
}


/* ============================================================
   SHARED DESIGN SYSTEM PASS 5 - PORTFOLIO SEMANTIC CLASSES
   Version: 20260616x

   This starts migrating portfolio pages toward shared semantic classes.
   Existing portfolio-specific classes remain in place as layout modifiers.

   Shared classes added where safe:
   - site-page
   - site-label
   - site-title
   - site-subtitle
   - site-card
   - site-section
   - site-card-grid
   - site-pill
   - site-pill-list
   - site-button

   This keeps current portfolio layouts intact while routing broad visual
   card/pill/button styling through the shared design system.
   ============================================================ */

/* --- Portfolio shared page behavior --- */
.site-page.portfolio-wrap,
.site-page.portfolio-projects-page,
.site-page.case-page,
.site-page.project-page{
  max-width:var(--site-page-max, 1180px) !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:var(--site-page-padding, 22px) !important;
  padding-right:var(--site-page-padding, 22px) !important;
  box-sizing:border-box !important;
}

/* --- Portfolio shared card behavior --- */
.site-card.card,
.site-card.case-card,
.site-card.project-card,
.site-card.experience-card,
.site-card.job-card,
.site-card.studio-card,
.site-card.summary-block,
.site-card.item{
  background:var(--site-card-bg, rgba(31,36,64,.98)) !important;
  border-color:var(--site-card-border, rgba(255,255,255,.14)) !important;
  box-shadow:var(--site-card-shadow, 0 24px 70px rgba(0,0,0,.24)) !important;
}

/* --- Portfolio shared pill/tag behavior --- */
.site-pill.tag,
.site-pill.pill,
.site-pill.chip,
.site-pill.skill,
.site-pill.stat-pill{
  background:var(--site-pill-bg, rgba(255,255,255,.075)) !important;
  border-color:var(--site-pill-border, rgba(255,255,255,.13)) !important;
  color:#fff !important;
}

/* --- Portfolio buttons --- */
.site-button.button,
.site-button.project-button,
.site-button.case-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none !important;
}

.site-button.button:hover,
.site-button.project-button:hover,
.site-button.case-button:hover{
  text-decoration:none !important;
}

/* Keep portfolio layout rules owned by existing portfolio classes until final cleanup. */
.site-card-grid.project-grid,
.site-card-grid.case-grid,
.site-card-grid.experience-grid{
  margin-left:0;
  margin-right:0;
}


/* Portfolio tag structure fix */
.experience-tags.site-pill-list,
.company-tags.site-pill-list,
.tags.site-pill-list,
.pills.site-pill-list,
.chips.site-pill-list,
.skills.site-pill-list{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  align-items:center !important;
  justify-content:flex-start !important;
  margin:14px 0 18px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

.experience-tags.site-pill-list > .site-pill,
.company-tags.site-pill-list > .site-pill,
.tags.site-pill-list > .site-pill,
.pills.site-pill-list > .site-pill,
.chips.site-pill-list > .site-pill,
.skills.site-pill-list > .site-pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:7px 12px !important;
  border-radius:999px !important;
  color:#fff !important;
  background:var(--site-pill-bg, rgba(255,255,255,.075)) !important;
  border:1px solid var(--site-pill-border, rgba(255,255,255,.13)) !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:760 !important;
  white-space:nowrap !important;
  margin:0 !important;
}


/* ============================================================
   SHARED DESIGN SYSTEM PASS 6 - DETAIL PAGE ALIGNMENT
   Version: 20260616aa

   This pass brings the remaining studio/detail pages into the shared page
   system without changing their layout.

   Shared classes added where safe:
   - site-page on company/detail wrappers
   - site-label on eyebrow/page labels where appropriate
   - site-card on detail cards that already had card-like styling
   - site-pill-list / site-pill already corrected in the prior portfolio fix

   Existing layout classes remain in place as modifiers.
   ============================================================ */

/* --- Shared page behavior for remaining detail wrappers --- */
.site-page.wrap,
.site-page.company-detail-page,
.site-page.company-page,
.site-page.detail-page{
  max-width:var(--site-page-max, 1180px) !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:var(--site-page-padding, 22px) !important;
  padding-right:var(--site-page-padding, 22px) !important;
  box-sizing:border-box !important;
}

/* --- Detail-page card alignment --- */
.site-card.company-hero-clean,
.site-card.game-title-block,
.site-card.role-card,
.site-card.detail-card{
  background:var(--site-card-bg, rgba(31,36,64,.98)) !important;
  border-color:var(--site-card-border, rgba(255,255,255,.14)) !important;
  box-shadow:var(--site-card-shadow, 0 24px 70px rgba(0,0,0,.24)) !important;
}

/* --- Keep back links readable but not button-like unless explicitly styled as buttons --- */
.back-link{
  color:#d8d0ff !important;
  font-weight:850 !important;
  text-decoration:none !important;
}

.back-link:hover{
  text-decoration:underline !important;
}

/* ============================================================
   STABLE SHARED SYSTEM BASE
   Version: 20260616-final

   This is the current stable base.
   Use shared tokens near "SHARED DESIGN SYSTEM PASS 1" for broad styling:
   - --site-page-max
   - --site-card-bg
   - --site-card-bg-soft
   - --site-pill-bg
   - --site-card-border
   - --site-bg-left / --site-bg-mid / --site-bg-right

   Current class architecture:
   - site-* = shared semantic system
   - hfx-* = homepage layout modifiers
   - proto2-* = prototype grid/layout modifiers
   - resume-* = resume scroll/image modifiers
   - portfolio/detail legacy classes = portfolio-specific layout modifiers
   ============================================================ */


/* ============================================================
   HOMEPAGE HERO FORMAT TEST - grouped highlights + full hero copy
   Version: 20260617a

   Homepage-only experiment based on the preferred mockup direction:
   - overview stats and hero copy live in one shared container
   - top highlight row uses icons and accent headings
   - genres / expertise / tools remain separate stacked sections
   - homepage pills use a warmer gold treatment for contrast testing
   ============================================================ */

.hfx-home{
  --hfx-accent:#e2b557;
  --hfx-accent-strong:#f0c86b;
  --hfx-accent-soft:rgba(226,181,87,.20);
  --hfx-accent-line:rgba(226,181,87,.32);
  --hfx-accent-text:#231b0c;
}

.hfx-hero-card{
  padding:0 !important;
  overflow:hidden;
}

.hfx-feature-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  padding:22px 26px 18px;
}

.hfx-feature{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:0 18px;
  min-width:0;
}

.hfx-feature:first-child{
  padding-left:0;
}

.hfx-feature:last-child{
  padding-right:0;
}

.hfx-feature + .hfx-feature{
  border-left:1px solid var(--hfx-accent-line);
}

.hfx-feature-icon{
  width:54px;
  height:54px;
  border-radius:999px;
  border:2px solid var(--hfx-accent);
  color:var(--hfx-accent-strong);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background:linear-gradient(180deg, rgba(226,181,87,.10), rgba(226,181,87,.04));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}

.hfx-feature-icon svg{
  width:26px;
  height:26px;
}

.hfx-feature-copy{
  min-width:0;
}

.hfx-feature-copy b{
  display:block;
  margin:2px 0 6px;
  color:var(--hfx-accent-strong);
  font-size:16px;
  line-height:1.15;
  font-weight:850;
  letter-spacing:-.01em;
}

.hfx-feature-copy span{
  display:block;
  color:#f0eef8;
  font-size:13px;
  line-height:1.5;
}

.hfx-hero-copy{
  border-top:1px solid var(--hfx-accent-line);
  padding:22px 26px 24px;
  position:relative;
}

.hfx-hero-copy::before{
  content:"";
  position:absolute;
  top:-6px;
  left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:10px;
  height:10px;
  background:var(--hfx-accent-strong);
  border-radius:2px;
  box-shadow:0 0 0 6px rgba(31,36,64,.98);
}

.hfx-home .hfx-intro{
  max-width:none;
  margin:0;
  color:#f6f4fb;
  font-size:16px;
  line-height:1.75;
}

.hfx-home .hfx-section h2{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
}

.hfx-home .hfx-section-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  color:var(--hfx-accent-strong);
  line-height:1;
  flex:0 0 auto;
}

.hfx-home .hfx-section-icon svg{
  width:20px;
  height:20px;
}

.hfx-home .hfx-pill,
.hfx-home .site-pill.hfx-pill{
  background:linear-gradient(180deg, #e8be62 0%, #c79a43 100%) !important;
  border:1px solid rgba(255,227,163,.35) !important;
  color:var(--hfx-accent-text) !important;
  box-shadow:inset 0 1px 0 rgba(255,243,207,.24);
}

.hfx-home .hfx-pill:hover,
.hfx-home .site-pill.hfx-pill:hover{
  filter:brightness(1.03);
}

@media(max-width:900px){
  .hfx-feature-row{
    grid-template-columns:1fr;
    gap:16px;
  }

  .hfx-feature{
    padding:0;
  }

  .hfx-feature + .hfx-feature{
    border-left:0;
    padding-top:16px;
    border-top:1px solid var(--hfx-accent-line);
  }
}

@media(max-width:760px){
  .hfx-feature-row{
    padding:18px 18px 16px;
  }

  .hfx-hero-copy{
    padding:20px 18px 22px;
  }

  .hfx-home .hfx-intro{
    font-size:15px;
    line-height:1.68;
  }

  .hfx-home .hfx-section-icon{
    width:18px;
    height:18px;
  }

  .hfx-home .hfx-section-icon svg{
    width:18px;
    height:18px;
  }
}


/* ============================================================
   GOLD THEME SITEWIDE ALIGNMENT
   Version: 20260813-v99-zynga-text-image-balance

   Goal:
   - Carry the warm gold homepage accent across the rest of the site
   - Keep dark containers for readability
   - Use gold for pills, accent borders, and key links
   - Refine homepage hero alignment and text flow
   ============================================================ */

:root{
  --site-accent:#e2b557;
  --site-accent-strong:#f0c86b;
  --site-accent-soft:rgba(226,181,87,.18);
  --site-accent-line:rgba(226,181,87,.28);
  --site-card-border:rgba(226,181,87,.18);
  --site-card-inner-border:rgba(226,181,87,.14);
  --site-pill-border:rgba(255,227,163,.35);
}

.site-card,
.site-section,
.site-card.card,
.site-card.case-card,
.site-card.project-card,
.site-card.experience-card,
.site-card.job-card,
.site-card.studio-card,
.site-card.summary-block,
.site-card.item,
.site-card.company-hero-clean,
.site-card.game-title-block,
.site-card.role-card,
.site-card.detail-card,
.site-card.proto2-card,
.site-card.resume-scroll-frame{
  border-color:var(--site-card-border) !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,240,205,.04) !important;
}

.site-info-card,
.hfx-overview-item,
.stat,
.info-card,
.profile-card,
.proof-card,
.metric-card{
  border-color:var(--site-card-inner-border) !important;
}

.site-pill,
.site-pill.tag,
.site-pill.pill,
.site-pill.chip,
.site-pill.skill,
.site-pill.stat-pill,
.hfx-home .site-pill.hfx-pill,
.hfx-home .hfx-pill,
.experience-tags.site-pill-list > .site-pill,
.company-tags.site-pill-list > .site-pill,
.tags.site-pill-list > .site-pill,
.pills.site-pill-list > .site-pill,
.chips.site-pill-list > .site-pill,
.skills.site-pill-list > .site-pill{
  background:linear-gradient(180deg, #e8be62 0%, #c79a43 100%) !important;
  border:1px solid rgba(255,227,163,.35) !important;
  color:#231b0c !important;
  box-shadow:inset 0 1px 0 rgba(255,243,207,.24) !important;
}

.site-pill:hover,
.experience-tags.site-pill-list > .site-pill:hover,
.company-tags.site-pill-list > .site-pill:hover,
.tags.site-pill-list > .site-pill:hover,
.pills.site-pill-list > .site-pill:hover,
.chips.site-pill-list > .site-pill:hover,
.skills.site-pill-list > .site-pill:hover{
  filter:brightness(1.03);
}

.back-home-link,
.back-link,
.nav a.active{
  color:var(--site-accent-strong) !important;
}

.back-home-link:hover,
.back-home-link:focus,
.back-link:hover,
.back-link:focus{
  color:#f7ddb0 !important;
}

/* Homepage-specific polish */
.hfx-home .site-label,
.hfx-home .site-title{
  color:var(--site-accent-strong) !important;
}

.hfx-home .site-subtitle{
  color:#fff !important;
}

.hfx-feature{
  align-items:center;
}

.hfx-feature-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:54px;
}

.hfx-feature-copy span{
  max-width:30ch;
}

.hfx-feature:nth-child(2) .hfx-feature-copy span{
  max-width:28ch;
}

.hfx-feature-copy b{
  color:var(--site-accent-strong) !important;
}

.hfx-home .hfx-section-icon{
  color:var(--site-accent-strong) !important;
}

/* ============================================================
   GOLD THEME TUNING PASS
   Version: 20260813-v99-zynga-text-image-balance

   Updates:
   - lighten the shared pill treatment slightly for better readability
   - keep pill text high-contrast
   - make prototype names use the darker gold heading color
   ============================================================ */

:root{
  --site-pill-light-top:#f2cf82;
  --site-pill-light-bottom:#ddb25f;
  --site-pill-text:#2a200d;
  --site-proto-title:#d9a54a;
}

.site-pill,
.site-pill.tag,
.site-pill.pill,
.site-pill.chip,
.site-pill.skill,
.site-pill.stat-pill,
.hfx-home .site-pill.hfx-pill,
.hfx-home .hfx-pill,
.experience-tags.site-pill-list > .site-pill,
.company-tags.site-pill-list > .site-pill,
.tags.site-pill-list > .site-pill,
.pills.site-pill-list > .site-pill,
.chips.site-pill-list > .site-pill,
.skills.site-pill-list > .site-pill{
  background:linear-gradient(180deg, var(--site-pill-light-top) 0%, var(--site-pill-light-bottom) 100%) !important;
  border:1px solid rgba(255,240,196,.48) !important;
  color:var(--site-pill-text) !important;
  box-shadow:inset 0 1px 0 rgba(255,250,231,.34) !important;
}

.site-pill:hover,
.experience-tags.site-pill-list > .site-pill:hover,
.company-tags.site-pill-list > .site-pill:hover,
.tags.site-pill-list > .site-pill:hover,
.pills.site-pill-list > .site-pill:hover,
.chips.site-pill-list > .site-pill:hover,
.skills.site-pill-list > .site-pill:hover{
  filter:brightness(1.04);
}

.proto2-card-title h3{
  color:var(--site-proto-title) !important;
}

/* ============================================================
   HOMEPAGE FEATURE ROW TUNING PASS
   Version: 20260813-v99-zynga-text-image-balance

   Updates:
   - vertically center homepage feature titles/content with icons
   - ensure Mobile F2P copy presents cleanly in two lines
   ============================================================ */

.hfx-feature{
  align-items:center;
}

.hfx-feature-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.hfx-feature-copy b{
  margin:0 0 6px;
}

.hfx-feature-copy span{
  line-height:1.45;
}

.hfx-feature-copy span br{
  display:block;
}

/* ============================================================
   RESUME HEADER + PILL READABILITY TWEAK PASS
   Version: 20260813-v99-zynga-text-image-balance

   Updates:
   - align resume top header block with the same left edge as other pages
   - lighten the yellow pill treatment slightly
   - improve pill text readability / spacing so text feels less cramped
   ============================================================ */

/* Resume page: keep the page header area aligned like other pages */
.resume-top-bar{
  max-width:none !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Shared gold pill readability refinement */
:root{
  --site-pill-light-top:#f6da96;
  --site-pill-light-bottom:#e7c273;
  --site-pill-text:#2a210f;
}

.site-pill,
.site-pill.tag,
.site-pill.pill,
.site-pill.chip,
.site-pill.skill,
.site-pill.stat-pill,
.hfx-home .site-pill.hfx-pill,
.hfx-home .hfx-pill,
.experience-tags.site-pill-list > .site-pill,
.company-tags.site-pill-list > .site-pill,
.tags.site-pill-list > .site-pill,
.pills.site-pill-list > .site-pill,
.chips.site-pill-list > .site-pill,
.skills.site-pill-list > .site-pill{
  background:linear-gradient(180deg, var(--site-pill-light-top) 0%, var(--site-pill-light-bottom) 100%) !important;
  border:1px solid rgba(255,235,186,.48) !important;
  color:var(--site-pill-text) !important;
  padding:8px 14px !important;
  font-weight:760 !important;
  letter-spacing:.01em !important;
  line-height:1.28 !important;
  box-shadow:inset 0 1px 0 rgba(255,247,220,.35) !important;
}

.site-pill b,
.site-pill strong,
.hfx-pill b,
.hfx-pill strong{
  font-weight:800 !important;
  letter-spacing:.012em !important;
}


/* ============================================================
   RESUME ALIGNMENT + BUTTON SYSTEM PASS
   Version: 20260813-v99-zynga-text-image-balance

   Updates:
   - Resume title and buttons are stacked and left-aligned.
   - Resume PDF frame starts from the same left rail as other page content.
   - Headings/titles return to the stronger previous gold.
   - Pills stay lighter yellow, with improved text spacing.
   - Buttons use a consistent green, more rectangular shape.
   ============================================================ */

:root{
  --site-accent:#e2b557;
  --site-accent-strong:#f0c86b;
  --site-pill-light-top:#f9e2a9;
  --site-pill-light-bottom:#ebcb84;
  --site-pill-text:#2b210d;
  --site-button-bg:#78d49a;
  --site-button-bg-hover:#8ee3ab;
  --site-button-text:#07150d;
  --site-button-border:rgba(198,255,216,.42);
}

/* Return headings/titles to the stronger gold direction. */
.hfx-home .site-label,
.hfx-home .site-title,
.hfx-feature-copy b,
.hfx-home .hfx-section-icon,
.nav a.active,
.back-home-link,
.back-link,
.proto2-card-title h3,
.site-label,
.eyebrow,
.page-label,
.shared-page-label{
  color:var(--site-accent-strong) !important;
}

.hfx-home .hfx-section h2,
.site-section h2,
.portfolio-wrap h2,
.portfolio-wrap h3,
.resume-top-bar .eyebrow{
  color:#fff !important;
}

/* Keep pills lighter, but give the text more breathing room. */
.site-pill,
.site-pill.tag,
.site-pill.pill,
.site-pill.chip,
.site-pill.skill,
.site-pill.stat-pill,
.hfx-home .site-pill.hfx-pill,
.hfx-home .hfx-pill,
.experience-tags.site-pill-list > .site-pill,
.company-tags.site-pill-list > .site-pill,
.tags.site-pill-list > .site-pill,
.pills.site-pill-list > .site-pill,
.chips.site-pill-list > .site-pill,
.skills.site-pill-list > .site-pill{
  background:linear-gradient(180deg, var(--site-pill-light-top) 0%, var(--site-pill-light-bottom) 100%) !important;
  border:1px solid rgba(255,242,205,.56) !important;
  color:var(--site-pill-text) !important;
  padding:8px 15px !important;
  font-weight:740 !important;
  letter-spacing:.018em !important;
  word-spacing:.04em !important;
  line-height:1.32 !important;
  box-shadow:inset 0 1px 0 rgba(255,250,231,.42) !important;
}

.site-pill b,
.site-pill strong,
.hfx-pill b,
.hfx-pill strong{
  font-weight:800 !important;
  letter-spacing:.018em !important;
  word-spacing:.05em !important;
}

/* Resume page alignment: title, buttons, and PDF frame start on the same left rail. */
.resume-image-page{
  max-width:var(--site-page-max, 1180px) !important;
  padding-top:38px !important;
}

.resume-top-bar{
  max-width:none !important;
  width:100% !important;
  margin:0 0 12px !important;
  display:block !important;
}

.resume-top-bar .eyebrow{
  margin:0 !important;
}

.resume-actions{
  width:100% !important;
  max-width:none !important;
  margin:0 0 16px !important;
  justify-content:flex-start !important;
  align-items:center !important;
}

.resume-scroll-frame{
  max-width:860px !important;
  margin-left:0 !important;
  margin-right:auto !important;
}

/* Consistent button system: green, readable, more rectangular than pill-shaped. */
.site-button.button,
.site-button.proto2-button,
.button,
.proto2-button,
.project-button,
.case-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:40px !important;
  padding:10px 16px !important;
  border-radius:10px !important;
  background:linear-gradient(180deg, var(--site-button-bg-hover) 0%, var(--site-button-bg) 100%) !important;
  border:1px solid var(--site-button-border) !important;
  color:var(--site-button-text) !important;
  font-weight:850 !important;
  letter-spacing:.01em !important;
  text-decoration:none !important;
  box-shadow:0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.button.secondary,
.site-button.button.secondary{
  background:linear-gradient(180deg, #9be8b6 0%, #78d49a 100%) !important;
  color:var(--site-button-text) !important;
}

.site-button.button:hover,
.site-button.proto2-button:hover,
.button:hover,
.proto2-button:hover,
.project-button:hover,
.case-button:hover{
  background:linear-gradient(180deg, #a2efbd 0%, #82dda3 100%) !important;
  color:var(--site-button-text) !important;
  text-decoration:none !important;
  transform:translateY(-1px);
}

@media(max-width:760px){
  .resume-scroll-frame{
    max-width:100% !important;
  }
}


/* ============================================================
   HEADING COLOR + SPACING + HOMEPAGE FEATURE EQUALIZATION PASS
   Version: 20260813-v99-zynga-text-image-balance

   Updates:
   - Make Home / Portfolio / Prototypes page headings match the Resume title color.
   - Loosen title spacing and line-height for better readability.
   - Make the three homepage highlight items feel equal in size.
   ============================================================ */

:root{
  --site-accent-strong:#f0c86b;
  --site-accent-page-label:#ffffff;
  --site-pill-light-top:#fae7b7;
  --site-pill-light-bottom:#edcf89;
}

/* Page-level heading labels should match the Resume title (white). */
.hfx-home > .site-label.hfx-eyebrow,
.portfolio-wrap > .eyebrow,
.proto2-wrap > .eyebrow,
.resume-top-bar .eyebrow{
  color:var(--site-accent-page-label) !important;
}

/* Keep sub-page / detail-page eyebrow content on the gold accent. */
.company-detail-page .site-label.eyebrow,
.game-title-block .eyebrow,
.company-hero-clean .eyebrow{
  color:var(--site-accent-strong) !important;
}

/* Relax title spacing/readability. */
.hfx-title{
  line-height:1.02 !important;
  letter-spacing:-0.018em !important;
}

.hfx-subtitle{
  line-height:1.18 !important;
  letter-spacing:-0.01em !important;
}

.hfx-home > .site-label.hfx-eyebrow,
.portfolio-wrap > .eyebrow,
.proto2-wrap > .eyebrow,
.resume-top-bar .eyebrow{
  line-height:1.22 !important;
  letter-spacing:0.14em !important;
  word-spacing:0.06em !important;
}

.hfx-feature-copy b,
.hfx-home .hfx-section h2,
.portfolio-wrap h2,
.portfolio-wrap h3,
.proto2-card-title h3,
.company-detail-page h1,
.company-detail-page h2,
.company-detail-page h3,
.resume-image-page h1,
.resume-image-page h2,
.resume-image-page h3{
  line-height:1.24 !important;
  letter-spacing:-0.008em !important;
  word-spacing:0.02em !important;
}

/* Slightly more readable card/pill bold text. */
.site-pill,
.hfx-home .site-pill.hfx-pill,
.hfx-home .hfx-pill{
  line-height:1.34 !important;
  letter-spacing:0.018em !important;
  word-spacing:0.06em !important;
}

/* Homepage overview row: ensure all three items read as equal-size modules. */
.hfx-feature-row{
  align-items:stretch !important;
  grid-auto-rows:1fr !important;
}

.hfx-feature{
  display:grid !important;
  grid-template-columns:54px minmax(0,1fr) !important;
  align-items:center !important;
  align-content:center !important;
  min-height:104px !important;
  height:100% !important;
}

.hfx-feature-icon{
  align-self:center !important;
  justify-self:start !important;
}

.hfx-feature-copy{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  min-height:60px !important;
}

.hfx-feature-copy b{
  margin:0 0 7px !important;
}

.hfx-feature-copy span{
  max-width:none !important;
  line-height:1.42 !important;
}

/* Mobile stack still comfortable. */
@media(max-width:900px){
  .hfx-feature{
    min-height:auto !important;
    grid-template-columns:54px minmax(0,1fr) !important;
  }

  .hfx-feature-copy{
    min-height:auto !important;
  }
}


/* ============================================================
   HOMEPAGE HIGHLIGHTS BALANCE PASS
   Version: 20260813-v99-zynga-text-image-balance
   - Equalize the three homepage highlight modules
   - Force the supporting copy into clean two-line blocks
   - Keep the heading vertically centered above the copy
   ============================================================ */

.hfx-feature-row{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:0 !important;
  align-items:stretch !important;
}

.hfx-feature{
  display:grid !important;
  grid-template-columns:72px minmax(0, 1fr) !important;
  gap:18px !important;
  align-items:center !important;
  align-content:center !important;
  min-height:164px !important;
  padding:0 22px !important;
}

.hfx-feature-copy{
  display:grid !important;
  grid-template-rows:auto auto !important;
  align-content:center !important;
  gap:10px !important;
  min-height:92px !important;
}

.hfx-feature-copy b{
  display:flex !important;
  align-items:flex-end !important;
  margin:0 !important;
  min-height:1.25em !important;
  font-size:16px !important;
  line-height:1.16 !important;
}

.hfx-feature-copy span{
  display:block !important;
  margin:0 !important;
  font-size:13px !important;
  line-height:1.32 !important;
  max-width:31ch !important;
}

.hfx-feature-copy span br{
  display:block !important;
}

.hfx-feature:nth-child(1) .hfx-feature-copy span,
.hfx-feature:nth-child(2) .hfx-feature-copy span,
.hfx-feature:nth-child(3) .hfx-feature-copy span{
  max-width:30ch !important;
}

@media (max-width: 1180px){
  .hfx-feature{
    min-height:150px !important;
    grid-template-columns:64px minmax(0,1fr) !important;
    gap:16px !important;
    padding:0 18px !important;
  }

  .hfx-feature-copy span{
    max-width:none !important;
  }
}

@media (max-width: 900px){
  .hfx-feature-row{
    grid-template-columns:1fr !important;
  }

  .hfx-feature{
    min-height:auto !important;
    grid-template-columns:64px minmax(0,1fr) !important;
    padding:0 !important;
  }

  .hfx-feature-copy{
    min-height:auto !important;
  }

  .hfx-feature-copy span br{
    display:none !important;
  }
}


/* ============================================================
   HOMEPAGE HIGHLIGHT ROW CLEANUP PASS
   Version: 20260813-v99-zynga-text-image-balance

   This replaces the previous forced line-break treatment.
   Goal:
   - keep the 3 highlight columns evenly spaced
   - keep each column equal width
   - let text wrap naturally instead of forcing awkward breaks
   - keep icon + title/text vertically centered as a group
   ============================================================ */

.hfx-feature-row{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:0 !important;
  align-items:stretch !important;
  padding:24px 30px 22px !important;
}

.hfx-feature{
  display:grid !important;
  grid-template-columns:56px minmax(0, 1fr) !important;
  gap:0 !important;
  align-items:center !important;
  align-content:center !important;
  min-height:116px !important;
  height:100% !important;
  padding:0 28px !important;
}

.hfx-feature:first-child{
  padding-left:0 !important;
}

.hfx-feature:last-child{
  padding-right:0 !important;
}

.hfx-feature-icon{
  align-self:center !important;
  justify-self:center !important;
  width:54px !important;
  height:54px !important;
}

.hfx-feature-copy{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-self:center !important;
  justify-self:stretch !important;
  min-height:auto !important;
  min-width:0 !important;
  width:100% !important;
  gap:8px !important;
}

.hfx-feature-copy b{
  margin:0 !important;
  line-height:1.16 !important;
  min-height:0 !important;
  width:100% !important;
}

.hfx-feature-copy span{
  display:block !important;
  margin:0 !important;
  width:100% !important;
  max-width:none !important;
  line-height:1.34 !important;
  font-size:0.98em !important;
  text-wrap:pretty !important;
}

.hfx-feature-copy span br{
  display:none !important;
}

@media(max-width:1100px){
  .hfx-feature{
    grid-template-columns:54px minmax(0, 1fr) !important;
    gap:0 !important;
    padding:0 20px !important;
  }

  .hfx-feature-icon{
    width:50px !important;
    height:50px !important;
  }
}

@media(max-width:900px){
  .hfx-feature-row{
    grid-template-columns:1fr !important;
    padding:20px 22px !important;
  }

  .hfx-feature{
    grid-template-columns:54px minmax(0, 1fr) !important;
    min-height:auto !important;
    padding:0 !important;
  }

  .hfx-feature-copy{
    gap:5px !important;
  }
}


/* ============================================================
   RESTORE HOMEPAGE FEATURE SECTION
   Version: 20260813-v99-zynga-text-image-balance

   Reverts the broken inline-icon experiment.
   Keeps the original icon-left visual, equalizes the three columns,
   and gives the middle text enough room to wrap naturally.
   ============================================================ */

.hfx-feature-row{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:0 !important;
  align-items:stretch !important;
  padding:24px 30px 22px !important;
}

.hfx-feature{
  display:grid !important;
  grid-template-columns:54px minmax(0, 1fr) !important;
  gap:10px !important;
  align-items:center !important;
  min-height:116px !important;
  height:100% !important;
  padding:0 28px !important;
  box-sizing:border-box !important;
}

.hfx-feature:first-child{
  padding-left:0 !important;
}

.hfx-feature:last-child{
  padding-right:0 !important;
}

.hfx-feature-icon{
  display:inline-flex !important;
  align-self:center !important;
  justify-self:center !important;
  width:54px !important;
  height:54px !important;
}

.hfx-feature-icon svg{
  width:26px !important;
  height:26px !important;
}

.hfx-feature-copy{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  min-width:0 !important;
  width:100% !important;
  gap:8px !important;
}

.hfx-feature-copy b{
  display:block !important;
  margin:0 !important;
  width:100% !important;
  line-height:1.18 !important;
}

.hfx-feature-copy span{
  display:block !important;
  margin:0 !important;
  width:100% !important;
  max-width:none !important;
  line-height:1.36 !important;
  text-wrap:pretty !important;
}

.hfx-feature-copy span br{
  display:none !important;
}

@media(max-width:1100px){
  .hfx-feature{
    grid-template-columns:50px minmax(0, 1fr) !important;
    gap:8px !important;
    padding:0 20px !important;
  }

  .hfx-feature-icon{
    width:50px !important;
    height:50px !important;
  }
}

@media(max-width:900px){
  .hfx-feature-row{
    grid-template-columns:1fr !important;
    padding:20px 22px !important;
  }

  .hfx-feature{
    min-height:auto !important;
    padding:0 !important;
  }
}


/* ============================================================
   COLUMN PADDING + MOBILE RESUME SCROLL PASS
   Version: 20260813-v99-zynga-text-image-balance

   Updates:
   - Reduce homepage highlight column padding.
   - Give the middle Mobile F2P column a little extra usable text width.
   - On mobile, stop the resume PDF from being trapped inside its own fixed-height scroll box.
   ============================================================ */

/* Homepage highlight row: less side padding so text fits more naturally. */
.hfx-feature{
  padding-left:18px !important;
  padding-right:18px !important;
}

.hfx-feature:first-child{
  padding-left:0 !important;
}

.hfx-feature:nth-child(2){
  padding-left:14px !important;
  padding-right:14px !important;
}

.hfx-feature:last-child{
  padding-right:0 !important;
}

/* Keep the narrower-screen layout from reintroducing too much column padding. */
@media(max-width:1100px){
  .hfx-feature{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .hfx-feature:nth-child(2){
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .hfx-feature:first-child{
    padding-left:0 !important;
  }

  .hfx-feature:last-child{
    padding-right:0 !important;
  }
}

/* Mobile resume: let the page scroll normally instead of locking the PDF inside a viewport-height frame. */
@media(max-width:760px){
  .resume-scroll-frame{
    max-height:none !important;
    overflow-y:visible !important;
    overflow-x:hidden !important;
    scrollbar-gutter:auto !important;
    padding:8px !important;
  }

  .resume-image-page{
    padding-bottom:48px !important;
  }

  .resume-image{
    width:100% !important;
    max-width:100% !important;
  }
}


/* ============================================================
   HOMEPAGE FEATURE ROW WIDTH TWEAK
   Version: 20260813-v99-zynga-text-image-balance

   Make the middle feature column slightly wider than the outer two.
   ============================================================ */
@media(min-width:901px){
  .hfx-feature-row{
    grid-template-columns:minmax(0, 0.96fr) minmax(0, 1.08fr) minmax(0, 0.96fr) !important;
  }
}


/* ============================================================
   HOMEPAGE FEATURE COPY + EDGE PADDING PASS
   Version: 20260813-v99-zynga-text-image-balance

   Updates:
   - Shorten Top-Grossing copy to reduce awkward wrapping.
   - Reduce left/right feature section padding slightly.
   - Keep the middle feature section slightly wider.
   ============================================================ */

@media(min-width:901px){
  .hfx-feature-row{
    grid-template-columns:minmax(0, 0.96fr) minmax(0, 1.08fr) minmax(0, 0.96fr) !important;
  }

  .hfx-feature:first-child{
    padding-left:0 !important;
    padding-right:14px !important;
  }

  .hfx-feature:nth-child(2){
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .hfx-feature:last-child{
    padding-left:14px !important;
    padding-right:0 !important;
  }
}

@media(max-width:1100px) and (min-width:901px){
  .hfx-feature:first-child{
    padding-right:12px !important;
  }

  .hfx-feature:nth-child(2){
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .hfx-feature:last-child{
    padding-left:12px !important;
  }
}


/* ============================================================
   HOMEPAGE LEFT ICON INSET PASS
   Version: 20260813-v99-zynga-text-image-balance

   Updates:
   - The first feature icon no longer sits flush against the left edge.
   - Outer columns keep reduced padding, but the left icon gets matching visual breathing room.
   - Middle column remains slightly wider.
   ============================================================ */

@media(min-width:901px){
  .hfx-feature-row{
    grid-template-columns:minmax(0, 0.96fr) minmax(0, 1.08fr) minmax(0, 0.96fr) !important;
  }

  .hfx-feature:first-child{
    padding-left:10px !important;
    padding-right:12px !important;
  }

  .hfx-feature:nth-child(2){
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .hfx-feature:last-child{
    padding-left:12px !important;
    padding-right:10px !important;
  }
}

@media(max-width:1100px) and (min-width:901px){
  .hfx-feature:first-child{
    padding-left:8px !important;
    padding-right:10px !important;
  }

  .hfx-feature:nth-child(2){
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .hfx-feature:last-child{
    padding-left:10px !important;
    padding-right:8px !important;
  }
}


/* ============================================================
   HOMEPAGE FEATURE ICON CONSISTENCY PASS
   Version: 20260813-v99-zynga-text-image-balance

   Updates:
   - Force all three homepage feature icon circles to the exact same rendered box.
   - Normalize mobile stacked layout so the first icon no longer looks offset/smaller.
   - Slightly boost the trophy SVG so it visually matches the phone and leadership icons.
   ============================================================ */

.hfx-feature-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:56px !important;
  min-width:56px !important;
  max-width:56px !important;
  height:56px !important;
  min-height:56px !important;
  max-height:56px !important;
  aspect-ratio:1 / 1 !important;
  box-sizing:border-box !important;
  border-radius:999px !important;
  padding:0 !important;
  flex:0 0 56px !important;
}

.hfx-feature-icon svg{
  display:block !important;
  width:27px !important;
  height:27px !important;
  flex:0 0 auto !important;
}

.hfx-feature:first-child .hfx-feature-icon svg{
  width:29px !important;
  height:29px !important;
}

@media(max-width:900px){
  .hfx-feature-row{
    padding-left:22px !important;
    padding-right:22px !important;
  }

  .hfx-feature,
  .hfx-feature:first-child,
  .hfx-feature:nth-child(2),
  .hfx-feature:last-child{
    display:grid !important;
    grid-template-columns:56px minmax(0, 1fr) !important;
    gap:16px !important;
    padding-left:0 !important;
    padding-right:0 !important;
    align-items:center !important;
  }

  .hfx-feature-icon{
    justify-self:center !important;
    width:56px !important;
    min-width:56px !important;
    max-width:56px !important;
    height:56px !important;
    min-height:56px !important;
    max-height:56px !important;
  }
}


/* ============================================================
   HOMEPAGE FEATURE ICON DESKTOP ALIGNMENT PASS
   Version: 20260813-v99-zynga-text-image-balance

   Updates:
   - Keep mobile left-aligned behavior.
   - On desktop/tablet rows, remove the extra left-edge inset that made
     the first icon look more padded than the other icons.
   - Keep the middle column slightly wider.
   ============================================================ */

@media(min-width:901px){
  .hfx-feature-row{
    grid-template-columns:minmax(0, 0.96fr) minmax(0, 1.08fr) minmax(0, 0.96fr) !important;
  }

  .hfx-feature:first-child{
    padding-left:0 !important;
    padding-right:12px !important;
  }

  .hfx-feature:nth-child(2){
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .hfx-feature:last-child{
    padding-left:12px !important;
    padding-right:0 !important;
  }

  .hfx-feature:first-child .hfx-feature-icon{
    justify-self:center !important;
  }
}

@media(max-width:900px){
  .hfx-feature:first-child,
  .hfx-feature:nth-child(2),
  .hfx-feature:last-child{
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* ============================================================
   PRIVATE COMPANY PAGE STYLES
   Version: 20260813-v99-zynga-text-image-balance
   ============================================================ */

.private-gate{
  max-width:720px;
  margin:0 auto;
}

.private-gate-card{
  padding:28px;
}

.private-gate-form{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px;
}

.private-gate-input{
  flex:1 1 260px;
  min-height:44px;
  border-radius:10px;
  border:1px solid var(--site-card-border);
  background:rgba(255,255,255,.08);
  color:var(--site-text);
  padding:0 14px;
  font:inherit;
}

.private-gate-error{
  display:none;
  margin-top:12px;
  color:#ffd0d0;
}

.private-company-page .site-card + .site-card{
  margin-top:22px;
}

.private-company-intro{
  max-width:980px;
}

.private-company-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
  margin-top:18px;
}

.private-company-card{
  padding:20px;
}

.private-company-card h3{
  margin-top:0;
}

.private-company-list{
  margin:12px 0 0;
  padding-left:1.2em;
}

.private-company-list li + li{
  margin-top:8px;
}

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

  .private-gate-card{
    padding:22px;
  }
}


/* ZYNGA PRIVATE PAGE MOCKUP — 20260813-v99-zynga-text-image-balance */
.zynga-private-page { --zynga-accent: var(--site-accent-strong, #f0c86b); }
.zynga-hero { padding:30px; }
.zynga-hero-top { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:24px; align-items:stretch; }
.zynga-hero-copy { display:flex; flex-direction:column; justify-content:center; }
.zynga-hero-copy h2 { margin:0 0 12px; color:var(--zynga-accent); font-size:clamp(24px,4vw,42px); line-height:1.05; letter-spacing:-.02em; }
.zynga-action-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.zynga-mini-panel { border:1px solid var(--site-card-border); border-radius:22px; background:rgba(255,255,255,.045); padding:20px; }
.zynga-mini-panel h3,.zynga-feature-card h3,.zynga-sheet-header h3 { margin-top:0; color:var(--zynga-accent); }
.zynga-meta-list { display:grid; gap:10px; }
.zynga-meta-item { display:flex; justify-content:space-between; gap:14px; border-top:1px solid rgba(255,255,255,.08); padding-top:10px; color:var(--site-text-muted); }
.zynga-meta-item:first-child { border-top:0; padding-top:0; }
.zynga-meta-item strong { color:var(--site-text); }
.zynga-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:22px; }
.zynga-feature-card { padding:22px; }
.zynga-showcase-grid { display:grid; grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr); gap:22px; align-items:stretch; }
.zynga-prototype-frame { min-height:520px; border-radius:28px; border:1px solid var(--site-card-border); background:radial-gradient(circle at 22% 12%, rgba(240,200,107,.22), transparent 30%), linear-gradient(150deg, rgba(120,212,154,.16), rgba(64,53,139,.22) 42%, rgba(255,255,255,.035)); display:flex; align-items:center; justify-content:center; padding:22px; overflow:hidden; }
.zynga-phone-mock { width:min(290px,100%); min-height:470px; border-radius:34px; border:8px solid rgba(255,255,255,.14); background:rgba(8,12,32,.78); box-shadow:0 28px 80px rgba(0,0,0,.36); padding:18px; display:flex; flex-direction:column; gap:14px; }
.zynga-phone-top { display:flex; justify-content:space-between; align-items:center; color:var(--zynga-accent); font-weight:900; }
.zynga-level-pill { border-radius:999px; background:rgba(240,200,107,.16); border:1px solid rgba(240,200,107,.36); padding:6px 10px; font-size:12px; }
.zynga-board-mock { flex:1; display:grid; grid-template-columns:repeat(5,1fr); gap:8px; align-content:center; }
.zynga-tile { aspect-ratio:1; border-radius:12px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.1); }
.zynga-tile:nth-child(3n){background:rgba(120,212,154,.24)} .zynga-tile:nth-child(4n){background:rgba(240,200,107,.24)} .zynga-tile:nth-child(5n){background:rgba(116,151,255,.24)}
.zynga-sheet-frame { border-radius:24px; border:1px solid var(--site-card-border); background:rgba(255,255,255,.045); overflow:hidden; }
.zynga-sheet-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
.zynga-sheet-table { width:100%; border-collapse:collapse; font-size:14px; }
.zynga-sheet-table th,.zynga-sheet-table td { padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.075); text-align:left; }
.zynga-sheet-table th { color:var(--zynga-accent); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.zynga-sheet-table td:nth-child(2),.zynga-sheet-table td:nth-child(3) { color:var(--site-text-muted); }
.zynga-breakdown-list { margin:12px 0 0; padding-left:1.15em; }
.zynga-breakdown-list li+li { margin-top:8px; }
.zynga-note { margin-top:16px; color:var(--site-text-muted); font-size:14px; }
.private-company-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px; }
.private-company-card { padding:20px; }
@media(max-width:980px) { .zynga-hero-top,.zynga-showcase-grid,.zynga-feature-grid,.private-company-grid{grid-template-columns:1fr} .zynga-prototype-frame{min-height:420px} }
@media(max-width:640px) { .zynga-hero{padding:22px} .zynga-sheet-table{font-size:12px} .zynga-sheet-table th,.zynga-sheet-table td{padding:10px 8px} }


/* ============================================================
   SPARKLE FAVICON + PROTOTYPE ACCESS NOTE
   Version: 20260813-v99-zynga-text-image-balance
   ============================================================ */

.proto2-access-note{
  margin-top:22px !important;
  margin-bottom:22px !important;
  padding:24px !important;
}

.proto2-access-note h2{
  margin-top:0 !important;
}

.proto2-access-note a{
  color:var(--site-accent-strong, #f0c86b) !important;
  font-weight:800 !important;
}


/* ============================================================
   HOME GENRE LIST UPDATE
   Version: 20260813-v99-zynga-text-image-balance
   ============================================================ */

.hfx-home .hfx-pill-list,
.hfx-home .site-pill-list{
  align-items:flex-start !important;
}

.hfx-home .hfx-pill,
.hfx-home .site-pill.hfx-pill{
  white-space:normal !important;
}


/* ============================================================
   ACTUAL HOMEPAGE GENRE PILL UPDATE
   Version: 20260813-v99-zynga-text-image-balance
   ============================================================ */

.hfx-home .hfx-pill-list,
.hfx-home .site-pill-list{
  align-items:flex-start !important;
  row-gap:10px !important;
}

.hfx-home .hfx-pill,
.hfx-home .site-pill.hfx-pill{
  white-space:normal !important;
}


/* ============================================================
   ZYNGA PRIVATE PAGE FORMAT PASS
   Version: 20260813-v99-zynga-text-image-balance
   ============================================================ */

.zynga-private-page .site-label{
  color:var(--site-text, #f7f2e8) !important;
}

.zynga-private-page .site-title{
  max-width:980px;
}

.zynga-status-strip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 0;
}

.zynga-status-pill{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  border:1px solid rgba(240,200,107,.34);
  background:rgba(240,200,107,.13);
  color:var(--site-accent-strong, #f0c86b);
  padding:7px 11px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.zynga-private-page .site-card + .site-card{
  margin-top:22px;
}

.zynga-hero-card{
  padding:28px;
}

.zynga-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
  gap:24px;
  align-items:stretch;
}

.zynga-hero-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.zynga-hero-copy h2{
  margin:0 0 12px;
  color:var(--site-accent-strong, #f0c86b);
  font-size:clamp(24px,4vw,40px);
  line-height:1.06;
  letter-spacing:-.02em;
}

.zynga-action-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

.zynga-side-panel{
  border:1px solid var(--site-card-border);
  border-radius:22px;
  background:rgba(255,255,255,.045);
  padding:20px;
}

.zynga-side-panel h3,
.zynga-work-card h3,
.zynga-sheet-card h3{
  margin-top:0;
  color:var(--site-accent-strong, #f0c86b);
}

.zynga-meta-list{
  display:grid;
  gap:10px;
}

.zynga-meta-item{
  display:flex;
  justify-content:space-between;
  gap:14px;
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:10px;
  color:var(--site-text-muted);
}

.zynga-meta-item:first-child{
  border-top:0;
  padding-top:0;
}

.zynga-meta-item strong{
  color:var(--site-text);
}

.zynga-work-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}

.zynga-work-card{
  padding:22px;
}

.zynga-showcase-grid{
  display:grid;
  grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr);
  gap:22px;
  align-items:stretch;
}

.zynga-prototype-frame{
  min-height:460px;
  border-radius:28px;
  border:1px solid var(--site-card-border);
  background:
    radial-gradient(circle at 22% 12%, rgba(240,200,107,.22), transparent 30%),
    linear-gradient(150deg, rgba(120,212,154,.16), rgba(64,53,139,.22) 42%, rgba(255,255,255,.035));
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  overflow:hidden;
}

.zynga-phone-mock{
  width:min(285px,100%);
  min-height:420px;
  border-radius:34px;
  border:8px solid rgba(255,255,255,.14);
  background:rgba(8,12,32,.78);
  box-shadow:0 28px 80px rgba(0,0,0,.36);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.zynga-phone-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--site-accent-strong, #f0c86b);
  font-weight:900;
}

.zynga-level-pill{
  border-radius:999px;
  background:rgba(240,200,107,.16);
  border:1px solid rgba(240,200,107,.36);
  padding:6px 10px;
  font-size:12px;
}

.zynga-board-mock{
  flex:1;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  align-content:center;
}

.zynga-tile{
  aspect-ratio:1;
  border-radius:12px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.1);
}

.zynga-tile:nth-child(3n){background:rgba(120,212,154,.24)}
.zynga-tile:nth-child(4n){background:rgba(240,200,107,.24)}
.zynga-tile:nth-child(5n){background:rgba(116,151,255,.24)}

.zynga-sheet-frame{
  border-radius:24px;
  border:1px solid var(--site-card-border);
  background:rgba(255,255,255,.045);
  overflow:hidden;
}

.zynga-sheet-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.zynga-sheet-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}

.zynga-sheet-table th,
.zynga-sheet-table td{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.075);
  text-align:left;
}

.zynga-sheet-table th{
  color:var(--site-accent-strong, #f0c86b);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.zynga-sheet-table td:nth-child(2),
.zynga-sheet-table td:nth-child(3){
  color:var(--site-text-muted);
}

.zynga-note-list{
  margin:12px 0 0;
  padding-left:1.15em;
}

.zynga-note-list li + li{
  margin-top:8px;
}

.zynga-note{
  margin-top:16px;
  color:var(--site-text-muted);
  font-size:14px;
}

.private-gate{
  max-width:760px;
}

.private-gate-card{
  padding:28px;
}

.private-gate-form{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px;
}

.private-gate-input{
  flex:1 1 260px;
  min-height:44px;
  border-radius:10px;
  border:1px solid var(--site-card-border);
  background:rgba(255,255,255,.08);
  color:var(--site-text);
  padding:0 14px;
  font:inherit;
}

.private-gate-error{
  display:none;
  margin-top:12px;
  color:#ffd0d0;
}

@media(max-width:980px){
  .zynga-hero-grid,
  .zynga-showcase-grid,
  .zynga-work-grid{
    grid-template-columns:1fr;
  }

  .zynga-prototype-frame{
    min-height:390px;
  }
}

@media(max-width:640px){
  .zynga-hero-card,
  .private-gate-card{
    padding:22px;
  }

  .zynga-sheet-table{
    font-size:12px;
  }

  .zynga-sheet-table th,
  .zynga-sheet-table td{
    padding:10px 8px;
  }
}


/* ============================================================
   SITE ICON, FOOTER, AND ZYNGA PAGE SPACING FIX
   Version: 20260813-v99-zynga-text-image-balance
   ============================================================ */

/* Center copyright on every page. */
.site-footer,
.site-footer p,
footer,
footer p{
  text-align:center !important;
}

/* Keep Zynga private page using the same top spacing language as other pages. */
.zynga-private-page{
  max-width:var(--site-page-max, 1120px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.zynga-private-page .back-home-link{
  margin-bottom:22px !important;
}

.zynga-private-page .site-label{
  color:var(--site-text, #f7f2e8) !important;
  margin-bottom:10px !important;
}

.zynga-private-page .site-title{
  margin-bottom:26px !important;
}

.zynga-private-page > .site-card:first-of-type,
.zynga-private-page #gate,
.zynga-private-page #privateContent > .site-card:first-child{
  margin-top:0 !important;
}

/* Use the normal title-to-container gap after the password is unlocked. */
.zynga-private-page #privateContent{
  margin-top:0 !important;
}

/* Favicon sanity: no visual page CSS needed; HTML paths are fixed per folder depth. */


/* ============================================================
   ZYNGA STATUS-FIRST LAYOUT
   Version: 20260813-v99-zynga-text-image-balance
   ============================================================ */

.zynga-private-page .site-title{
  margin-bottom:26px !important;
}

.zynga-status-overview-card{
  padding:30px !important;
}

.zynga-status-block{
  border-left:4px solid var(--site-accent-strong, #f0c86b);
  border-radius:18px;
  background:rgba(240,200,107,.08);
  padding:20px 22px;
}

.zynga-status-label{
  color:var(--site-accent-strong, #f0c86b) !important;
  margin-bottom:8px !important;
}

.zynga-status-block h2{
  margin:0 0 10px;
  color:var(--site-text, #f7f2e8);
  font-size:clamp(26px, 4vw, 42px);
  line-height:1.05;
  letter-spacing:-.025em;
}

.zynga-status-block .site-copy{
  max-width:860px;
  margin-bottom:0;
}

.zynga-status-strip{
  margin-top:18px !important;
}

.zynga-action-row{
  margin-top:22px !important;
}

.zynga-component-status-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-top:22px;
}

.zynga-component-card{
  padding:22px !important;
}

.zynga-component-topline{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.zynga-component-card h3{
  margin:0;
  color:var(--site-accent-strong, #f0c86b);
  font-size:18px;
  line-height:1.15;
}

.zynga-component-state{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:5px 8px;
  border:1px solid rgba(240,200,107,.34);
  background:rgba(240,200,107,.12);
  color:var(--site-accent-strong, #f0c86b);
  font-size:10px;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
  white-space:nowrap;
}

.zynga-component-state.outline{
  border-color:rgba(120,212,154,.35);
  background:rgba(120,212,154,.12);
  color:#9ee5b5;
}

.zynga-component-state.not-final{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.075);
  color:var(--site-text-muted, #c7ccd8);
}

.zynga-notes-card{
  margin-top:22px !important;
}

.zynga-notes-card > h2{
  margin-top:0;
  color:var(--site-accent-strong, #f0c86b);
}

@media(max-width:1100px){
  .zynga-component-status-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:700px){
  .zynga-status-overview-card{
    padding:22px !important;
  }

  .zynga-status-block{
    padding:18px;
  }

  .zynga-component-status-grid{
    grid-template-columns:1fr;
  }

  .zynga-component-topline{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* ============================================================
   ZYNGA CLEAN STATUS LAYOUT
   Version: 20260813-v99-zynga-text-image-balance
   ============================================================ */

.zynga-private-page > .site-title{
  color:var(--site-accent-strong, #f0c86b) !important;
  margin-bottom:26px !important;
}

.zynga-clean-status-card{
  padding:30px !important;
}

.zynga-clean-status-card .zynga-status-label{
  color:var(--site-text, #f7f2e8) !important;
  margin-bottom:8px !important;
}

.zynga-clean-status-card h2{
  margin:0;
  color:var(--site-text, #f7f2e8);
  font-size:clamp(26px,4vw,42px);
  line-height:1.05;
  letter-spacing:-.025em;
}

.zynga-clean-status-card .zynga-status-strip{
  margin-top:18px !important;
  margin-bottom:18px !important;
}

.zynga-status-description{
  max-width:820px;
  margin:0 !important;
}

.zynga-clean-status-card .zynga-action-row{
  margin-top:22px !important;
}

.zynga-status-block{
  border-left:0 !important;
  background:transparent !important;
  padding:0 !important;
}

.zynga-component-status-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-top:22px;
  align-items:stretch;
}

.zynga-component-card{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:22px !important;
}

.zynga-component-card h3{
  margin:0 0 12px !important;
  color:var(--site-accent-strong, #f0c86b);
  font-size:18px;
  line-height:1.15;
}

.zynga-component-card .zynga-component-state{
  margin-bottom:14px;
}

.zynga-component-card .site-copy{
  margin:0 !important;
}

.zynga-component-topline{
  display:contents !important;
}

.zynga-notes-card{
  display:none !important;
}

@media(max-width:1100px){
  .zynga-component-status-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:700px){
  .zynga-clean-status-card{
    padding:22px !important;
  }

  .zynga-component-status-grid{
    grid-template-columns:1fr;
  }
}


/* ============================================================
   ZYNGA FOOTER + COMPONENT CARD ALIGNMENT FIX
   Version: 20260813-v99-zynga-text-image-balance
   ============================================================ */

/* Prevent the footer/copyright from overlaying the Zynga component cards. */
body:has(.zynga-private-page){
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

body:has(.zynga-private-page) .zynga-private-page{
  flex:1 0 auto;
  padding-bottom:72px !important;
}

body:has(.zynga-private-page) .site-footer{
  position:relative !important;
  z-index:1 !important;
  margin-top:48px !important;
  padding:24px 0 32px !important;
  width:100% !important;
  transform:none !important;
}

body:has(.zynga-private-page) .site-footer p{
  margin:0 !important;
  text-align:center !important;
}

/* Make the four status cards form one clean, aligned row. */
.zynga-component-status-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:22px !important;
  align-items:stretch !important;
  margin-top:24px !important;
  margin-bottom:0 !important;
}

.zynga-component-status-grid .zynga-component-card{
  height:100% !important;
  min-height:280px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  padding:26px 24px !important;
  box-sizing:border-box !important;
  margin:0 !important;
}

.zynga-component-status-grid .zynga-component-card h3{
  margin:0 0 16px !important;
  min-height:44px !important;
  display:flex !important;
  align-items:flex-start !important;
}

.zynga-component-status-grid .zynga-component-state{
  margin:0 0 22px !important;
}

.zynga-component-status-grid .zynga-component-card .site-copy{
  margin:0 !important;
  max-width:none !important;
}

/* Keep Zynga page vertical rhythm closer to other pages. */
.zynga-clean-status-card{
  margin-bottom:0 !important;
}

.zynga-private-page #privateContent{
  display:block;
}

.zynga-private-page #privateContent[style*="none"]{
  display:none !important;
}

@media(max-width:1100px){
  .zynga-component-status-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
}

@media(max-width:700px){
  .zynga-component-status-grid{
    grid-template-columns:1fr !important;
  }

  .zynga-component-status-grid .zynga-component-card{
    min-height:auto !important;
  }

  body:has(.zynga-private-page) .zynga-private-page{
    padding-bottom:40px !important;
  }
}


/* ============================================================
   ZYNGA COMPONENT STATUS: THREE-CARD ROUGH PASS UPDATE
   Version: 20260813-v99-zynga-text-image-balance
   ============================================================ */

.zynga-component-status-grid-three{
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
}

.zynga-component-status-grid-three .zynga-component-card{
  min-height:250px !important;
}

.zynga-component-state.rough-pass{
  border-color:rgba(240,200,107,.38) !important;
  background:rgba(240,200,107,.13) !important;
  color:var(--site-accent-strong, #f0c86b) !important;
}

@media(max-width:1000px){
  .zynga-component-status-grid-three{
    grid-template-columns:1fr !important;
  }

  .zynga-component-status-grid-three .zynga-component-card{
    min-height:auto !important;
  }
}


/* ============================================================
   ZYNGA PROTOTYPE-FORMAT HERO WITH SPLASH IMAGE
   Version: 20260813-v99-zynga-text-image-balance
   ============================================================ */

.zynga-private-page > .site-title{
  color:var(--site-accent-strong, #f0c86b) !important;
  margin-bottom:26px !important;
}

/* Hero follows the prototype page pattern: copy left, image right, but keeps the image contained. */
.zynga-prototype-hero-card{
  display:grid !important;
  grid-template-columns:minmax(0, 1.06fr) minmax(320px, .94fr) !important;
  gap:24px !important;
  align-items:stretch !important;
  padding:26px !important;
  margin-bottom:24px !important;
}

.zynga-prototype-hero-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

.zynga-prototype-hero-copy .zynga-status-label{
  color:var(--site-text, #f7f2e8) !important;
  margin-bottom:8px !important;
}

.zynga-prototype-hero-copy h2{
  margin:0;
  color:var(--site-text, #f7f2e8);
  font-size:clamp(28px,4vw,44px);
  line-height:1.05;
  letter-spacing:-.025em;
}

.zynga-prototype-hero-copy .zynga-status-strip{
  margin-top:18px !important;
  margin-bottom:18px !important;
}

.zynga-prototype-hero-copy .zynga-status-description{
  max-width:760px;
  margin:0 !important;
}

.zynga-prototype-hero-copy .zynga-action-row{
  margin-top:22px !important;
}

.zynga-prototype-hero-image{
  margin:0 !important;
  padding:10px !important;
  border-radius:24px;
  border:1px solid var(--site-card-border);
  background:rgba(255,255,255,.035);
  overflow:hidden;
  min-height:300px;
  max-height:380px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.zynga-prototype-hero-image img{
  width:100%;
  height:100%;
  min-height:300px;
  max-height:360px;
  object-fit:cover;
  object-position:center 32%;
  border-radius:18px;
  display:block;
}

/* Three-card component row below the hero, matching the more compact prototype-page breakdown feel. */
.zynga-component-status-grid-three{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
  margin-top:0 !important;
  margin-bottom:48px !important;
}

.zynga-component-status-grid-three .zynga-component-card{
  min-height:250px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  padding:24px !important;
  margin:0 !important;
}

.zynga-component-status-grid-three .zynga-component-card h3{
  margin:0 0 12px !important;
  min-height:0 !important;
  color:var(--site-accent-strong, #f0c86b);
}

.zynga-component-status-grid-three .zynga-component-state{
  margin:0 0 18px !important;
}

.zynga-component-status-grid-three .site-copy{
  margin:0 !important;
}

.zynga-component-state.rough-pass{
  border-color:rgba(240,200,107,.38) !important;
  background:rgba(240,200,107,.13) !important;
  color:var(--site-accent-strong, #f0c86b) !important;
}

body:has(.zynga-private-page) .site-footer{
  position:relative !important;
  margin-top:42px !important;
  padding:24px 0 34px !important;
  text-align:center !important;
}

body:has(.zynga-private-page) .site-footer p{
  margin:0 !important;
  text-align:center !important;
}

@media(max-width:980px){
  .zynga-prototype-hero-card{
    grid-template-columns:1fr !important;
  }

  .zynga-prototype-hero-image{
    max-height:420px;
  }

  .zynga-prototype-hero-image img{
    max-height:400px;
  }

  .zynga-component-status-grid-three{
    grid-template-columns:1fr !important;
  }

  .zynga-component-status-grid-three .zynga-component-card{
    min-height:auto !important;
  }
}


/* ============================================================
   ZYNGA PAGE: MOCKUP-REFINED PROJECT PANEL
   Version: 20260813-v99-zynga-text-image-balance
   ============================================================ */

.zynga-private-page > .site-title{
  color:var(--site-accent-strong, #f0c86b) !important;
  margin-bottom:12px !important;
}

.zynga-private-page > .site-label{
  color:var(--site-text, #f7f2e8) !important;
}

.zynga-private-page::after{
  content:"Rough Prototype";
  display:block;
  color:var(--site-text, #f7f2e8);
  font-family:var(--site-heading-font, inherit);
  font-size:clamp(30px, 3.5vw, 46px);
  font-weight:850;
  line-height:1.05;
  margin:0 0 28px;
}

.zynga-private-page #gate{
  margin-top:26px !important;
}

.zynga-private-page #gate + #privateContent{
  margin-top:0 !important;
}

.zynga-project-panel{
  padding:30px !important;
  margin-top:0 !important;
  margin-bottom:50px !important;
}

.zynga-project-header{
  padding:2px 0 26px;
  border-bottom:1px solid rgba(240,200,107,.18);
}

.zynga-project-header h2{
  margin:0 0 16px !important;
  color:var(--site-text, #f7f2e8) !important;
  font-size:clamp(38px, 5vw, 68px);
  line-height:.96;
  letter-spacing:-.035em;
}

.zynga-project-header .zynga-status-strip{
  margin:0 0 22px !important;
  gap:12px !important;
}

.zynga-project-header .zynga-action-row{
  margin:0 !important;
  gap:16px !important;
}

.zynga-project-content{
  display:grid;
  grid-template-columns:minmax(320px, .78fr) minmax(380px, 1.22fr);
  gap:28px;
  align-items:stretch;
  padding-top:26px;
}

.zynga-project-status-list{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  align-content:stretch;
}

.zynga-project-status-list .zynga-component-card{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  min-height:170px !important;
  padding:24px 26px !important;
  margin:0 !important;
}

.zynga-project-status-list .zynga-component-card h3{
  color:var(--site-text, #f7f2e8) !important;
  margin:0 0 12px !important;
  min-height:0 !important;
  font-size:clamp(22px, 2vw, 30px);
  line-height:1.08;
  letter-spacing:-.02em;
}

.zynga-project-status-list .zynga-component-card .site-copy{
  margin:0 !important;
  max-width:520px;
}

.zynga-component-state.rough-pass{
  border-color:#f47c2c !important;
  background:#f47c2c !important;
  color:#fff7e8 !important;
  box-shadow:none !important;
}

.zynga-project-status-list .zynga-component-state.rough-pass{
  margin:0 0 16px !important;
}

.zynga-project-image{
  margin:0 !important;
  padding:0 !important;
  border-radius:24px;
  border:1px solid var(--site-card-border);
  background:rgba(255,255,255,.035);
  overflow:hidden;
  min-height:100%;
  display:flex;
}

.zynga-project-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
}

.zynga-prototype-hero-card,
.zynga-component-status-grid-three,
.zynga-splash-layout,
.zynga-component-status-stack{
  display:none !important;
}

body:has(.zynga-private-page) .site-footer{
  position:relative !important;
  margin-top:46px !important;
  padding:24px 0 34px !important;
  text-align:center !important;
}

body:has(.zynga-private-page) .site-footer p{
  margin:0 !important;
  text-align:center !important;
}

@media(max-width:980px){
  .zynga-project-content{
    grid-template-columns:1fr;
  }

  .zynga-project-image{
    max-height:520px;
  }

  .zynga-project-image img{
    max-height:520px;
  }

  .zynga-project-status-list .zynga-component-card{
    min-height:auto !important;
  }
}

@media(max-width:640px){
  .zynga-project-panel{
    padding:22px !important;
  }

  .zynga-project-header h2{
    font-size:clamp(34px, 12vw, 52px);
  }
}


/* ============================================================
   ZYNGA ROUGH TITLE + IMAGE RESIZE FIX
   Version: 20260813-v99-zynga-text-image-balance
   ============================================================ */

/* Remove previous pseudo title that could appear in the wrong place. */
.zynga-private-page::after{
  content:none !important;
  display:none !important;
}

.zynga-page-status-title{
  color:var(--site-text, #f7f2e8) !important;
  font-size:clamp(30px, 3.5vw, 46px) !important;
  line-height:1.05 !important;
  letter-spacing:-.025em !important;
  margin:0 0 28px !important;
}

/* Reduce the splash treatment and keep it aligned with the natural left-card stack. */
.zynga-project-content{
  grid-template-columns:minmax(360px, .92fr) minmax(280px, .58fr) !important;
  align-items:start !important;
  gap:24px !important;
}

.zynga-project-status-list{
  gap:16px !important;
}

.zynga-project-status-list .zynga-component-card{
  min-height:auto !important;
  padding:22px 24px !important;
}

.zynga-project-image{
  width:100% !important;
  max-width:430px !important;
  min-height:0 !important;
  height:auto !important;
  align-self:start !important;
  justify-self:center !important;
  aspect-ratio:2 / 3 !important;
}

.zynga-project-image img{
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
}

@media(max-width:980px){
  .zynga-project-content{
    grid-template-columns:1fr !important;
  }

  .zynga-project-image{
    max-width:420px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}


/* ============================================================
   ZYNGA TITLE / ACTION ROW / IMAGE / SHEET LINK UPDATE
   Version: 20260813-v99-zynga-text-image-balance
   ============================================================ */

/* Match the main-page title scale/color more closely. */
.zynga-private-page > .site-title{
  color:var(--site-accent-strong, #f0c86b) !important;
  font-size:clamp(42px, 5vw, 58px) !important;
  line-height:.95 !important;
  letter-spacing:-.03em !important;
  font-weight:900 !important;
  margin:0 0 8px !important;
}

.zynga-page-status-title{
  color:#f7f4ff !important;
  font-size:clamp(21px, 2.4vw, 28px) !important;
  line-height:1.08 !important;
  letter-spacing:-.02em !important;
  font-weight:850 !important;
  margin:8px 0 28px !important;
}

/* Remove project pills from this private page. */
.zynga-project-header .zynga-status-strip,
.zynga-project-header .zynga-status-pill{
  display:none !important;
}

/* Put the buttons to the right of the TriPeaks Quest title. */
.zynga-project-title-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:24px !important;
}

.zynga-project-title-row h2{
  margin:0 !important;
  min-width:0 !important;
}

.zynga-project-title-row .zynga-action-row{
  margin:0 !important;
  flex:0 0 auto !important;
  display:flex !important;
  gap:14px !important;
  align-items:center !important;
  justify-content:flex-end !important;
}

.zynga-project-title-row .site-button{
  white-space:nowrap !important;
}

/* Reduce the splash image by another ~15% and keep it portrait-oriented. */
.zynga-project-content{
  grid-template-columns:minmax(390px, 1fr) minmax(240px, .46fr) !important;
  align-items:start !important;
  gap:24px !important;
}

.zynga-project-image{
  max-width:365px !important;
  aspect-ratio:2 / 3 !important;
  justify-self:center !important;
}

@media(max-width:980px){
  .zynga-project-title-row{
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  .zynga-project-title-row .zynga-action-row{
    justify-content:flex-start !important;
  }

  .zynga-project-content{
    grid-template-columns:1fr !important;
  }

  .zynga-project-image{
    max-width:365px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media(max-width:640px){
  .zynga-project-title-row .zynga-action-row{
    width:100% !important;
  }

  .zynga-project-title-row .site-button{
    flex:1 1 100% !important;
    text-align:center !important;
  }
}


/* ============================================================
   ZYNGA IMAGE HEIGHT MATCH
   Version: 20260813-v99-zynga-text-image-balance
   ============================================================ */

/* Match the right-side splash area to the full natural height of the
   left stack (Playable Prototype + Tuning Sheet + Level Design). */
.zynga-project-content{
  align-items:stretch !important;
  grid-template-columns:minmax(390px, 1fr) minmax(220px, .42fr) !important;
}

.zynga-project-status-list{
  align-self:stretch !important;
}

.zynga-project-image{
  align-self:stretch !important;
  justify-self:center !important;
  width:100% !important;
  max-width:310px !important;
  min-height:0 !important;
  height:100% !important;
  aspect-ratio:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:14px !important;
}

.zynga-project-image img{
  width:100% !important;
  height:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
}

@media(max-width:980px){
  .zynga-project-content{
    grid-template-columns:1fr !important;
    align-items:start !important;
  }

  .zynga-project-image{
    height:auto !important;
    max-width:330px !important;
    padding:10px !important;
  }

  .zynga-project-image img{
    height:auto !important;
    max-height:none !important;
  }
}


/* ============================================================
   PORTFOLIO + HOME TAG UPDATE
   Version: 20260813-v99-zynga-text-image-balance
   ============================================================ */

.portfolio-detail-card{
  padding:26px !important;
}

.portfolio-detail-card h3{
  color:var(--site-accent-strong, #f0c86b) !important;
  margin-bottom:18px !important;
}

.portfolio-detail-copy{
  display:grid;
  gap:14px;
  margin-bottom:22px;
}

.portfolio-detail-copy .experience-overview{
  margin:0 !important;
  max-width:100% !important;
}

.portfolio-detail-card strong{
  color:#fff;
  font-weight:850;
}

.portfolio-meta-block{
  margin-top:18px;
}

.portfolio-meta-block h4{
  color:#fff !important;
  font-size:14px;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:0 0 10px;
}

.portfolio-detail-tags{
  margin:0 !important;
}

.hfx-section[aria-label="Validation"] .hfx-section-icon,
.hfx-section[aria-label="Leadership"] .hfx-section-icon{
  color:var(--site-accent-strong, #f0c86b) !important;
}


/* ============================================================
   GENRE / TAG PILL STYLE PASS
   Version: 20260813-v99-zynga-text-image-balance

   Goal:
   - make pills read more like tags than buttons
   - use a darker in-page fill with a refined gold outline
   - reduce the CTA feeling from the previous bright yellow fill
   ============================================================ */

:root{
  --site-pill-tag-bg:rgba(34, 43, 90, 0.40);
  --site-pill-tag-bg-hover:rgba(44, 55, 110, 0.48);
  --site-pill-tag-border:rgba(240, 200, 107, 0.68);
  --site-pill-tag-text:#f2d37c;
}

.site-pill,
.site-pill.tag,
.site-pill.pill,
.site-pill.chip,
.site-pill.skill,
.site-pill.stat-pill,
.hfx-home .site-pill.hfx-pill,
.hfx-home .hfx-pill,
.experience-tags.site-pill-list > .site-pill,
.company-tags.site-pill-list > .site-pill,
.tags.site-pill-list > .site-pill,
.pills.site-pill-list > .site-pill,
.chips.site-pill-list > .site-pill,
.skills.site-pill-list > .site-pill{
  background:var(--site-pill-tag-bg) !important;
  border:1px solid var(--site-pill-tag-border) !important;
  color:var(--site-pill-tag-text) !important;
  box-shadow:none !important;
  text-shadow:none !important;
  font-weight:730 !important;
  padding:9px 16px !important;
}

.site-pill:hover,
.site-pill:focus-visible,
.hfx-home .site-pill.hfx-pill:hover,
.hfx-home .site-pill.hfx-pill:focus-visible,
.experience-tags.site-pill-list > .site-pill:hover,
.company-tags.site-pill-list > .site-pill:hover,
.tags.site-pill-list > .site-pill:hover,
.pills.site-pill-list > .site-pill:hover,
.chips.site-pill-list > .site-pill:hover,
.skills.site-pill-list > .site-pill:hover{
  background:var(--site-pill-tag-bg-hover) !important;
  border-color:rgba(247, 213, 132, 0.84) !important;
  color:#f6dc95 !important;
  box-shadow:none !important;
  transform:none !important;
}


/* ============================================================
   CUSTOM 401 ERROR PAGE
   Version: 20260813-v99-zynga-text-image-balance
   ============================================================ */

.error-page{
  min-height:calc(100vh - 170px);
}

.error-card{
  max-width:780px !important;
  margin-top:24px !important;
  padding:28px !important;
}

.error-card h2{
  color:var(--site-accent-strong, #f0c86b) !important;
  margin-top:0 !important;
}

.error-action-row{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:14px !important;
  margin-top:22px !important;
}

@media(max-width:640px){
  .error-action-row{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .error-action-row .site-button{
    width:100% !important;
    text-align:center !important;
  }
}


/* ============================================================
   PROTOTYPE FRAMEWORK DRAFT PAGE
   Version: 20260813-v99-zynga-text-image-balance

   Standalone draft page at /prototypes/framework.html.
   Not linked from /prototypes/ yet.
   ============================================================ */

.framework-page{
  padding-bottom:78px !important;
}

.framework-page .eyebrow{
  margin-top:10px !important;
}

.framework-hero{
  display:grid !important;
  grid-template-columns:minmax(0, .9fr) minmax(420px, 1.1fr) !important;
  gap:30px !important;
  align-items:center !important;
  margin-top:22px !important;
  padding:34px !important;
  overflow:hidden !important;
  border-color:rgba(240,200,107,.42) !important;
}

.framework-hero-copy{
  min-width:0 !important;
}

.framework-lede{
  color:#f7f3ff !important;
  font-size:18px !important;
  line-height:1.55 !important;
  margin-top:18px !important;
}

.framework-fan{
  position:relative !important;
  min-height:520px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.framework-fan-img{
  position:absolute !important;
  display:block !important;
  width:auto !important;
  max-width:none !important;
  border:1px solid rgba(240,200,107,.42) !important;
  border-radius:20px !important;
  box-shadow:0 26px 70px rgba(0,0,0,.45) !important;
  background:#0b0d18 !important;
}

.framework-fan-left{
  height:410px !important;
  transform:translateX(-170px) rotate(-8deg) !important;
  opacity:.92 !important;
  z-index:1 !important;
}

.framework-fan-center{
  height:500px !important;
  transform:translateX(0) rotate(0deg) !important;
  z-index:3 !important;
}

.framework-fan-right{
  height:390px !important;
  max-width:380px !important;
  object-fit:cover !important;
  object-position:center top !important;
  transform:translateX(190px) rotate(8deg) !important;
  opacity:.90 !important;
  z-index:2 !important;
}

.framework-section{
  margin-top:30px !important;
}

.framework-section-title{
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  gap:16px !important;
  align-items:center !important;
  margin:0 0 18px !important;
}

.framework-section-title span{
  height:1px !important;
  background:linear-gradient(90deg, transparent, rgba(240,200,107,.72), transparent) !important;
}

.framework-section-title h2{
  margin:0 !important;
  color:var(--site-accent-strong, #f0c86b) !important;
  text-align:center !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
  font-size:22px !important;
  line-height:1.1 !important;
}

.framework-section-copy{
  max-width:860px !important;
  margin:0 auto 20px !important;
  text-align:center !important;
  color:rgba(255,255,255,.78) !important;
}

.framework-module-grid{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:16px !important;
}

.framework-module-card{
  padding:20px !important;
  border-radius:20px !important;
}

.framework-module-card h3,
.framework-screen-card h3,
.framework-editor-copy h3,
.framework-example-panel h3{
  color:var(--site-accent-strong, #f0c86b) !important;
  margin:0 0 10px !important;
  font-size:19px !important;
  line-height:1.15 !important;
}

.framework-module-card p,
.framework-screen-card p,
.framework-editor-copy p{
  color:rgba(255,255,255,.78) !important;
  margin:0 !important;
  font-size:14px !important;
  line-height:1.5 !important;
}

.framework-screen-grid{
  display:grid !important;
  gap:18px !important;
}

.framework-game-grid{
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
}

.framework-screen-card{
  padding:16px !important;
  border-radius:22px !important;
  text-align:left !important;
  overflow:hidden !important;
}

.framework-screen-card img{
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  display:block !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  margin-bottom:14px !important;
  background:#080a14 !important;
}

.framework-editor-stack{
  display:grid !important;
  gap:22px !important;
}

.framework-editor-card{
  display:grid !important;
  grid-template-columns:280px minmax(0,1fr) !important;
  gap:20px !important;
  align-items:start !important;
  padding:20px !important;
  border-radius:22px !important;
  overflow:hidden !important;
}

.framework-editor-card-debug{
  grid-template-columns:280px minmax(240px,420px) !important;
  justify-content:start !important;
}

.framework-editor-card img{
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:#080a14 !important;
  display:block !important;
}

.framework-editor-card-debug img{
  max-width:420px !important;
}

.framework-example-card{
  display:grid !important;
  grid-template-columns:1fr 70px 1fr !important;
  gap:22px !important;
  align-items:center !important;
  padding:24px !important;
  border-color:rgba(240,200,107,.42) !important;
}

.framework-example-panel{
  display:grid !important;
  grid-template-columns:minmax(180px,260px) minmax(0,1fr) !important;
  gap:18px !important;
  align-items:start !important;
}

.framework-example-panel h3{
  grid-column:1 / -1 !important;
  text-align:center !important;
  text-transform:uppercase !important;
  letter-spacing:.06em !important;
}

.framework-example-panel img{
  width:100% !important;
  height:auto !important;
  display:block !important;
  border-radius:18px !important;
  border:1px solid rgba(240,200,107,.36) !important;
  background:#080a14 !important;
}

.framework-example-panel ul{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  display:grid !important;
  gap:10px !important;
  align-self:center !important;
}

.framework-example-panel li{
  color:rgba(255,255,255,.82) !important;
  font-size:14px !important;
  line-height:1.4 !important;
  position:relative !important;
  padding-left:22px !important;
}

.framework-example-panel li::before{
  content:"✓" !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  color:var(--site-accent-strong, #f0c86b) !important;
  font-weight:900 !important;
}

.framework-example-arrow{
  width:58px !important;
  height:58px !important;
  border-radius:999px !important;
  border:1px solid rgba(240,200,107,.65) !important;
  color:var(--site-accent-strong, #f0c86b) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:36px !important;
  line-height:1 !important;
  justify-self:center !important;
}

@media(max-width:1050px){
  .framework-hero{
    grid-template-columns:1fr !important;
  }

  .framework-fan{
    min-height:440px !important;
  }

  .framework-fan-left{
    height:340px !important;
    transform:translateX(-130px) rotate(-7deg) !important;
  }

  .framework-fan-center{
    height:420px !important;
  }

  .framework-fan-right{
    height:330px !important;
    transform:translateX(150px) rotate(7deg) !important;
  }

  .framework-module-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }

  .framework-game-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }

  .framework-example-card{
    grid-template-columns:1fr !important;
  }

  .framework-example-arrow{
    transform:rotate(90deg) !important;
  }
}

@media(max-width:760px){
  .framework-hero{
    padding:24px !important;
  }

  .framework-fan{
    min-height:420px !important;
    overflow:hidden !important;
  }

  .framework-fan-left,
  .framework-fan-right{
    display:none !important;
  }

  .framework-fan-center{
    height:auto !important;
    max-height:400px !important;
    max-width:100% !important;
  }

  .framework-module-grid,
  .framework-game-grid{
    grid-template-columns:1fr !important;
  }

  .framework-editor-card,
  .framework-editor-card-debug{
    grid-template-columns:1fr !important;
  }

  .framework-editor-card-debug img{
    max-width:100% !important;
  }

  .framework-example-panel{
    grid-template-columns:1fr !important;
  }
}


/* ============================================================
   PROTOTYPE DETAIL + FRAMEWORK REFINEMENT
   Version: 20260813-v99-zynga-text-image-balance
   ============================================================ */

/* Bring older prototype detail pages closer to the shared site conventions. */
.legacy-prototype-detail{
  padding-top:38px !important;
}

.legacy-prototype-detail .breadcrumb{
  color:var(--site-accent-strong, #f0c86b) !important;
  font-size:12px !important;
  line-height:1.2 !important;
  letter-spacing:.10em !important;
}

.legacy-prototype-detail h1{
  color:var(--site-accent-strong, #f0c86b) !important;
  font-size:clamp(38px, 4.6vw, 56px) !important;
  line-height:1 !important;
  letter-spacing:-.035em !important;
}

.legacy-prototype-detail h2{
  color:var(--site-accent-strong, #f0c86b) !important;
  font-size:clamp(24px, 2.4vw, 32px) !important;
}

.legacy-prototype-detail .line{
  font-size:17px !important;
  line-height:1.55 !important;
}

.legacy-prototype-detail .card{
  background:var(--site-card-bg, rgba(31,36,64,.98)) !important;
  border-color:var(--site-card-border, rgba(255,255,255,.14)) !important;
}

.legacy-prototype-detail .play-button{
  background:linear-gradient(180deg, #40d67a 0%, #219e57 100%) !important;
  color:#05120a !important;
  border:1px solid rgba(174,255,204,.45) !important;
  border-radius:12px !important;
  box-shadow:0 12px 28px rgba(33,158,87,.20) !important;
}

.legacy-prototype-detail .play-button:hover{
  filter:brightness(1.07) !important;
  text-decoration:none !important;
}

.legacy-prototype-detail + .site-footer{
  text-align:center !important;
}

.framework-page > .eyebrow{
  color:var(--site-accent-strong, #f0c86b) !important;
}

.framework-hero .site-title{
  color:var(--site-accent-strong, #f0c86b) !important;
  font-size:clamp(42px, 5.2vw, 64px) !important;
  line-height:.96 !important;
}

.framework-module-grid{
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:18px !important;
}

.framework-module-card{
  display:grid !important;
  grid-template-columns:54px minmax(0,1fr) !important;
  gap:16px !important;
  align-items:start !important;
  padding:20px !important;
}

.framework-module-icon{
  width:44px !important;
  height:44px !important;
  border:1px solid rgba(240,200,107,.70) !important;
  border-radius:12px !important;
  color:var(--site-accent-strong, #f0c86b) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:24px !important;
  line-height:1 !important;
  background:rgba(240,200,107,.06) !important;
}

.framework-module-card h3{
  margin-bottom:6px !important;
  font-size:17px !important;
}

.framework-module-card p{
  font-size:13px !important;
  line-height:1.42 !important;
}

.framework-game-grid,
.framework-editor-stack{
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  gap:18px !important;
  padding:2px 2px 16px !important;
  scroll-snap-type:x proximity !important;
}

.framework-game-grid .framework-screen-card{
  flex:0 0 235px !important;
  scroll-snap-align:start !important;
}

.framework-game-grid .framework-screen-card img{
  margin-bottom:10px !important;
}

.framework-game-grid .framework-screen-card h3{
  text-align:center !important;
  margin:0 !important;
  color:#fff !important;
}

.framework-editor-stack .framework-editor-card{
  flex:0 0 520px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  scroll-snap-align:start !important;
}

.framework-editor-stack .framework-editor-card-debug{
  flex-basis:320px !important;
}

.framework-editor-card .framework-editor-copy{
  order:-1 !important;
}

.framework-editor-card .framework-editor-copy h3{
  text-align:center !important;
  color:#fff !important;
  margin:0 !important;
}

.framework-editor-card img{
  max-height:360px !important;
  object-fit:contain !important;
}

.framework-editor-card-debug img{
  max-height:520px !important;
  max-width:100% !important;
}

.framework-example-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr) !important;
  gap:22px !important;
  align-items:center !important;
}

.framework-example-row .framework-example-panel{
  display:grid !important;
  grid-template-columns:minmax(180px,260px) minmax(0,1fr) !important;
  gap:18px !important;
  align-items:start !important;
  padding:22px !important;
  border-color:rgba(240,200,107,.42) !important;
}

.framework-example-row .framework-example-panel h3{
  grid-column:1 / -1 !important;
}

@media(max-width:1050px){
  .framework-module-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }

  .framework-example-row{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:700px){
  .framework-module-grid{
    grid-template-columns:1fr !important;
  }

  .framework-example-row .framework-example-panel{
    grid-template-columns:1fr !important;
  }
}

/* ============================================================
   V45 UI POLISH PASS
   Version: 20260813-v99-zynga-text-image-balance
   Goal: bring framework + prototype pages closer to the premium
   product-UI feel of the provided references.
   ============================================================ */

.framework-page-polish{
  padding-bottom:88px !important;
}

.framework-page-polish .back-home-link{
  margin-bottom:16px !important;
}

.framework-page-polish .eyebrow{
  margin-bottom:10px !important;
}

.framework-page-polish .framework-hero{
  position:relative !important;
  isolation:isolate !important;
  grid-template-columns:minmax(0, .88fr) minmax(470px, 1.12fr) !important;
  gap:34px !important;
  padding:36px !important;
  border:1px solid rgba(240,200,107,.46) !important;
  border-radius:32px !important;
  background:
    radial-gradient(circle at 72% 62%, rgba(155,98,255,.24), transparent 24%),
    radial-gradient(circle at 68% 26%, rgba(83,131,255,.18), transparent 26%),
    radial-gradient(circle at 24% 20%, rgba(240,200,107,.10), transparent 26%),
    linear-gradient(180deg, rgba(15,18,40,.96), rgba(11,13,26,.98)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 30px 90px rgba(0,0,0,.34) !important;
}

.framework-page-polish .framework-hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 34%),
    radial-gradient(circle at 70% 68%, rgba(170,93,255,.16), transparent 22%) !important;
  pointer-events:none !important;
  z-index:-1 !important;
}

.framework-page-polish .framework-hero-copy{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  min-width:0 !important;
}

.framework-page-polish .framework-hero-copy .site-label{
  width:max-content !important;
  padding:8px 14px !important;
  border-radius:999px !important;
  border:1px solid rgba(240,200,107,.45) !important;
  background:rgba(10,13,25,.58) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03) !important;
}

.framework-page-polish .framework-hero .site-title{
  font-size:clamp(38px, 4.4vw, 58px) !important;
  line-height:.96 !important;
  letter-spacing:-.045em !important;
  margin-bottom:12px !important;
}

.framework-page-polish .framework-lede{
  font-size:17px !important;
  line-height:1.58 !important;
  color:rgba(255,255,255,.92) !important;
  max-width:530px !important;
}

.framework-outcome-list{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin-top:12px !important;
}

.framework-outcome-pill{
  padding:10px 14px !important;
  border-radius:14px !important;
  border:1px solid rgba(240,200,107,.24) !important;
  background:linear-gradient(180deg, rgba(22,27,52,.84), rgba(13,16,33,.94)) !important;
  color:rgba(248,243,255,.92) !important;
  font-size:13px !important;
  line-height:1.35 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.framework-page-polish .framework-fan{
  min-height:540px !important;
  overflow:visible !important;
}

.framework-fan-glow{
  position:absolute !important;
  width:72% !important;
  height:160px !important;
  bottom:34px !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  background:radial-gradient(circle, rgba(146,74,255,.48) 0%, rgba(86,46,168,.20) 38%, rgba(11,13,26,0) 72%) !important;
  filter:blur(18px) !important;
  pointer-events:none !important;
  z-index:0 !important;
}

.framework-page-polish .framework-fan-img{
  border:1px solid rgba(240,200,107,.34) !important;
  border-radius:24px !important;
  background:#090c17 !important;
  box-shadow:
    0 28px 90px rgba(0,0,0,.46),
    0 0 0 1px rgba(255,255,255,.03),
    0 0 28px rgba(177,112,255,.10) !important;
}

.framework-page-polish .framework-fan-far-left{
  height:350px !important;
  transform:translateX(-272px) rotate(-12deg) !important;
  opacity:.70 !important;
  z-index:1 !important;
}

.framework-page-polish .framework-fan-left{
  height:430px !important;
  transform:translateX(-118px) rotate(-7deg) !important;
  opacity:.93 !important;
  z-index:2 !important;
}

.framework-page-polish .framework-fan-center{
  height:520px !important;
  transform:translateX(0) rotate(0deg) !important;
  z-index:4 !important;
}

.framework-page-polish .framework-fan-right{
  height:430px !important;
  transform:translateX(130px) rotate(7deg) !important;
  opacity:.93 !important;
  z-index:3 !important;
}

.framework-page-polish .framework-fan-far-right{
  height:340px !important;
  transform:translateX(284px) rotate(12deg) !important;
  opacity:.70 !important;
  z-index:1 !important;
}

.framework-page-polish .framework-section{
  margin-top:32px !important;
}

.framework-page-polish .framework-section-title{
  margin-bottom:16px !important;
}

.framework-page-polish .framework-section-title h2{
  font-size:18px !important;
  letter-spacing:.14em !important;
}

.framework-page-polish .framework-module-grid{
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:18px !important;
}

.framework-page-polish .framework-module-card{
  position:relative !important;
  display:grid !important;
  grid-template-columns:52px minmax(0,1fr) !important;
  gap:16px !important;
  align-items:start !important;
  min-height:132px !important;
  padding:18px 18px 18px 18px !important;
  border-radius:24px !important;
  background:linear-gradient(180deg, rgba(22,27,52,.92), rgba(11,14,27,.98)) !important;
  border:1px solid rgba(240,200,107,.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 44px rgba(0,0,0,.22) !important;
}

.framework-page-polish .framework-module-card::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  background:linear-gradient(135deg, rgba(255,255,255,.03), transparent 42%) !important;
  pointer-events:none !important;
}

.framework-page-polish .framework-module-icon{
  width:48px !important;
  height:48px !important;
  border-radius:14px !important;
  border:1px solid rgba(240,200,107,.62) !important;
  background:linear-gradient(180deg, rgba(240,200,107,.12), rgba(240,200,107,.04)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.18) !important;
  font-size:22px !important;
}

.framework-page-polish .framework-module-card h3{
  color:#ffd266 !important;
  font-size:17px !important;
  line-height:1.18 !important;
  margin:0 0 6px !important;
}

.framework-page-polish .framework-module-card p{
  color:rgba(236,233,248,.82) !important;
  font-size:13px !important;
  line-height:1.46 !important;
}

.framework-page-polish .framework-game-grid,
.framework-page-polish .framework-editor-stack{
  gap:18px !important;
  padding:4px 2px 18px !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(240,200,107,.55) rgba(255,255,255,.05) !important;
}

.framework-page-polish .framework-game-grid::-webkit-scrollbar,
.framework-page-polish .framework-editor-stack::-webkit-scrollbar{
  height:10px !important;
}

.framework-page-polish .framework-game-grid::-webkit-scrollbar-track,
.framework-page-polish .framework-editor-stack::-webkit-scrollbar-track{
  background:rgba(255,255,255,.04) !important;
  border-radius:999px !important;
}

.framework-page-polish .framework-game-grid::-webkit-scrollbar-thumb,
.framework-page-polish .framework-editor-stack::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(240,200,107,.72), rgba(204,148,41,.82)) !important;
  border-radius:999px !important;
}

.framework-page-polish .framework-screen-card,
.framework-page-polish .framework-editor-card,
.framework-page-polish .framework-example-panel{
  border:1px solid rgba(240,200,107,.22) !important;
  background:linear-gradient(180deg, rgba(18,22,43,.94), rgba(11,13,26,.98)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 20px 46px rgba(0,0,0,.24) !important;
}

.framework-page-polish .framework-game-grid .framework-screen-card{
  flex:0 0 228px !important;
  padding:14px !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.framework-page-polish .framework-game-grid .framework-screen-card:hover,
.framework-page-polish .framework-editor-stack .framework-editor-card:hover,
.framework-page-polish .framework-example-panel:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(240,200,107,.42) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 26px 52px rgba(0,0,0,.3), 0 0 24px rgba(177,112,255,.08) !important;
}

.framework-page-polish .framework-screen-card img,
.framework-page-polish .framework-editor-card img,
.framework-page-polish .framework-example-panel img{
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:18px !important;
  background:#05070f !important;
  box-shadow:0 12px 32px rgba(0,0,0,.28) !important;
}

.framework-page-polish .framework-screen-card h3,
.framework-page-polish .framework-editor-copy h3,
.framework-page-polish .framework-example-panel h3{
  color:#f8f6ff !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.01em !important;
}

.framework-page-polish .framework-editor-stack .framework-editor-card{
  flex:0 0 500px !important;
  gap:14px !important;
  padding:16px !important;
}

.framework-page-polish .framework-editor-stack .framework-editor-card-debug{
  flex-basis:330px !important;
}

.framework-page-polish .framework-editor-card .framework-editor-copy{
  order:-1 !important;
}

.framework-page-polish .framework-editor-card img{
  max-height:350px !important;
}

.framework-page-polish .framework-editor-card-debug img{
  max-height:500px !important;
}

.framework-page-polish .framework-example-row{
  grid-template-columns:minmax(0,1fr) 74px minmax(0,1fr) !important;
  gap:20px !important;
}

.framework-page-polish .framework-example-panel{
  grid-template-columns:minmax(170px,250px) minmax(0,1fr) !important;
  gap:18px !important;
  padding:20px !important;
  border-radius:26px !important;
}

.framework-page-polish .framework-example-panel h3{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:max-content !important;
  min-width:200px !important;
  justify-self:center !important;
  margin-bottom:4px !important;
  padding:10px 18px !important;
  border-radius:999px !important;
  border:1px solid rgba(240,200,107,.45) !important;
  background:linear-gradient(180deg, rgba(84,43,126,.94), rgba(53,26,90,.98)) !important;
  color:#ffd266 !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
}

.framework-page-polish .framework-example-panel ul{
  gap:12px !important;
}

.framework-page-polish .framework-example-panel li{
  font-size:14px !important;
  color:rgba(246,242,255,.84) !important;
}

.framework-page-polish .framework-example-arrow{
  width:62px !important;
  height:62px !important;
  background:linear-gradient(180deg, rgba(29,34,60,.94), rgba(12,14,28,.98)) !important;
  box-shadow:0 18px 36px rgba(0,0,0,.24) !important;
}

body.legacy-prototype-body{
  background:
    radial-gradient(circle at 18% 0, rgba(80,58,162,.42) 0%, rgba(24,25,48,.64) 24%, rgba(10,12,22,.98) 60%),
    linear-gradient(180deg, #090b16 0%, #0c1020 100%) !important;
  color:#f7f4ff !important;
}

body.legacy-prototype-body .site-header{
  background:rgba(9,11,22,.86) !important;
  border-bottom:1px solid rgba(240,200,107,.16) !important;
  backdrop-filter:blur(12px) !important;
}

body.legacy-prototype-body .site-header .nav a,
body.legacy-prototype-body .site-header .contact a{
  font-size:14px !important;
}

body.legacy-prototype-body .site-header .brand{
  font-size:16px !important;
}

.legacy-prototype-detail{
  padding-top:32px !important;
}

.legacy-prototype-detail .back-home-link{
  margin-bottom:14px !important;
}

.legacy-prototype-detail .breadcrumb{
  color:rgba(240,200,107,.9) !important;
  font-size:11px !important;
  letter-spacing:.14em !important;
  margin-bottom:18px !important;
}

.legacy-prototype-detail h1{
  color:#f8f6ff !important;
  font-size:clamp(32px, 3.2vw, 44px) !important;
  line-height:.98 !important;
  margin-bottom:18px !important;
}

.legacy-prototype-detail h2{
  color:#ffd266 !important;
  font-size:clamp(22px, 2.2vw, 28px) !important;
  line-height:1.05 !important;
  margin-bottom:14px !important;
}

.legacy-prototype-detail .line{
  font-size:16px !important;
  line-height:1.55 !important;
  color:rgba(242,240,249,.90) !important;
}

.legacy-prototype-detail .card{
  position:relative !important;
  background:linear-gradient(180deg, rgba(21,25,46,.94), rgba(10,13,25,.98)) !important;
  border:1px solid rgba(240,200,107,.18) !important;
  border-radius:28px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 26px 60px rgba(0,0,0,.26) !important;
}

.legacy-prototype-detail .card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  background:linear-gradient(135deg, rgba(255,255,255,.03), transparent 34%) !important;
  pointer-events:none !important;
}

.legacy-prototype-detail .hero{
  align-items:stretch !important;
}

.legacy-prototype-detail .imageCard{
  overflow:hidden !important;
}

.legacy-prototype-detail .imageFrame{
  height:420px !important;
}

.legacy-prototype-detail .imageFrame img{
  height:420px !important;
  border:1px solid rgba(240,200,107,.22) !important;
  box-shadow:0 20px 44px rgba(0,0,0,.28), 0 0 24px rgba(166,101,255,.08) !important;
}

.legacy-prototype-detail .caption{
  color:rgba(237,233,248,.74) !important;
  font-size:13px !important;
  line-height:1.5 !important;
}

.legacy-prototype-detail .play-button{
  margin-top:16px !important;
  padding:12px 18px !important;
  font-size:14px !important;
}

.legacy-prototype-detail table{
  border:1px solid rgba(240,200,107,.14) !important;
  border-radius:20px !important;
  background:rgba(255,255,255,.03) !important;
}

.legacy-prototype-detail th,
.legacy-prototype-detail td{
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}

.legacy-prototype-detail th{
  background:rgba(240,200,107,.08) !important;
  color:#ffd266 !important;
  font-size:11px !important;
  letter-spacing:.1em !important;
}

.legacy-prototype-detail td{
  color:rgba(244,242,250,.88) !important;
  font-size:13px !important;
  line-height:1.48 !important;
}

.legacy-prototype-detail .metric{
  color:#fff !important;
  font-size:18px !important;
}

.legacy-prototype-detail .note{
  border-left:4px solid rgba(240,200,107,.88) !important;
  background:rgba(240,200,107,.09) !important;
  color:#fff0ca !important;
}

@media(max-width:1180px){
  .framework-page-polish .framework-hero{
    grid-template-columns:1fr !important;
  }

  .framework-page-polish .framework-fan{
    min-height:500px !important;
  }

  .framework-page-polish .framework-fan-far-left{
    transform:translateX(-220px) rotate(-11deg) !important;
  }

  .framework-page-polish .framework-fan-left{
    transform:translateX(-96px) rotate(-7deg) !important;
  }

  .framework-page-polish .framework-fan-right{
    transform:translateX(108px) rotate(7deg) !important;
  }

  .framework-page-polish .framework-fan-far-right{
    transform:translateX(226px) rotate(11deg) !important;
  }
}

@media(max-width:980px){
  .framework-page-polish .framework-module-grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  }

  .framework-page-polish .framework-example-row{
    grid-template-columns:1fr !important;
  }

  .framework-page-polish .framework-example-arrow{
    transform:rotate(90deg) !important;
  }
}

@media(max-width:760px){
  .framework-page-polish .framework-hero{
    padding:24px !important;
  }

  .framework-page-polish .framework-fan{
    min-height:420px !important;
  }

  .framework-page-polish .framework-fan-far-left,
  .framework-page-polish .framework-fan-far-right{
    display:none !important;
  }

  .framework-page-polish .framework-fan-left{
    height:300px !important;
    transform:translateX(-84px) rotate(-7deg) !important;
  }

  .framework-page-polish .framework-fan-center{
    height:390px !important;
  }

  .framework-page-polish .framework-fan-right{
    height:300px !important;
    transform:translateX(84px) rotate(7deg) !important;
  }

  .framework-page-polish .framework-module-grid{
    grid-template-columns:1fr !important;
  }

  .framework-page-polish .framework-editor-stack .framework-editor-card,
  .framework-page-polish .framework-game-grid .framework-screen-card{
    flex-basis:84vw !important;
  }

  .framework-page-polish .framework-example-panel{
    grid-template-columns:1fr !important;
  }

  .legacy-prototype-detail .imageFrame,
  .legacy-prototype-detail .imageFrame img{
    height:340px !important;
  }
}


/* ============================================================
   V46 framework refinements
   - Remove hover/selection feel on framework cards
   - Align hero copy to top and keep it off the fan images
   - Move screen titles above images
   - Tighten example card composition
   ============================================================ */
.framework-page-polish .framework-hero{
  align-items:start !important;
  grid-template-columns:minmax(0,.78fr) minmax(540px,1.22fr) !important;
  gap:48px !important;
  overflow:hidden !important;
}

.framework-page-polish .framework-hero-copy{
  justify-content:flex-start !important;
  align-self:start !important;
  padding-top:8px !important;
  max-width:430px !important;
  position:relative !important;
  z-index:2 !important;
}

.framework-page-polish .framework-hero .site-title{
  max-width:360px !important;
  margin-bottom:16px !important;
}

.framework-page-polish .framework-lede{
  max-width:430px !important;
}

.framework-page-polish .framework-fan{
  min-height:560px !important;
  margin-left:12px !important;
}

.framework-page-polish .framework-screen-card,
.framework-page-polish .framework-editor-card,
.framework-page-polish .framework-example-panel{
  transition:none !important;
}

.framework-page-polish .framework-game-grid .framework-screen-card:hover,
.framework-page-polish .framework-editor-stack .framework-editor-card:hover,
.framework-page-polish .framework-example-panel:hover{
  transform:none !important;
  border-color:rgba(240,200,107,.22) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 20px 46px rgba(0,0,0,.24) !important;
}

.framework-page-polish .framework-game-grid .framework-screen-card{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

.framework-page-polish .framework-screen-card h3{
  order:-1 !important;
  margin:0 !important;
}

.framework-page-polish .framework-screen-card img{
  width:100% !important;
}

.framework-page-polish .framework-example-row .framework-example-panel{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:14px !important;
}

.framework-page-polish .framework-example-panel h3{
  justify-self:flex-start !important;
  margin:0 !important;
}

.framework-page-polish .framework-example-panel img{
  width:100% !important;
  max-width:250px !important;
}

.framework-page-polish .framework-example-panel ul{
  margin:0 !important;
  padding-left:0 !important;
}

body.legacy-prototype-body .play-button,
.legacy-prototype-detail .play-button{
  color:#13210d !important;
  background:linear-gradient(180deg, #a8ea58 0%, #79c928 100%) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 12px 28px rgba(101,181,28,.24) !important;
}

body.legacy-prototype-body .play-button:hover,
.legacy-prototype-detail .play-button:hover{
  text-decoration:none !important;
  filter:brightness(1.03) !important;
}

@media(max-width:1100px){
  .framework-page-polish .framework-hero{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }

  .framework-page-polish .framework-hero-copy{
    max-width:none !important;
  }

  .framework-page-polish .framework-hero .site-title,
  .framework-page-polish .framework-lede{
    max-width:none !important;
  }

  .framework-page-polish .framework-fan{
    min-height:500px !important;
    margin-left:0 !important;
  }
}


/* ============================================================
   V47 FRAMEWORK LAYOUT FIXES
   Version: 20260813-v99-zynga-text-image-balance

   Requested changes:
   - white Prototype Framework title
   - no hover movement on back links or image containers
   - centered framework hero with title, short blurb, and images below
   - no Systems & Tools label or hero pills
   - no visible containers around Game / Editor screenshots
   - Profile screenshot added to Game Screens
   ============================================================ */

/* Global back-link hover: color change only, no motion. */
.back-home-link,
.back-home-link:hover,
.back-home-link:focus,
.back-home-link:focus-visible{
  transform:none !important;
  translate:none !important;
}

.back-home-link:hover,
.back-home-link:focus,
.back-home-link:focus-visible{
  color:#fff6c8 !important;
  text-decoration:none !important;
}

/* Keep prototype titles aligned with normal site convention: white primary titles. */
.framework-page-polish .framework-hero .site-title,
.framework-page .site-title,
.legacy-prototype-detail h1,
.proto2-wrap h1{
  color:#f8f6ff !important;
}

/* Hero rework. */
.framework-page-polish .framework-hero-centered,
.framework-page-polish .framework-hero{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:24px !important;
  padding:36px 36px 42px !important;
  overflow:hidden !important;
}

.framework-page-polish .framework-hero-copy{
  align-self:center !important;
  justify-content:flex-start !important;
  align-items:center !important;
  text-align:center !important;
  max-width:780px !important;
  padding-top:0 !important;
  margin:0 auto !important;
}

.framework-page-polish .framework-hero-copy .site-label,
.framework-page-polish .framework-hero-copy .framework-outcome-list,
.framework-page-polish .framework-hero-copy .framework-outcome-pill{
  display:none !important;
}

.framework-page-polish .framework-hero .site-title{
  max-width:none !important;
  margin:0 0 14px !important;
  text-align:center !important;
}

.framework-page-polish .framework-lede{
  max-width:820px !important;
  margin:0 auto !important;
  text-align:center !important;
  font-size:17px !important;
  line-height:1.55 !important;
}

.framework-page-polish .framework-fan{
  width:100% !important;
  min-height:500px !important;
  margin:0 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
}

.framework-page-polish .framework-fan-far-left{
  height:330px !important;
  transform:translateX(-310px) rotate(-12deg) !important;
}

.framework-page-polish .framework-fan-left{
  height:410px !important;
  transform:translateX(-150px) rotate(-7deg) !important;
}

.framework-page-polish .framework-fan-center{
  height:500px !important;
  transform:translateX(0) rotate(0deg) !important;
}

.framework-page-polish .framework-fan-right{
  height:410px !important;
  transform:translateX(150px) rotate(7deg) !important;
}

.framework-page-polish .framework-fan-far-right{
  height:330px !important;
  transform:translateX(310px) rotate(12deg) !important;
}

/* What's Included spacing cleanup. */
.framework-page-polish .framework-module-card{
  min-height:0 !important;
  padding:18px !important;
  align-items:center !important;
}

.framework-page-polish .framework-module-card h3{
  margin:0 0 4px !important;
}

.framework-page-polish .framework-module-card p{
  margin:0 !important;
  line-height:1.35 !important;
}

/* No hover movement or fake selection on screenshot containers. */
.framework-page-polish .framework-screen-card,
.framework-page-polish .framework-editor-card,
.framework-page-polish .framework-example-panel{
  transition:none !important;
}

.framework-page-polish .framework-screen-card:hover,
.framework-page-polish .framework-editor-card:hover,
.framework-page-polish .framework-example-panel:hover,
.framework-page-polish .framework-game-grid .framework-screen-card:hover,
.framework-page-polish .framework-editor-stack .framework-editor-card:hover{
  transform:none !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

/* Game and editor screenshot strips: remove visible image containers. */
.framework-page-polish .framework-image-strip{
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  gap:24px !important;
  padding:4px 2px 18px !important;
  scroll-snap-type:x proximity !important;
}

.framework-page-polish .framework-image-strip .framework-screen-card,
.framework-page-polish .framework-image-strip .framework-editor-card{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  align-items:center !important;
  scroll-snap-align:start !important;
}

.framework-page-polish .framework-game-grid .framework-screen-card{
  flex:0 0 235px !important;
}

.framework-page-polish .framework-editor-stack .framework-editor-card{
  flex:0 0 auto !important;
}

.framework-page-polish .framework-editor-stack .framework-editor-card-debug{
  flex-basis:auto !important;
}

.framework-page-polish .framework-screen-card h3,
.framework-page-polish .framework-editor-copy h3{
  order:-1 !important;
  text-align:center !important;
  margin:0 !important;
  color:#f8f6ff !important;
  font-size:15px !important;
  line-height:1.2 !important;
}

.framework-page-polish .framework-screen-card img,
.framework-page-polish .framework-editor-card img{
  display:block !important;
  border:0 !important;
  border-radius:18px !important;
  background:transparent !important;
  box-shadow:0 16px 34px rgba(0,0,0,.28) !important;
}

.framework-page-polish .framework-game-grid .framework-screen-card img{
  width:235px !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
}

.framework-page-polish .framework-editor-card img{
  height:430px !important;
  width:auto !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
}

.framework-page-polish .framework-editor-card-debug img{
  height:430px !important;
  width:auto !important;
  max-width:none !important;
}

/* Example cards: still framed containers, but no hover motion. */
.framework-page-polish .framework-example-row .framework-example-panel:hover{
  transform:none !important;
}

@media(max-width:980px){
  .framework-page-polish .framework-fan{
    min-height:430px !important;
  }

  .framework-page-polish .framework-fan-far-left,
  .framework-page-polish .framework-fan-far-right{
    display:none !important;
  }

  .framework-page-polish .framework-fan-left{
    height:320px !important;
    transform:translateX(-95px) rotate(-7deg) !important;
  }

  .framework-page-polish .framework-fan-center{
    height:400px !important;
  }

  .framework-page-polish .framework-fan-right{
    height:320px !important;
    transform:translateX(95px) rotate(7deg) !important;
  }
}

@media(max-width:640px){
  .framework-page-polish .framework-hero-centered,
  .framework-page-polish .framework-hero{
    padding:24px !important;
  }

  .framework-page-polish .framework-lede{
    font-size:15px !important;
  }

  .framework-page-polish .framework-game-grid .framework-screen-card,
  .framework-page-polish .framework-game-grid .framework-screen-card img{
    width:78vw !important;
    flex-basis:78vw !important;
  }

  .framework-page-polish .framework-editor-card img,
  .framework-page-polish .framework-editor-card-debug img{
    height:auto !important;
    width:86vw !important;
  }
}


/* ============================================================
   V48 FRAMEWORK SCREEN UPDATES
   Version: 20260813-v99-zynga-text-image-balance
   - top eyebrow white; hero H1 gold
   - hero fan updated to new five screens in requested order
   - hero screens slightly smaller
   - game screens fit 5 across on laptop, scroll on smaller sizes
   - game screen title tweaks (Level Stub / Main Screen)
   ============================================================ */

/* Prototype detail eyebrow text above the back link/title should use normal white styling. */
.proto2-wrap > .eyebrow,
.framework-page > .eyebrow,
.framework-page-polish > .eyebrow{
  color:#f8f6ff !important;
}

/* Hero title should use the normal gold accent. */
.framework-page-polish .framework-hero .site-title{
  color:var(--accent,#d89b2b) !important;
}

/* Slightly smaller top hero image fan. */
.framework-page-polish .framework-fan{
  min-height:450px !important;
}
.framework-page-polish .framework-fan-far-left{
  height:300px !important;
  transform:translateX(-280px) rotate(-12deg) !important;
}
.framework-page-polish .framework-fan-left{
  height:370px !important;
  transform:translateX(-138px) rotate(-7deg) !important;
}
.framework-page-polish .framework-fan-center{
  height:450px !important;
  transform:translateX(0) rotate(0deg) !important;
}
.framework-page-polish .framework-fan-right{
  height:370px !important;
  transform:translateX(138px) rotate(7deg) !important;
}
.framework-page-polish .framework-fan-far-right{
  height:300px !important;
  transform:translateX(280px) rotate(12deg) !important;
}

/* Game screens: fit five across at standard laptop widths, but allow horizontal scroll below that. */
.framework-page-polish .framework-game-grid{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
  gap:20px !important;
  overflow:visible !important;
  padding:4px 0 18px !important;
}
.framework-page-polish .framework-game-grid .framework-screen-card{
  width:100% !important;
  min-width:0 !important;
  flex:none !important;
}
.framework-page-polish .framework-game-grid .framework-screen-card img{
  width:100% !important;
  max-width:185px !important;
  margin:0 auto !important;
}
.framework-page-polish .framework-game-grid .framework-screen-card h3{
  margin-bottom:6px !important;
}

/* Scroll strip on smaller screens. */
@media (max-width: 1180px){
  .framework-page-polish .framework-game-grid{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    gap:22px !important;
    padding:4px 2px 18px !important;
  }
  .framework-page-polish .framework-game-grid .framework-screen-card{
    flex:0 0 190px !important;
    width:190px !important;
  }
  .framework-page-polish .framework-game-grid .framework-screen-card img{
    width:190px !important;
    max-width:190px !important;
  }
}

@media(max-width:980px){
  .framework-page-polish .framework-fan{
    min-height:390px !important;
  }
  .framework-page-polish .framework-fan-far-left,
  .framework-page-polish .framework-fan-far-right{
    display:none !important;
  }
  .framework-page-polish .framework-fan-left{
    height:280px !important;
    transform:translateX(-90px) rotate(-7deg) !important;
  }
  .framework-page-polish .framework-fan-center{
    height:360px !important;
  }
  .framework-page-polish .framework-fan-right{
    height:280px !important;
    transform:translateX(90px) rotate(7deg) !important;
  }
}

@media(max-width:640px){
  .framework-page-polish .framework-game-grid .framework-screen-card{
    flex:0 0 72vw !important;
    width:72vw !important;
  }
  .framework-page-polish .framework-game-grid .framework-screen-card img{
    width:72vw !important;
    max-width:72vw !important;
  }
}


/* ============================================================
   V49 EXAMPLES SECTION REFRESH
   Version: 20260813-v99-zynga-text-image-balance
   - Remove pill-styled example headings and bullet text
   - Show three framework images on the left and two example images on the right
   - Arrow lives below/near the image display zone between the groups
   ============================================================ */

.framework-page-polish .framework-examples-refresh .framework-example-compare-v2{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr) !important;
  gap:20px !important;
  align-items:end !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-group-v2{
  padding:22px 24px 26px !important;
  border-radius:26px !important;
  background:linear-gradient(180deg, rgba(11,20,52,.84), rgba(8,14,40,.95)) !important;
  border:1px solid rgba(216,155,43,.28) !important;
  box-shadow:0 20px 44px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.03) !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-group-v2 h3{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 0 18px !important;
  padding:0 !important;
  border:none !important;
  background:none !important;
  border-radius:0 !important;
  justify-self:start !important;
  text-align:left !important;
  color:var(--accent,#d89b2b) !important;
  font-size:1.06rem !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  font-weight:800 !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-image-stack{
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-image-stack img{
  display:block !important;
  width:100% !important;
  max-width:220px !important;
  margin:0 auto !important;
  border-radius:18px !important;
  border:1px solid rgba(216,155,43,.18) !important;
  box-shadow:0 14px 28px rgba(0,0,0,.25) !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-image-stack-framework img{
  max-width:170px !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-image-stack-example img{
  max-width:220px !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-arrow-v2{
  align-self:end !important;
  justify-self:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:64px !important;
  height:64px !important;
  margin-bottom:18px !important;
  border-radius:50% !important;
  border:1px solid rgba(216,155,43,.35) !important;
  background:linear-gradient(180deg, rgba(28,36,78,.96), rgba(10,13,34,.98)) !important;
  color:#ffd266 !important;
  font-size:2rem !important;
  line-height:1 !important;
  box-shadow:0 16px 32px rgba(0,0,0,.25) !important;
}

/* Remove legacy example bullet-list presentation if any older classes remain in the DOM. */
.framework-page-polish .framework-examples-refresh .framework-example-panel ul,
.framework-page-polish .framework-examples-refresh .framework-example-group-v2 ul{
  display:none !important;
}

@media (max-width: 980px){
  .framework-page-polish .framework-examples-refresh .framework-example-compare-v2{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
  .framework-page-polish .framework-examples-refresh .framework-example-arrow-v2{
    transform:rotate(90deg) !important;
    margin:0 auto !important;
  }
  .framework-page-polish .framework-examples-refresh .framework-example-image-stack{
    flex-direction:row !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
  }
  .framework-page-polish .framework-examples-refresh .framework-example-image-stack-framework img,
  .framework-page-polish .framework-examples-refresh .framework-example-image-stack-example img{
    max-width:min(42vw, 220px) !important;
  }
}

@media (max-width: 640px){
  .framework-page-polish .framework-examples-refresh .framework-example-group-v2{
    padding:18px !important;
  }
  .framework-page-polish .framework-examples-refresh .framework-example-image-stack{
    gap:12px !important;
  }
  .framework-page-polish .framework-examples-refresh .framework-example-image-stack-framework img,
  .framework-page-polish .framework-examples-refresh .framework-example-image-stack-example img{
    max-width:100% !important;
    width:100% !important;
  }
}


/* ============================================================
   V50 FRAMEWORK + PROTOTYPE UPDATES
   Version: 20260813-v99-zynga-text-image-balance
   - rework framework examples into two clean rows with a vertical arrow between them
   - tighten prototype card headers and reduce dead space
   - rename Ingredient Match presentation to Potion Match
   - use framework-style divider lines in prototype cards and prototype detail sections
   ============================================================ */

/* ----- Prototypes grid cards ----- */
.site-card-grid.proto2-grid{
  gap:22px !important;
}

.site-card.proto2-card{
  grid-template-rows:auto 336px auto 52px !important;
  row-gap:12px !important;
  padding:22px 20px 22px !important;
}

.proto2-card-title{
  position:relative !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 0 4px !important;
  border-bottom:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
}

.proto2-card-title::before,
.proto2-card-title::after{
  content:"" !important;
  flex:1 1 auto !important;
  height:1px !important;
  background:linear-gradient(90deg, rgba(216,155,43,0), rgba(216,155,43,.85), rgba(216,155,43,0)) !important;
  opacity:.95 !important;
}

.proto2-card-title h3{
  font-size:24px !important;
  line-height:1.15 !important;
  color:#ffd266 !important;
}

.proto2-image-slot{
  height:336px !important;
}

.proto2-card-copy{
  height:auto !important;
  min-height:74px !important;
  max-width:32ch !important;
  font-size:15px !important;
  line-height:1.46 !important;
}

@media (max-width: 900px){
  .site-card.proto2-card{
    grid-template-rows:auto 320px auto 52px !important;
    padding:20px 18px !important;
  }
  .proto2-image-slot{
    height:320px !important;
  }
}

/* ----- Prototype detail pages: framework-style section dividers ----- */
.legacy-prototype-detail .section.card > h2{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  text-align:center !important;
  color:#ffd266 !important;
  font-size:clamp(20px, 2.1vw, 27px) !important;
  line-height:1.15 !important;
  margin:0 0 18px !important;
}

.legacy-prototype-detail .section.card > h2::before,
.legacy-prototype-detail .section.card > h2::after{
  content:"" !important;
  flex:1 1 auto !important;
  height:1px !important;
  background:linear-gradient(90deg, rgba(216,155,43,0), rgba(216,155,43,.85), rgba(216,155,43,0)) !important;
}

@media (max-width: 680px){
  .legacy-prototype-detail .section.card > h2{
    gap:10px !important;
    font-size:clamp(18px, 5.4vw, 24px) !important;
  }
}

/* ----- Framework examples section: two rows with a downward arrow ----- */
.framework-page-polish .framework-examples-refresh .framework-example-flow-v3{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:18px !important;
  width:100% !important;
  max-width:980px !important;
  margin:0 auto !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-row-v3{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:center !important;
  align-items:flex-start !important;
  gap:22px !important;
  overflow-x:auto !important;
  padding:4px 4px 8px !important;
  scrollbar-width:thin !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-row-v3 img{
  display:block !important;
  flex:0 0 auto !important;
  width:min(100%, 260px) !important;
  max-width:260px !important;
  height:auto !important;
  border-radius:20px !important;
  border:1px solid rgba(216,155,43,.22) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.25) !important;
  background:rgba(12,16,40,.72) !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-arrow-v3{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:70px !important;
  height:70px !important;
  margin:0 auto !important;
  border-radius:50% !important;
  border:1px solid rgba(216,155,43,.32) !important;
  background:linear-gradient(180deg, rgba(28,36,78,.96), rgba(10,13,34,.98)) !important;
  color:#ffd266 !important;
  font-size:2rem !important;
  line-height:1 !important;
  box-shadow:0 16px 34px rgba(0,0,0,.24) !important;
}

@media (max-width: 760px){
  .framework-page-polish .framework-examples-refresh .framework-example-row-v3{
    justify-content:flex-start !important;
  }
  .framework-page-polish .framework-examples-refresh .framework-example-row-v3 img{
    width:74vw !important;
    max-width:none !important;
  }
}


/* ============================================================
   PORTFOLIO + PROTOTYPE CONSISTENCY PASS
   Version: 20260813-v99-zynga-text-image-balance
   ============================================================ */

/* Framework examples: requested explicit filename mapping lines. */
.framework-page-polish .framework-examples-refresh .framework-example-heading-lines{
  display:grid !important;
  gap:8px !important;
  width:min(100%, 760px) !important;
  margin:0 auto 18px !important;
  text-align:center !important;
  color:#ffd266 !important;
  font-weight:850 !important;
  font-size:clamp(15px, 1.9vw, 20px) !important;
  line-height:1.25 !important;
  letter-spacing:.01em !important;
}

/* Individual prototype pages: consistent top hero height and gold in-card titles. */
.legacy-prototype-detail .hero h1,
.prototype-detail-page .prototype-hero-copy h1{
  color:var(--site-accent-strong, #f0c86b) !important;
}

@media(min-width:981px){
  .legacy-prototype-detail .hero{
    align-items:stretch !important;
  }

  .legacy-prototype-detail .hero > .card{
    height:560px !important;
    min-height:560px !important;
    display:flex !important;
    flex-direction:column !important;
  }

  .legacy-prototype-detail .hero > .card:first-child{
    justify-content:center !important;
  }

  .legacy-prototype-detail .hero > .card + .card{
    margin-top:0 !important;
  }

  .legacy-prototype-detail .imageCard{
    padding:18px !important;
  }

  .legacy-prototype-detail .imageCard .imageFrame{
    flex:1 1 auto !important;
    height:auto !important;
    min-height:0 !important;
    width:100% !important;
    overflow:hidden !important;
  }

  .legacy-prototype-detail .imageFrame img{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
  }

  .prototype-detail-page .prototype-hero-card{
    height:560px !important;
    min-height:560px !important;
    align-items:stretch !important;
  }

  .prototype-detail-page .prototype-hero-copy{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    min-width:0 !important;
  }

  .prototype-detail-page .prototype-hero-image{
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    min-width:0 !important;
  }

  .prototype-detail-page .prototype-hero-image img{
    width:100% !important;
    height:100% !important;
    max-width:430px !important;
    max-height:500px !important;
    object-fit:contain !important;
  }
}

/* Remove boxed containers below the hero while retaining section divider headers. */
.legacy-prototype-detail > .section.card,
.prototype-detail-page .prototype-breakdown-card{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:10px 0 0 !important;
  overflow:visible !important;
}

.legacy-prototype-detail > .section.card::before,
.prototype-detail-page .prototype-breakdown-card::before{
  display:none !important;
}

.prototype-detail-page .prototype-breakdown-card > h2{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  text-align:center !important;
  color:#ffd266 !important;
  font-size:clamp(20px, 2.1vw, 27px) !important;
  line-height:1.15 !important;
  margin:0 0 18px !important;
}

.prototype-detail-page .prototype-breakdown-card > h2::before,
.prototype-detail-page .prototype-breakdown-card > h2::after{
  content:"" !important;
  flex:1 1 auto !important;
  height:1px !important;
  background:linear-gradient(90deg, rgba(216,155,43,0), rgba(216,155,43,.85), rgba(216,155,43,0)) !important;
}

.prototype-detail-page .prototype-breakdown-card.full-width{
  grid-column:1 / -1 !important;
}

/* Keep Potential Market Opportunity table headers on one line. */
.legacy-prototype-detail .prototype-market-opportunity th{
  white-space:nowrap !important;
  font-size:10.5px !important;
  letter-spacing:.055em !important;
}

.legacy-prototype-detail .prototype-market-opportunity table{
  display:block !important;
  overflow-x:auto !important;
  width:100% !important;
}

.legacy-prototype-detail .prototype-market-opportunity tbody,
.legacy-prototype-detail .prototype-market-opportunity tr{
  width:100% !important;
}

/* Preserve non-clickable feel: image containers and back links do not lift/move on hover. */
.back-home-link,
.back-home-link:hover,
.legacy-prototype-detail .imageCard,
.legacy-prototype-detail .imageCard:hover,
.framework-screen-card,
.framework-screen-card:hover,
.framework-editor-card,
.framework-editor-card:hover,
.framework-example-row-v3 img,
.framework-example-row-v3 img:hover,
.prototype-detail-page .prototype-hero-image,
.prototype-detail-page .prototype-hero-image:hover{
  transform:none !important;
}

.back-home-link:hover{
  color:var(--site-accent-strong, #f0c86b) !important;
}

/* V51 table width correction: keep PMO tables as real tables while allowing horizontal overflow. */
.legacy-prototype-detail .prototype-market-opportunity{
  overflow-x:auto !important;
}
.legacy-prototype-detail .prototype-market-opportunity table{
  display:table !important;
  min-width:720px !important;
}

/* ============================================================
   V52 PROTOTYPE ALIGNMENT + TABLE SPACING PASS
   Version: 20260813-v99-zynga-text-image-balance
   ============================================================ */

/* Prototype index: white page label, consistent card rows, and max 3 lines of card copy. */
main.proto2-wrap > .eyebrow,
.proto2-wrap > .eyebrow,
.legacy-prototype-detail .breadcrumb,
.prototype-detail-page .eyebrow{
  color:#f8f6ff !important;
}

.proto2-grid{
  align-items:stretch !important;
}

.site-card.proto2-card{
  height:100% !important;
  display:grid !important;
  grid-template-rows:auto 336px minmax(calc(3 * 1.46em), auto) 52px !important;
}

.proto2-card-copy{
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  min-height:calc(3 * 1.46em) !important;
  max-width:36ch !important;
}

/* Individual legacy prototype pages: force the two top cards to exactly match vertically. */
.legacy-prototype-detail .hero{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  align-items:stretch !important;
}

@media(min-width:981px){
  .legacy-prototype-detail .hero > .card{
    height:640px !important;
    min-height:640px !important;
    max-height:640px !important;
    display:flex !important;
    flex-direction:column !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .legacy-prototype-detail .hero > .card:first-child{
    justify-content:center !important;
  }

  .legacy-prototype-detail .hero > .card + .card{
    margin-top:0 !important;
  }

  .legacy-prototype-detail .imageCard{
    padding:26px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
  }

  .legacy-prototype-detail .imageCard .imageFrame{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
    width:100% !important;
    overflow:hidden !important;
  }

  .legacy-prototype-detail .imageFrame img{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
  }

  .legacy-prototype-detail .caption{
    flex:0 0 auto !important;
    margin:0 4px !important;
  }

  .legacy-prototype-detail .play-button{
    flex:0 0 auto !important;
    margin:0 4px 2px !important;
  }

  .prototype-detail-page .prototype-hero-card{
    height:640px !important;
    min-height:640px !important;
    max-height:640px !important;
    align-items:stretch !important;
    overflow:hidden !important;
  }

  .prototype-detail-page .prototype-hero-copy{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    min-width:0 !important;
  }

  .prototype-detail-page .prototype-hero-image{
    align-items:center !important;
    justify-content:center !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  .prototype-detail-page .prototype-hero-image img{
    width:100% !important;
    height:100% !important;
    max-width:430px !important;
    max-height:560px !important;
    object-fit:contain !important;
  }
}

.legacy-prototype-detail .hero h1,
.prototype-detail-page .prototype-hero-copy h1{
  color:#f0c86b !important;
}

/* Pair the two market sizing tables visually with matching spacing and column widths. */
.legacy-prototype-detail .prototype-market-opportunity,
.legacy-prototype-detail .prototype-opportunity-model{
  overflow-x:auto !important;
}

.legacy-prototype-detail .prototype-market-opportunity table,
.legacy-prototype-detail .prototype-opportunity-model table{
  display:table !important;
  table-layout:fixed !important;
  min-width:780px !important;
  width:100% !important;
}

.legacy-prototype-detail .prototype-market-opportunity th,
.legacy-prototype-detail .prototype-opportunity-model th{
  white-space:nowrap !important;
}

.legacy-prototype-detail .prototype-market-opportunity th,
.legacy-prototype-detail .prototype-market-opportunity td,
.legacy-prototype-detail .prototype-opportunity-model th,
.legacy-prototype-detail .prototype-opportunity-model td{
  padding:14px 16px !important;
}

.legacy-prototype-detail .prototype-market-opportunity th:nth-child(1),
.legacy-prototype-detail .prototype-market-opportunity td:nth-child(1),
.legacy-prototype-detail .prototype-opportunity-model th:nth-child(1),
.legacy-prototype-detail .prototype-opportunity-model td:nth-child(1){ width:27% !important; }
.legacy-prototype-detail .prototype-market-opportunity th:nth-child(2),
.legacy-prototype-detail .prototype-market-opportunity td:nth-child(2),
.legacy-prototype-detail .prototype-opportunity-model th:nth-child(2),
.legacy-prototype-detail .prototype-opportunity-model td:nth-child(2){ width:21% !important; }
.legacy-prototype-detail .prototype-market-opportunity th:nth-child(3),
.legacy-prototype-detail .prototype-market-opportunity td:nth-child(3),
.legacy-prototype-detail .prototype-opportunity-model th:nth-child(3),
.legacy-prototype-detail .prototype-opportunity-model td:nth-child(3){ width:24% !important; }
.legacy-prototype-detail .prototype-market-opportunity th:nth-child(4),
.legacy-prototype-detail .prototype-market-opportunity td:nth-child(4),
.legacy-prototype-detail .prototype-opportunity-model th:nth-child(4),
.legacy-prototype-detail .prototype-opportunity-model td:nth-child(4){ width:28% !important; }

@media(max-width:980px){
  .site-card.proto2-card{
    grid-template-rows:auto 320px auto 52px !important;
  }
  .proto2-card-copy{
    min-height:0 !important;
    max-width:none !important;
  }
  .legacy-prototype-detail .hero > .card,
  .prototype-detail-page .prototype-hero-card{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
  }
}


/* V52 final title correction: framework/index page titles under the back link stay white. */
.framework-page-polish .framework-hero .site-title,
.framework-page .site-title,
.proto2-wrap > .eyebrow,
.framework-page > .eyebrow,
.framework-page-polish > .eyebrow{
  color:#f8f6ff !important;
}


/* ============================================================
   V53 PROTOTYPE COPY + DETAIL PAGE ORDER PASS
   Version: 20260813-v99-zynga-text-image-balance
   ============================================================ */

/* Prototype index copy remains compact and consistent. */
.proto2-card-copy{
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}

/* Keep prototype page labels under back links on the normal white page-label color. */
.proto2-wrap > .eyebrow,
.framework-page > .eyebrow,
.framework-page-polish > .eyebrow,
.legacy-prototype-detail .breadcrumb,
.prototype-detail-page .eyebrow{
  color:#f8f6ff !important;
}

/* Top-align hero text and place the CTA under the blurb. */
.legacy-prototype-detail .hero > .card:first-child,
.legacy-prototype-detail .prototype-hero-copy-card,
.prototype-detail-page .prototype-hero-copy{
  justify-content:flex-start !important;
  align-self:stretch !important;
}

.legacy-prototype-detail .hero .play-button,
.prototype-detail-page .prototype-hero-copy .play-button{
  align-self:flex-start !important;
  margin:16px 0 0 !important;
}

/* Monthly Estimates now matches the other market sizing tables. */
.legacy-prototype-detail .prototype-monthly-estimates,
.legacy-prototype-detail .prototype-market-opportunity,
.legacy-prototype-detail .prototype-opportunity-model{
  overflow-x:auto !important;
}

.legacy-prototype-detail .prototype-monthly-estimates table,
.legacy-prototype-detail .prototype-market-opportunity table,
.legacy-prototype-detail .prototype-opportunity-model table{
  display:table !important;
  table-layout:fixed !important;
  min-width:780px !important;
  width:100% !important;
}

.legacy-prototype-detail .prototype-monthly-estimates th,
.legacy-prototype-detail .prototype-market-opportunity th,
.legacy-prototype-detail .prototype-opportunity-model th{
  white-space:nowrap !important;
}

.legacy-prototype-detail .prototype-monthly-estimates th,
.legacy-prototype-detail .prototype-monthly-estimates td,
.legacy-prototype-detail .prototype-market-opportunity th,
.legacy-prototype-detail .prototype-market-opportunity td,
.legacy-prototype-detail .prototype-opportunity-model th,
.legacy-prototype-detail .prototype-opportunity-model td{
  padding:14px 16px !important;
}


/* ============================================================
   V54: Framework page visual mapping updates
   ============================================================ */
.framework-page-polish .framework-hero .site-title,
.framework-page-polish h1.site-title{
  color:var(--site-accent-strong, #f0c86b) !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-mapping-list{
  display:grid !important;
  gap:22px !important;
  width:100% !important;
  max-width:980px !important;
  margin:0 auto !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-mapping-card{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items:center !important;
  gap:20px !important;
  padding:8px 4px !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-image-caption-stack{
  display:grid !important;
  justify-items:center !important;
  gap:12px !important;
  min-width:0 !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-image-caption-stack img{
  display:block !important;
  width:min(100%, 280px) !important;
  max-width:280px !important;
  height:auto !important;
  border-radius:20px !important;
  border:1px solid rgba(216,155,43,.22) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.25) !important;
  background:rgba(12,16,40,.72) !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-filename{
  color:#f7f8ff !important;
  font-weight:750 !important;
  font-size:clamp(14px, 1.5vw, 16px) !important;
  line-height:1.3 !important;
  text-align:center !important;
  overflow-wrap:anywhere !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-arrow-inline{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:68px !important;
  height:68px !important;
  border-radius:999px !important;
  border:1px solid rgba(216,155,43,.32) !important;
  background:linear-gradient(180deg, rgba(28,36,78,.96), rgba(10,13,34,.98)) !important;
  color:#ffd266 !important;
  font-size:2rem !important;
  line-height:1 !important;
  box-shadow:0 16px 34px rgba(0,0,0,.24) !important;
}

@media (max-width: 760px){
  .framework-page-polish .framework-examples-refresh .framework-example-mapping-card{
    grid-template-columns:1fr !important;
    justify-items:center !important;
  }

  .framework-page-polish .framework-examples-refresh .framework-example-arrow-inline{
    transform:rotate(90deg) !important;
  }
}


/* ============================================================
   V55: Framework examples cleanup
   ============================================================ */
.framework-page-polish .framework-examples-refresh .framework-example-mapping-list{
  gap:28px !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-mapping-card{
  gap:34px !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-image-caption-stack{
  gap:0 !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-arrow-inline{
  width:76px !important;
  height:76px !important;
  font-size:2.15rem !important;
}

@media (max-width: 760px){
  .framework-page-polish .framework-examples-refresh .framework-example-mapping-card{
    gap:18px !important;
  }
}


/* ============================================================
   V56: Framework examples as two side-by-side columns
   ============================================================ */
.framework-page-polish .framework-hero .site-title,
.framework-page-polish h1.site-title{
  color:var(--site-accent-strong, #f0c86b) !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-heading-lines,
.framework-page-polish .framework-examples-refresh .framework-example-filename,
.framework-page-polish .framework-examples-refresh .framework-example-flow-v3,
.framework-page-polish .framework-examples-refresh .framework-example-mapping-list,
.framework-page-polish .framework-examples-refresh .framework-example-row-v3,
.framework-page-polish .framework-examples-refresh .framework-example-arrow-v3,
.framework-page-polish .framework-examples-refresh .framework-example-mapping-card,
.framework-page-polish .framework-examples-refresh .framework-example-arrow-inline{
  display:none !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-columns{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  align-items:start !important;
  justify-content:center !important;
  gap:46px !important;
  width:100% !important;
  max-width:920px !important;
  margin:0 auto !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-column-card{
  display:grid !important;
  justify-items:center !important;
  align-content:start !important;
  gap:22px !important;
  min-width:0 !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-column-card > img{
  display:block !important;
  width:min(100%, 320px) !important;
  max-width:320px !important;
  height:auto !important;
  border-radius:20px !important;
  border:1px solid rgba(216,155,43,.22) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.25) !important;
  background:rgba(12,16,40,.72) !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-arrow-vertical{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:76px !important;
  height:76px !important;
  border-radius:999px !important;
  border:1px solid rgba(216,155,43,.32) !important;
  background:linear-gradient(180deg, rgba(28,36,78,.96), rgba(10,13,34,.98)) !important;
  color:#ffd266 !important;
  font-size:2.15rem !important;
  line-height:1 !important;
  box-shadow:0 16px 34px rgba(0,0,0,.24) !important;
}

@media (max-width: 760px){
  .framework-page-polish .framework-examples-refresh .framework-example-columns{
    grid-template-columns:1fr !important;
    gap:30px !important;
  }

  .framework-page-polish .framework-examples-refresh .framework-example-column-card{
    gap:18px !important;
  }
}

/* ============================================================
   V57: Source-fixed Prototype Framework Examples layout
   ============================================================ */
.framework-page-polish .framework-hero .site-title,
.framework-page-polish h1.site-title{
  color:var(--site-accent-strong, #f0c86b) !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-heading-lines,
.framework-page-polish .framework-examples-refresh .framework-example-flow-v3,
.framework-page-polish .framework-examples-refresh .framework-example-row-v3,
.framework-page-polish .framework-examples-refresh .framework-example-arrow-v3,
.framework-page-polish .framework-examples-refresh .framework-example-mapping-list,
.framework-page-polish .framework-examples-refresh .framework-example-mapping-card,
.framework-page-polish .framework-examples-refresh .framework-example-filename,
.framework-page-polish .framework-examples-refresh .framework-example-arrow-inline{
  display:none !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-two-column-map{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(300px, 360px)) !important;
  justify-content:center !important;
  align-items:start !important;
  column-gap:72px !important;
  row-gap:40px !important;
  width:100% !important;
  max-width:980px !important;
  margin:0 auto !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-map-column{
  display:grid !important;
  grid-template-columns:1fr !important;
  justify-items:center !important;
  align-items:start !important;
  gap:24px !important;
  min-width:0 !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-map-column > img{
  display:block !important;
  width:100% !important;
  max-width:360px !important;
  height:auto !important;
  border-radius:20px !important;
  border:1px solid rgba(216,155,43,.22) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.25) !important;
  background:rgba(12,16,40,.72) !important;
}

.framework-page-polish .framework-examples-refresh .framework-example-map-arrow{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:76px !important;
  height:76px !important;
  border-radius:999px !important;
  border:1px solid rgba(216,155,43,.34) !important;
  background:linear-gradient(180deg, rgba(28,36,78,.96), rgba(10,13,34,.98)) !important;
  color:#ffd266 !important;
  font-size:2.2rem !important;
  line-height:1 !important;
  box-shadow:0 16px 34px rgba(0,0,0,.24) !important;
}

@media (max-width: 860px){
  .framework-page-polish .framework-examples-refresh .framework-example-two-column-map{
    grid-template-columns:1fr !important;
    max-width:380px !important;
    column-gap:0 !important;
  }
}


/* ============================================================
   V59 ACTUAL FINAL FIX
   - brand color
   - no button bounce, darken instead
   - remove non-clickable pill hover behavior
   - no post-v50 portfolio card overrides
   ============================================================ */

/* Brand/name in the top nav. */
.site-header .contact .brand,
.site-header .contact .brand:link,
.site-header .contact .brand:visited,
.site-header .contact .brand:hover,
.site-header .brand,
.site-header .brand:link,
.site-header .brand:visited,
.site-header .brand:hover,
.contact .brand,
.contact .brand:link,
.contact .brand:visited,
.contact .brand:hover{
  color:var(--site-accent-strong, #f0c86b) !important;
  text-decoration:none !important;
}

/* Buttons: darken on hover, never bounce/lift/slide. */
.button:hover,
.button:focus,
.proto2-button:hover,
.proto2-button:focus,
.project-button:hover,
.project-button:focus,
.case-button:hover,
.case-button:focus,
.project-detail-button:hover,
.project-detail-button:focus,
.site-button:hover,
.site-button:focus,
.site-button.button:hover,
.site-button.button:focus,
.site-button.proto2-button:hover,
.site-button.proto2-button:focus,
.btn:hover,
.btn:focus,
.play-button:hover,
.play-button:focus,
.game-history-open:hover,
.game-history-open:focus,
.hero-cta:hover,
.hero-cta:focus,
.cta-button:hover,
.cta-button:focus,
button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus{
  transform:none !important;
  translate:none !important;
  top:auto !important;
  bottom:auto !important;
  filter:brightness(.86) saturate(.98) !important;
}

/* Make sure active states do not create a press/bounce motion either. */
.button:active,
.proto2-button:active,
.project-button:active,
.case-button:active,
.project-detail-button:active,
.site-button:active,
.btn:active,
.play-button:active,
.game-history-open:active,
.hero-cta:active,
.cta-button:active,
button:active{
  transform:none !important;
  translate:none !important;
  top:auto !important;
  bottom:auto !important;
}

/* Non-clickable pills/tags/chips: keep them static; no hover text/color/border changes. */
span.site-pill,
span.pill,
span.tag,
span.chip,
span.badge,
span.role-pill,
span.skill-pill,
span.tool-pill,
span.prototype-pill,
span.framework-pill,
span.meta-pill,
span.stat-pill,
span.hfx-pill{
  pointer-events:none !important;
  cursor:default !important;
}

span.site-pill:hover,
span.site-pill:focus-visible,
span.pill:hover,
span.pill:focus-visible,
span.tag:hover,
span.tag:focus-visible,
span.chip:hover,
span.chip:focus-visible,
span.badge:hover,
span.badge:focus-visible,
span.role-pill:hover,
span.role-pill:focus-visible,
span.skill-pill:hover,
span.skill-pill:focus-visible,
span.tool-pill:hover,
span.tool-pill:focus-visible,
span.prototype-pill:hover,
span.prototype-pill:focus-visible,
span.framework-pill:hover,
span.framework-pill:focus-visible,
span.meta-pill:hover,
span.meta-pill:focus-visible,
span.stat-pill:hover,
span.stat-pill:focus-visible,
span.hfx-pill:hover,
span.hfx-pill:focus-visible,
.experience-tags.site-pill-list > span.site-pill:hover,
.company-tags.site-pill-list > span.site-pill:hover,
.tags.site-pill-list > span.site-pill:hover,
.pills.site-pill-list > span.site-pill:hover,
.chips.site-pill-list > span.site-pill:hover,
.skills.site-pill-list > span.site-pill:hover,
.hfx-home span.site-pill.hfx-pill:hover{
  background:var(--site-pill-tag-bg) !important;
  border-color:var(--site-pill-tag-border) !important;
  color:var(--site-pill-tag-text) !important;
  box-shadow:none !important;
  text-shadow:none !important;
  transform:none !important;
  translate:none !important;
  filter:none !important;
  text-decoration:none !important;
  cursor:default !important;
}

/* Defensive portfolio reset: v50 page structure should not be forced into equal cards or clamped text. */
main.portfolio-projects-page .studio-experience{
  display:block !important;
  grid-template-columns:none !important;
  gap:initial !important;
  align-items:initial !important;
}

main.portfolio-projects-page .studio-experience > .portfolio-detail-card{
  height:auto !important;
  min-height:0 !important;
  display:block !important;
  flex-direction:initial !important;
}

main.portfolio-projects-page .portfolio-detail-card h3,
main.portfolio-projects-page .portfolio-detail-copy{
  min-height:0 !important;
}

main.portfolio-projects-page .portfolio-detail-copy .experience-overview{
  display:block !important;
  -webkit-line-clamp:unset !important;
  -webkit-box-orient:unset !important;
  overflow:visible !important;
}

/* ============================================================
   V60 HEADER + PAGE NAV CONSISTENCY
   One shared header/nav pattern across all pages.
   ============================================================ */

/* Global top bar: lock typography, spacing, and sizing across pages,
   including pages with inline prototype styles. */
html body .site-header{
  position:sticky !important;
  top:0 !important;
  z-index:999 !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:20px !important;
  min-height:68px !important;
  padding:16px 28px !important;
  box-sizing:border-box !important;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  background:rgba(11,13,24,.86) !important;
  backdrop-filter:blur(10px) !important;
  border-bottom:1px solid var(--line, rgba(255,255,255,.13)) !important;
}

html body .site-header .contact{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:2px !important;
  min-width:0 !important;
  font-family:inherit !important;
}

html body .site-header .contact a{
  font-family:inherit !important;
  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:650 !important;
  letter-spacing:0 !important;
  color:var(--muted, #bcb7d0) !important;
  text-decoration:none !important;
}

html body .site-header .contact .brand,
html body .site-header .contact .brand:link,
html body .site-header .contact .brand:visited,
html body .site-header .contact .brand:hover{
  color:var(--site-accent-strong, #f0c86b) !important;
  font-size:16px !important;
  line-height:1.15 !important;
  font-weight:850 !important;
  letter-spacing:.01em !important;
  text-decoration:none !important;
}

html body .site-header .nav{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  flex-wrap:wrap !important;
  gap:18px !important;
  font-family:inherit !important;
}

html body .site-header .nav a,
html body .site-header .nav a:link,
html body .site-header .nav a:visited{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:22px !important;
  padding:0 !important;
  margin:0 !important;
  font-family:inherit !important;
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:850 !important;
  letter-spacing:0 !important;
  color:#f8f5ff !important;
  text-decoration:none !important;
}

html body .site-header .nav a:hover{
  color:var(--site-accent-strong, #f0c86b) !important;
  text-decoration:none !important;
}

html body .site-header .nav a.active{
  color:var(--site-accent-strong, #f0c86b) !important;
}

/* Local page navigation heading:
   Line 1: ← Back to [X]
   Line 2: page/webpage info */
html body main .back-home-link,
html body main .back-link{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  margin:0 0 12px !important;
  padding:0 !important;
  color:#bdd0ff !important;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size:15px !important;
  line-height:1.15 !important;
  font-weight:850 !important;
  letter-spacing:.01em !important;
  text-decoration:none !important;
  transform:none !important;
  translate:none !important;
}

html body main .back-home-link:hover,
html body main .back-link:hover{
  color:var(--site-accent-strong, #f0c86b) !important;
  text-decoration:none !important;
  transform:none !important;
  translate:none !important;
}

html body main > .eyebrow,
html body main .resume-top-bar > .eyebrow,
html body main > .breadcrumb,
html body main > .site-label{
  display:block !important;
  width:max-content !important;
  max-width:100% !important;
  margin:0 0 22px !important;
  padding:0 !important;
  background:transparent !important;
  color:#f8f6ff !important;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  font-size:13px !important;
  line-height:1.1 !important;
  font-weight:850 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
}

html body main .resume-top-bar{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
}

/* Mobile header remains consistent, just stacked more gracefully. */
@media (max-width: 680px){
  html body .site-header{
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:10px !important;
    min-height:0 !important;
    padding:14px 20px !important;
  }

  html body .site-header .nav{
    justify-content:flex-start !important;
    gap:16px !important;
  }
}

/* ============================================================
   V61 PRIVATE ROLE PAGE SYSTEM
   Shared hidden-company page framework for Zynga, First Fun, and future interview pages.
   ============================================================ */

.private-role-page{
  max-width:1180px !important;
  margin:0 auto !important;
  padding:38px 22px 72px !important;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  color:var(--ink, #f8f5ff) !important;
}

.private-role-page .site-title{
  color:var(--site-accent-strong, #f0c86b) !important;
  font-size:clamp(34px, 5vw, 58px) !important;
  line-height:1.02 !important;
  letter-spacing:-.035em !important;
  margin:0 0 16px !important;
}

.private-role-page .private-role-lede,
.private-role-page > .site-copy{
  max-width:760px !important;
  color:var(--muted, #bcb7d0) !important;
  font-size:17px !important;
  line-height:1.7 !important;
  margin:0 0 24px !important;
}

.private-role-gate,
.private-role-page .private-gate-card{
  max-width:620px !important;
  margin-top:24px !important;
}

.private-role-page .private-gate-card h2,
.private-role-page .private-role-project-panel h2{
  color:var(--site-accent-strong, #f0c86b) !important;
}

.private-role-page .private-gate-form{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  align-items:center !important;
  margin-top:18px !important;
}

.private-role-page .private-gate-input{
  flex:1 1 260px !important;
  min-height:46px !important;
  padding:0 14px !important;
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.06) !important;
  color:#f8f5ff !important;
  font:inherit !important;
}

.private-role-page .private-gate-error{
  display:none;
  color:#ff9aa8 !important;
  font-weight:800 !important;
  margin:14px 0 0 !important;
}

.private-role-content{
  margin-top:28px !important;
}

.private-role-project-panel{
  padding:28px !important;
  border-radius:28px !important;
}

.private-role-project-header{
  display:grid !important;
  gap:18px !important;
  margin-bottom:24px !important;
}

.private-role-project-title-row{
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:20px !important;
  flex-wrap:wrap !important;
}

.private-role-project-title-row h2{
  font-size:clamp(28px, 3.4vw, 42px) !important;
  line-height:1.05 !important;
  margin:4px 0 0 !important;
}

.private-role-action-row{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
  gap:12px !important;
}

.private-role-grid{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:16px !important;
  margin-top:22px !important;
}

.private-role-info-card{
  padding:20px !important;
  border-radius:22px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.045) !important;
}

.private-role-info-card h3{
  margin:0 0 8px !important;
  color:#f8f5ff !important;
  font-size:17px !important;
}

.private-role-info-card p{
  margin:0 0 14px !important;
  color:var(--muted, #bcb7d0) !important;
  line-height:1.6 !important;
}

.private-role-inline-link{
  color:var(--site-accent-strong, #f0c86b) !important;
  font-weight:850 !important;
  text-decoration:none !important;
}

.private-role-inline-link:hover{
  color:#ffd983 !important;
  text-decoration:none !important;
}

@media (max-width: 860px){
  .private-role-grid{
    grid-template-columns:1fr !important;
  }

  .private-role-action-row{
    justify-content:flex-start !important;
  }
}

/* ============================================================
   V62 FIRST FUN / ZYNGA PARITY
   Keeps hidden interview pages visually aligned.
   ============================================================ */

.private-role-page .private-role-status-title,
.private-role-page .zynga-page-status-title{
  color:var(--site-accent-strong, #f0c86b) !important;
  font-size:clamp(20px, 2.2vw, 28px) !important;
  line-height:1.15 !important;
  font-weight:850 !important;
  letter-spacing:.01em !important;
  margin:0 0 24px !important;
}

.private-role-project-body,
.zynga-project-body{
  display:grid !important;
  grid-template-columns:minmax(0, .95fr) minmax(300px, .75fr) !important;
  align-items:stretch !important;
  gap:24px !important;
}

.private-role-project-copy,
.zynga-project-copy{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  min-width:0 !important;
}

.private-role-project-copy h3,
.zynga-project-copy h3{
  color:#f8f5ff !important;
  font-size:20px !important;
  line-height:1.2 !important;
  margin:0 0 10px !important;
}

.private-role-project-copy p,
.zynga-project-copy p{
  color:var(--muted, #bcb7d0) !important;
  font-size:16px !important;
  line-height:1.65 !important;
  margin:0 0 16px !important;
}

.private-role-project-image,
.zynga-project-image{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  min-width:0 !important;
  border-radius:24px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.12) !important;
}

.first-fun-splash-frame{
  min-height:430px !important;
  max-height:520px !important;
}

.first-fun-splash-frame img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-height:520px !important;
  object-fit:cover !important;
  object-position:center center !important;
}

.first-fun-link-grid.private-role-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  margin-top:auto !important;
}

.first-fun-project-panel .private-role-project-header{
  margin-bottom:24px !important;
}

.first-fun-project-panel .site-label,
.zynga-project-panel .site-label{
  color:#f8f6ff !important;
}

@media (max-width: 900px){
  .private-role-project-body,
  .zynga-project-body{
    grid-template-columns:1fr !important;
  }

  .first-fun-splash-frame{
    min-height:0 !important;
    max-height:none !important;
  }

  .first-fun-splash-frame img{
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
  }

  .first-fun-link-grid.private-role-grid{
    grid-template-columns:1fr !important;
  }
}





/* ============================================================
   V79 PRIVATE BUTTONS + IMAGE HEIGHT SYNC
   Shared private-page standard:
   - nicer project action buttons
   - buttons horizontally/vertically aligned with project title
   - image frame syncs to left stack height via lightweight JS
   - image width comes from the actual image ratio
   ============================================================ */

/* Private pages use the regular back-link + eyebrow pattern.
   No separate giant page title; company context lives in the eyebrow. */
.private-role-page .back-home-link{
  margin:0 0 10px !important;
}

.private-role-page .private-interview-eyebrow,
.private-role-page .eyebrow{
  display:block !important;
  width:max-content !important;
  margin:0 0 22px !important;
  padding:0 !important;
  background:transparent !important;
  color:#f2efff !important;
  font-size:13px !important;
  line-height:1.1 !important;
  font-weight:850 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

.private-role-page > .site-title,
.private-role-page .private-role-status-title,
.private-role-page .zynga-page-status-title{
  display:none !important;
}

/* Main private project container: wraps the actual content. */
.private-role-project-panel,
.first-fun-project-panel,
.zynga-project-panel{
  width:fit-content !important;
  max-width:100% !important;
  padding:24px !important;
  border-radius:28px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(31,36,64,.98) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.26) !important;
}

/* Prototype-style divider line. */
.private-role-project-panel .zynga-project-header,
.first-fun-project-panel .zynga-project-header,
.zynga-project-panel .zynga-project-header{
  padding-bottom:22px !important;
  margin-bottom:24px !important;
  border-bottom:1px solid rgba(255,255,255,.20) !important;
}

/* Project title and buttons align on one visual baseline/centerline. */
.private-role-project-panel .zynga-project-title-row,
.first-fun-project-panel .zynga-project-title-row,
.zynga-project-panel .zynga-project-title-row{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:16px !important;
  flex-wrap:wrap !important;
}

.private-role-project-panel .zynga-project-title-row > h2,
.first-fun-project-panel .zynga-project-title-row > h2,
.zynga-project-panel .zynga-project-title-row > h2{
  color:var(--site-accent-strong, #f0c86b) !important;
  font-size:clamp(26px, 2.8vw, 38px) !important;
  line-height:1 !important;
  letter-spacing:-.035em !important;
  font-weight:850 !important;
  margin:0 !important;
  flex:0 0 auto !important;
}

/* Main private content grid.
   Right column is max-content; the JS sets exact image-frame width/height. */
.first-fun-project-body.zynga-project-body,
.zynga-private-project-body.zynga-project-body{
  display:grid !important;
  grid-template-columns:minmax(360px, 560px) max-content !important;
  gap:24px !important;
  align-items:start !important;
  width:max-content !important;
  max-width:100% !important;
}

/* Left card stack. */
.first-fun-section-stack,
.zynga-section-stack{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
  align-content:start !important;
  width:100% !important;
}

/* Left work cards use prototype-card border rhythm. */
.private-role-work-card,
.first-fun-work-card,
.zynga-work-card{
  background:rgba(31,36,69,.92) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:22px !important;
  padding:18px 20px 16px !important;
  box-shadow:none !important;
}

.private-role-work-card h3,
.first-fun-work-card h3,
.zynga-work-card h3{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  color:#f8f5ff !important;
  font-size:clamp(18px, 1.7vw, 22px) !important;
  line-height:1.12 !important;
  letter-spacing:-.01em !important;
  font-weight:850 !important;
  margin:0 0 10px !important;
}

.private-work-card-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:20px !important;
  height:20px !important;
  color:var(--hfx-accent-strong, var(--site-accent-strong, #f0c86b)) !important;
  line-height:1 !important;
  flex:0 0 auto !important;
}

.private-work-card-icon svg{
  display:block !important;
  width:20px !important;
  height:20px !important;
  fill:none !important;
  stroke:currentColor !important;
}

.private-work-status-row{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  margin:0 0 10px !important;
}

.private-work-status-label{
  color:rgba(248,245,255,.82) !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:800 !important;
}

/* Small metadata pill, not a button. */
.private-work-status-row .zynga-status-pill,
.private-role-work-card .zynga-status-pill,
.first-fun-work-card .zynga-status-pill,
.zynga-work-card .zynga-status-pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-height:18px !important;
  height:18px !important;
  padding:0 7px !important;
  border-radius:999px !important;
  font-size:8.5px !important;
  line-height:18px !important;
  letter-spacing:.075em !important;
  font-weight:850 !important;
  text-transform:uppercase !important;
  background:rgba(255,123,42,.22) !important;
  color:#ffb37a !important;
  border:1px solid rgba(255,123,42,.42) !important;
  box-shadow:none !important;
  text-shadow:none !important;
  cursor:default !important;
  pointer-events:none !important;
  transform:none !important;
}

.private-role-work-card p,
.first-fun-work-card p,
.zynga-work-card p{
  color:#f8f5ff !important;
  margin:0 !important;
  font-size:15px !important;
  line-height:1.45 !important;
}

/* Image frame: JS sets desktop width/height so it exactly matches the left stack height
   while preserving natural image ratio. CSS handles safe defaults and mobile. */
.first-fun-splash-frame,
.zynga-splash-frame,
.private-role-project-image{
  justify-self:start !important;
  align-self:start !important;
  width:fit-content !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  min-height:0 !important;
  padding:8px !important;
  border-radius:22px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  background:rgba(31,36,69,.92) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:none !important;
}

.first-fun-splash-frame img,
.zynga-splash-frame img,
.private-role-project-image img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:420px !important;
  max-height:620px !important;
  object-fit:contain !important;
  object-position:center center !important;
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:#080a14 !important;
}

@media (max-width: 980px){
  .private-role-project-panel,
  .first-fun-project-panel,
  .zynga-project-panel{
    width:100% !important;
  }

  .first-fun-project-body.zynga-project-body,
  .zynga-private-project-body.zynga-project-body{
    grid-template-columns:1fr !important;
    gap:18px !important;
    width:100% !important;
  }

  .first-fun-splash-frame,
  .zynga-splash-frame,
  .private-role-project-image{
    justify-self:center !important;
    width:min(100%, 380px) !important;
    height:auto !important;
    max-width:380px !important;
  }

  .first-fun-splash-frame img,
  .zynga-splash-frame img,
  .private-role-project-image img{
    width:100% !important;
    height:auto !important;
    max-width:380px !important;
    max-height:none !important;
  }
}


/* ============================================================
   V81 BUTTON ICON ALIGNMENT SITEWIDE
   Consistent green CTA buttons with same-scale inline icons.
   ============================================================ */

:root{
  --site-button-green-top:#77e68f;
  --site-button-green-bottom:#32b968;
  --site-button-green-border:rgba(180,255,198,.58);
  --site-button-green-text:#07150c;
}

/* Actual CTAs/buttons across the site should feel consistent and functional. */
a.button,
button.button,
.site-button,
a.site-button,
button.site-button,
.prototype-link,
.prototype-play-link,
.resume-download-link,
.play-button,
.proto2-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.46em !important;
  min-height:42px !important;
  padding:0 18px !important;
  border-radius:999px !important;
  color:var(--site-button-green-text) !important;
  background:linear-gradient(180deg, var(--site-button-green-top) 0%, var(--site-button-green-bottom) 100%) !important;
  border:1px solid var(--site-button-green-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 10px 24px rgba(0,0,0,.22) !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:850 !important;
  letter-spacing:.01em !important;
  text-decoration:none !important;
  cursor:pointer !important;
  vertical-align:middle !important;
  transform:none !important;
  transition:filter .16s ease, transform .16s ease, box-shadow .16s ease !important;
}

/* Keep secondary CTAs green too unless a component explicitly opts out later. */
a.button.secondary,
button.button.secondary,
.site-button.secondary,
a.site-button.secondary,
button.site-button.secondary{
  color:var(--site-button-green-text) !important;
  background:linear-gradient(180deg, var(--site-button-green-top) 0%, var(--site-button-green-bottom) 100%) !important;
  border:1px solid var(--site-button-green-border) !important;
}

/* Private page actions align directly with the prototype title. */
.private-role-project-panel .zynga-action-row,
.first-fun-project-panel .zynga-action-row,
.zynga-project-panel .zynga-action-row{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin-left:0 !important;
  transform:none !important;
}

.private-role-project-panel .zynga-action-row .button,
.first-fun-project-panel .zynga-action-row .button,
.zynga-project-panel .zynga-action-row .button{
  min-height:38px !important;
  height:38px !important;
  padding:0 15px !important;
  font-size:13px !important;
}

/* Icons match text scale and are optically centered. */
.button-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:1.04em !important;
  height:1.04em !important;
  color:currentColor !important;
  flex:0 0 1.04em !important;
  line-height:1 !important;
  margin:0 !important;
  transform:translateY(.01em) !important;
}

.button-icon svg{
  display:block !important;
  width:100% !important;
  height:100% !important;
  fill:none !important;
  stroke:currentColor !important;
  overflow:visible !important;
}

a.button > span:not(.button-icon),
button.button > span:not(.button-icon),
.site-button > span:not(.button-icon),
.play-button > span:not(.button-icon),
.proto2-button > span:not(.button-icon){
  display:inline-flex !important;
  align-items:center !important;
  line-height:1 !important;
}

/* Hover should feel clickable, not bouncy. */
a.button:hover,
button.button:hover,
.site-button:hover,
.prototype-link:hover,
.prototype-play-link:hover,
.resume-download-link:hover,
.play-button:hover,
.proto2-button:hover{
  filter:brightness(1.06) !important;
  transform:translateY(-1px) !important;
  text-decoration:none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    0 12px 26px rgba(0,0,0,.26) !important;
}

a.button:focus-visible,
button.button:focus-visible,
.site-button:focus-visible,
.prototype-link:focus-visible,
.prototype-play-link:focus-visible,
.resume-download-link:focus-visible,
.play-button:focus-visible,
.proto2-button:focus-visible{
  outline:2px solid rgba(180,255,198,.92) !important;
  outline-offset:3px !important;
}



/* ============================================================
   V83 PROTOTYPE STATUS COLORS + BUTTON PARITY
   ============================================================ */

.prototype-detail-title-row{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:16px !important;
  flex-wrap:wrap !important;
  margin:0 0 16px !important;
}

.prototype-detail-title-row h1{
  margin:0 !important;
  color:var(--site-accent-strong, #f0c86b) !important;
  font-size:clamp(30px, 4vw, 52px) !important;
  line-height:1 !important;
  letter-spacing:-.035em !important;
  font-weight:900 !important;
}

.prototype-title-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}

.legacy-prototype-detail .prototype-title-actions .button,
.legacy-prototype-detail .play-button,
.legacy-prototype-detail .tuning-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.46em !important;
  min-height:38px !important;
  height:38px !important;
  padding:0 15px !important;
  border-radius:999px !important;
  color:var(--site-button-green-text, #07150c) !important;
  background:linear-gradient(180deg, var(--site-button-green-top, #77e68f) 0%, var(--site-button-green-bottom, #32b968) 100%) !important;
  border:1px solid var(--site-button-green-border, rgba(180,255,198,.58)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 10px 24px rgba(0,0,0,.22) !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:850 !important;
  letter-spacing:.01em !important;
  text-decoration:none !important;
  transform:none !important;
}

.legacy-prototype-detail .prototype-title-actions .button:hover,
.legacy-prototype-detail .play-button:hover,
.legacy-prototype-detail .tuning-button:hover{
  filter:brightness(1.06) !important;
  transform:translateY(-1px) !important;
  text-decoration:none !important;
}

.prototype-status-divider{
  height:1px !important;
  width:100% !important;
  margin:0 0 18px !important;
  background:rgba(255,255,255,.20) !important;
}

.prototype-status-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:14px !important;
}

.prototype-status-card{
  background:rgba(31,36,69,.92) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:22px !important;
  padding:18px 20px 16px !important;
}

.prototype-status-card h3{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 0 10px !important;
  color:#f8f5ff !important;
  font-size:clamp(18px, 1.7vw, 22px) !important;
  line-height:1.12 !important;
  letter-spacing:-.01em !important;
  font-weight:850 !important;
}

.prototype-status-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:20px !important;
  height:20px !important;
  color:var(--hfx-accent-strong, var(--site-accent-strong, #f0c86b)) !important;
  line-height:1 !important;
  flex:0 0 auto !important;
}

.prototype-status-icon svg{
  display:block !important;
  width:20px !important;
  height:20px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.9 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.prototype-status-row{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  margin:0 !important;
}

.prototype-status-label{
  color:rgba(248,245,255,.82) !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:800 !important;
}

.status-pill,
.zynga-status-pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:20px !important;
  height:20px !important;
  padding:0 8px !important;
  border-radius:999px !important;
  font-size:9px !important;
  line-height:20px !important;
  letter-spacing:.075em !important;
  font-weight:850 !important;
  text-transform:uppercase !important;
  box-shadow:none !important;
  text-shadow:none !important;
  cursor:default !important;
  pointer-events:none !important;
  transform:none !important;
  white-space:nowrap !important;
}

.status-pill.status-first-pass{
  color:#b9ffd0 !important;
  background:rgba(48,184,92,.22) !important;
  border:1px solid rgba(93,219,132,.46) !important;
}

.status-pill.status-rough-pass,
.zynga-status-pill.status-rough-pass{
  color:#ffe0a0 !important;
  background:rgba(229,180,54,.22) !important;
  border:1px solid rgba(233,190,78,.45) !important;
}

.status-pill.status-initial-exploration{
  color:#ffbc8c !important;
  background:rgba(255,123,42,.22) !important;
  border:1px solid rgba(255,123,42,.42) !important;
}

.status-pill.status-not-started{
  color:#d7d6e6 !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}

.zynga-status-pill.status-placeholder{
  color:#d7d6e6 !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.16) !important;
}

@media(max-width:760px){
  .prototype-status-grid{
    grid-template-columns:1fr !important;
  }

  .prototype-detail-title-row{
    align-items:flex-start !important;
    gap:12px !important;
  }
}

/* ============================================================
   V84 PROTOTYPE BUTTONS + STATUS LINE FIX
   - Potion Sort is the only prototype detail page with title CTAs.
   - Status rows keep label + pill on one line.
   - Prototype status card title shortened to "Prototype".
   ============================================================ */

/* Keep status label + pill on one clean line. */
.prototype-status-row{
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  min-width:0 !important;
}

.prototype-status-label{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

.prototype-status-row .status-pill,
.prototype-status-row .zynga-status-pill{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

/* Give the status cards enough room so longer pills do not awkwardly wrap. */
.prototype-status-grid{
  grid-template-columns:repeat(2, minmax(260px, 1fr)) !important;
}

.prototype-status-card{
  min-width:0 !important;
}

/* Potion Sort title CTAs should match the rounded private-page buttons. */
.prototype-title-actions .site-button.button,
.prototype-title-actions .play-button,
.prototype-title-actions .tuning-button{
  border-radius:999px !important;
  min-height:38px !important;
  height:38px !important;
  padding:0 15px !important;
  font-size:13px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.46em !important;
}

@media(max-width:760px){
  .prototype-status-grid{
    grid-template-columns:1fr !important;
  }
}

/* ============================================================
   V85 CLEAR CTA ICONS
   - Solid black play icon for Prototype buttons
   - Clearer document/open-arrow icon for Tuning Sheet buttons
   ============================================================ */

.button-icon-play-solid svg{
  fill:currentColor !important;
  stroke:none !important;
}

.button-icon-play-solid{
  width:1em !important;
  height:1em !important;
  flex-basis:1em !important;
  transform:translateY(.005em) !important;
}

.button-icon-sheet-open{
  width:1.16em !important;
  height:1.16em !important;
  flex-basis:1.16em !important;
  transform:translateY(.005em) !important;
}

.button-icon-sheet-open svg{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.9 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}


/* ============================================================
   V87 PROTOTYPE LAYOUT CONSISTENCY
   One shared prototype-detail layout:
   - no button bounce anywhere
   - Potion Sort title buttons align with title
   - divider matches prototype-home card divider treatment
   - right image column is constrained and padded consistently
   - left copy/status card cannot be clipped by the image column
   ============================================================ */

/* Hard rule: buttons do not move. Hover can brighten only. */
a.button,
button.button,
.site-button,
a.site-button,
button.site-button,
.prototype-link,
.prototype-play-link,
.resume-download-link,
.play-button,
.proto2-button,
.tuning-button,
.prototype-title-actions .button,
.zynga-action-row .button{
  transform:none !important;
  transition:filter .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease !important;
}

a.button:hover,
button.button:hover,
.site-button:hover,
a.site-button:hover,
button.site-button:hover,
.prototype-link:hover,
.prototype-play-link:hover,
.resume-download-link:hover,
.play-button:hover,
.proto2-button:hover,
.tuning-button:hover,
.prototype-title-actions .button:hover,
.zynga-action-row .button:hover,
.legacy-prototype-detail .prototype-title-actions .button:hover,
.legacy-prototype-detail .play-button:hover,
.legacy-prototype-detail .tuning-button:hover,
.private-role-project-panel .zynga-action-row .button:hover,
.first-fun-project-panel .zynga-action-row .button:hover,
.zynga-project-panel .zynga-action-row .button:hover{
  transform:none !important;
  text-decoration:none !important;
  filter:brightness(1.05) !important;
}

/* Legacy prototype detail pages: stable two-column grid.
   Left column gets the available space. Right column is fixed/constrained.
   This prevents the image from pushing/cutting off the left card. */
.legacy-prototype-detail .hero{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) clamp(220px, 26vw, 320px) !important;
  gap:24px !important;
  align-items:start !important;
  overflow:visible !important;
}

.legacy-prototype-detail .hero > .card,
.legacy-prototype-detail .prototype-hero-copy-card{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* Word Pick uses a different hero class; apply the same layout rules. */
.prototype-detail-page .prototype-hero-card{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) clamp(220px, 26vw, 320px) !important;
  gap:24px !important;
  align-items:start !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
}

/* Prototype title + actions: same horizontal centerline. */
.legacy-prototype-detail .prototype-detail-title-row,
.prototype-detail-page .prototype-detail-title-row{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:16px !important;
  flex-wrap:wrap !important;
  margin:0 0 22px !important;
}

.legacy-prototype-detail .prototype-detail-title-row h1,
.prototype-detail-page .prototype-detail-title-row h1{
  margin:0 !important;
  line-height:1 !important;
  flex:0 0 auto !important;
}

.legacy-prototype-detail .prototype-title-actions,
.prototype-detail-page .prototype-title-actions{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  margin:0 !important;
  transform:none !important;
}

/* Match the private-page rounded green CTA shape exactly for prototype title actions. */
.legacy-prototype-detail .prototype-title-actions .button,
.prototype-detail-page .prototype-title-actions .button,
.legacy-prototype-detail .play-button,
.legacy-prototype-detail .tuning-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.46em !important;
  min-height:38px !important;
  height:38px !important;
  padding:0 15px !important;
  border-radius:999px !important;
  color:var(--site-button-green-text, #07150c) !important;
  background:linear-gradient(180deg, var(--site-button-green-top, #77e68f) 0%, var(--site-button-green-bottom, #32b968) 100%) !important;
  border:1px solid var(--site-button-green-border, rgba(180,255,198,.58)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), 0 10px 24px rgba(0,0,0,.22) !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:850 !important;
  letter-spacing:.01em !important;
  text-decoration:none !important;
  transform:none !important;
}

/* The prototype-detail divider should be the same line as the prototype-home card divider:
   this is the line before the status card grid. */
.prototype-status-divider{
  display:block !important;
  width:100% !important;
  height:1px !important;
  margin:0 0 18px !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-top:1px solid rgba(255,255,255,.20) !important;
}

/* Right image card: consistent padding/spacing, smaller footprint, no UI notes. */
.legacy-prototype-detail .imageCard{
  width:100% !important;
  max-width:320px !important;
  padding:12px !important;
  height:auto !important;
  min-height:0 !important;
  align-self:start !important;
  justify-self:start !important;
  box-sizing:border-box !important;
}

.legacy-prototype-detail .imageFrame{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  overflow:visible !important;
}

.legacy-prototype-detail .imageFrame img{
  display:block !important;
  width:100% !important;
  max-width:296px !important;
  height:auto !important;
  max-height:430px !important;
  object-fit:contain !important;
}

.legacy-prototype-detail .caption,
.imageCard .caption{
  display:none !important;
}

/* Word Pick image version. */
.prototype-hero-image{
  width:100% !important;
  max-width:320px !important;
  justify-self:start !important;
  align-self:start !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  overflow:visible !important;
}

.prototype-hero-image img{
  display:block !important;
  width:100% !important;
  max-width:296px !important;
  height:auto !important;
  max-height:430px !important;
  object-fit:contain !important;
}

/* Keep status rows readable and contained. */
.prototype-status-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(240px, 1fr)) !important;
  gap:14px !important;
}

.prototype-status-card{
  min-width:0 !important;
}

.prototype-status-row{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  gap:8px !important;
}

.prototype-status-row .status-pill,
.prototype-status-label{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

@media(max-width:900px){
  .legacy-prototype-detail .hero,
  .prototype-detail-page .prototype-hero-card{
    grid-template-columns:1fr !important;
  }

  .legacy-prototype-detail .imageCard,
  .prototype-hero-image{
    max-width:360px !important;
    justify-self:center !important;
  }

  .legacy-prototype-detail .imageFrame img,
  .prototype-hero-image img{
    max-width:336px !important;
    max-height:none !important;
  }
}

@media(max-width:760px){
  .prototype-status-grid{
    grid-template-columns:1fr !important;
  }

  .legacy-prototype-detail .prototype-detail-title-row,
  .prototype-detail-page .prototype-detail-title-row{
    align-items:flex-start !important;
  }
}

/* ============================================================
   V88 UNIFIED BUTTON SYSTEM
   Final shared button rule for Noonbound:
   - same green button across private pages, prototype pages, prototype home cards, resume CTAs
   - same icon sizing/alignment
   - no hover movement ever
   ============================================================ */

:root{
  --site-button-green-top:#82e89a;
  --site-button-green-bottom:#34c76d;
  --site-button-green-border:rgba(193,255,210,.64);
  --site-button-green-text:#06140b;
}

/* One button visual language across the board. */
a.button,
button.button,
.site-button,
a.site-button,
button.site-button,
.play-button,
.tuning-button,
.proto2-button,
.prototype-link,
.prototype-play-link,
.resume-download-link,
.resume-download-card a,
.resume-pdf-card a,
.prototype-title-actions .button,
.zynga-action-row .button,
.private-role-project-panel .zynga-action-row .button,
.first-fun-project-panel .zynga-action-row .button,
.zynga-project-panel .zynga-action-row .button,
.legacy-prototype-detail .prototype-title-actions .button,
.legacy-prototype-detail .play-button,
.legacy-prototype-detail .tuning-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:.46em !important;

  min-width:0 !important;
  width:auto !important;
  min-height:38px !important;
  height:38px !important;
  padding:0 16px !important;

  border-radius:999px !important;
  border:1px solid var(--site-button-green-border) !important;
  background:linear-gradient(180deg, var(--site-button-green-top) 0%, var(--site-button-green-bottom) 100%) !important;
  color:var(--site-button-green-text) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 10px 24px rgba(0,0,0,.22) !important;

  font-size:13px !important;
  line-height:1 !important;
  font-weight:850 !important;
  letter-spacing:.01em !important;
  text-decoration:none !important;
  text-align:center !important;
  white-space:nowrap !important;
  cursor:pointer !important;

  transform:none !important;
  transition:filter .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease !important;
}

/* Secondary buttons should not diverge visually unless we intentionally create a new style later. */
a.button.secondary,
button.button.secondary,
.site-button.secondary,
a.site-button.secondary,
button.site-button.secondary{
  border:1px solid var(--site-button-green-border) !important;
  background:linear-gradient(180deg, var(--site-button-green-top) 0%, var(--site-button-green-bottom) 100%) !important;
  color:var(--site-button-green-text) !important;
}

/* Icons must align to the text, not float high/low or look oversized. */
.button-icon,
.button-icon-play-solid,
.button-icon-sheet-open{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:1.05em !important;
  height:1.05em !important;
  flex:0 0 1.05em !important;
  line-height:1 !important;
  margin:0 !important;
  color:currentColor !important;
  transform:none !important;
}

.button-icon svg,
.button-icon-play-solid svg,
.button-icon-sheet-open svg{
  display:block !important;
  width:100% !important;
  height:100% !important;
  overflow:visible !important;
}

.button-icon-play-solid svg{
  fill:currentColor !important;
  stroke:none !important;
}

.button-icon-sheet-open svg{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.9 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

/* Button text also gets a flex row so icon/text share the same centerline. */
a.button > span:not(.button-icon):not(.button-icon-play-solid):not(.button-icon-sheet-open),
.site-button > span:not(.button-icon):not(.button-icon-play-solid):not(.button-icon-sheet-open),
.play-button > span:not(.button-icon):not(.button-icon-play-solid):not(.button-icon-sheet-open),
.tuning-button > span:not(.button-icon):not(.button-icon-play-solid):not(.button-icon-sheet-open),
.proto2-button > span:not(.button-icon):not(.button-icon-play-solid):not(.button-icon-sheet-open){
  display:inline-flex !important;
  align-items:center !important;
  line-height:1 !important;
}

/* Never bounce, lift, shift, scale, or translate buttons. */
a.button:hover,
button.button:hover,
.site-button:hover,
a.site-button:hover,
button.site-button:hover,
.play-button:hover,
.tuning-button:hover,
.proto2-button:hover,
.prototype-link:hover,
.prototype-play-link:hover,
.resume-download-link:hover,
.resume-download-card a:hover,
.resume-pdf-card a:hover,
.prototype-title-actions .button:hover,
.zynga-action-row .button:hover,
.private-role-project-panel .zynga-action-row .button:hover,
.first-fun-project-panel .zynga-action-row .button:hover,
.zynga-project-panel .zynga-action-row .button:hover,
.legacy-prototype-detail .prototype-title-actions .button:hover,
.legacy-prototype-detail .play-button:hover,
.legacy-prototype-detail .tuning-button:hover{
  transform:none !important;
  filter:brightness(1.05) !important;
  text-decoration:none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    0 10px 24px rgba(0,0,0,.22) !important;
}

a.button:active,
button.button:active,
.site-button:active,
.play-button:active,
.tuning-button:active,
.proto2-button:active{
  transform:none !important;
}

/* Private and prototype title rows should use identical button alignment. */
.private-role-project-panel .zynga-action-row,
.first-fun-project-panel .zynga-action-row,
.zynga-project-panel .zynga-action-row,
.legacy-prototype-detail .prototype-title-actions,
.prototype-detail-page .prototype-title-actions{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  margin:0 !important;
  transform:none !important;
}

/* Make the prototype and private title/button rows follow the same baseline rule. */
.private-role-project-panel .zynga-project-title-row,
.first-fun-project-panel .zynga-project-title-row,
.zynga-project-panel .zynga-project-title-row,
.legacy-prototype-detail .prototype-detail-title-row,
.prototype-detail-page .prototype-detail-title-row{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:16px !important;
  flex-wrap:wrap !important;
}

/* ============================================================
   V89 PRIVATE BUTTON STYLE + TITLE ALIGNMENT
   Final correction:
   - Use the private-page CTA visual style as the unified site button style.
   - Align Potion Sort prototype title/actions on the same centerline.
   - No hover movement.
   ============================================================ */

/* Unified CTA: match the private-page button feel, not the oversized prototype-page version. */
a.button,
button.button,
.site-button,
a.site-button,
button.site-button,
.play-button,
.tuning-button,
.proto2-button,
.prototype-link,
.prototype-play-link,
.resume-download-link,
.resume-download-card a,
.resume-pdf-card a,
.prototype-title-actions .button,
.zynga-action-row .button,
.private-role-project-panel .zynga-action-row .button,
.first-fun-project-panel .zynga-action-row .button,
.zynga-project-panel .zynga-action-row .button,
.legacy-prototype-detail .prototype-title-actions .button,
.legacy-prototype-detail .play-button,
.legacy-prototype-detail .tuning-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;

  min-width:0 !important;
  width:auto !important;
  min-height:38px !important;
  height:38px !important;
  padding:0 15px !important;

  border-radius:10px !important;
  border:1px solid rgba(170,255,194,.55) !important;
  background:linear-gradient(180deg, #86e7a1 0%, #47c978 100%) !important;
  color:#07150c !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    0 8px 18px rgba(0,0,0,.18) !important;

  font-size:13px !important;
  line-height:1 !important;
  font-weight:850 !important;
  letter-spacing:.01em !important;
  text-decoration:none !important;
  text-align:center !important;
  white-space:nowrap !important;
  cursor:pointer !important;

  transform:none !important;
  transition:filter .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease !important;
}

/* Secondary buttons should not drift into a different visual language. */
a.button.secondary,
button.button.secondary,
.site-button.secondary,
a.site-button.secondary,
button.site-button.secondary{
  border:1px solid rgba(170,255,194,.55) !important;
  background:linear-gradient(180deg, #86e7a1 0%, #47c978 100%) !important;
  color:#07150c !important;
}

/* Stable icon/text alignment. */
.button-icon,
.button-icon-play-solid,
.button-icon-sheet-open{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:1.02em !important;
  height:1.02em !important;
  flex:0 0 1.02em !important;
  line-height:1 !important;
  margin:0 !important;
  color:currentColor !important;
  transform:none !important;
}

.button-icon svg,
.button-icon-play-solid svg,
.button-icon-sheet-open svg{
  display:block !important;
  width:100% !important;
  height:100% !important;
  overflow:visible !important;
}

.button-icon-play-solid svg{
  fill:currentColor !important;
  stroke:none !important;
}

.button-icon-sheet-open svg{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.9 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

a.button > span:not(.button-icon):not(.button-icon-play-solid):not(.button-icon-sheet-open),
.site-button > span:not(.button-icon):not(.button-icon-play-solid):not(.button-icon-sheet-open),
.play-button > span:not(.button-icon):not(.button-icon-play-solid):not(.button-icon-sheet-open),
.tuning-button > span:not(.button-icon):not(.button-icon-play-solid):not(.button-icon-sheet-open),
.proto2-button > span:not(.button-icon):not(.button-icon-play-solid):not(.button-icon-sheet-open){
  display:inline-flex !important;
  align-items:center !important;
  line-height:1 !important;
}

/* No bounce/lift. Ever. */
a.button:hover,
button.button:hover,
.site-button:hover,
a.site-button:hover,
button.site-button:hover,
.play-button:hover,
.tuning-button:hover,
.proto2-button:hover,
.prototype-link:hover,
.prototype-play-link:hover,
.resume-download-link:hover,
.resume-download-card a:hover,
.resume-pdf-card a:hover,
.prototype-title-actions .button:hover,
.zynga-action-row .button:hover,
.private-role-project-panel .zynga-action-row .button:hover,
.first-fun-project-panel .zynga-action-row .button:hover,
.zynga-project-panel .zynga-action-row .button:hover,
.legacy-prototype-detail .prototype-title-actions .button:hover,
.legacy-prototype-detail .play-button:hover,
.legacy-prototype-detail .tuning-button:hover,
a.button:active,
button.button:active,
.site-button:active,
.play-button:active,
.tuning-button:active,
.proto2-button:active{
  transform:none !important;
  text-decoration:none !important;
  filter:brightness(1.045) !important;
}

/* Title/action row: use grid so the button group is centered to the visual height of the title. */
.legacy-prototype-detail .prototype-detail-title-row{
  display:grid !important;
  grid-template-columns:max-content max-content !important;
  align-items:center !important;
  justify-content:start !important;
  column-gap:18px !important;
  row-gap:12px !important;
  margin:0 0 22px !important;
}

.legacy-prototype-detail .prototype-detail-title-row h1{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  line-height:.92 !important;
  align-self:center !important;
}

.legacy-prototype-detail .prototype-title-actions{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  flex-wrap:nowrap !important;
  margin:0 !important;
  padding:0 !important;
  align-self:center !important;
  transform:none !important;
}

/* Private pages follow the same CTA alignment while keeping their existing title row. */
.private-role-project-panel .zynga-project-title-row,
.first-fun-project-panel .zynga-project-title-row,
.zynga-project-panel .zynga-project-title-row{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:16px !important;
  flex-wrap:wrap !important;
}

.private-role-project-panel .zynga-action-row,
.first-fun-project-panel .zynga-action-row,
.zynga-project-panel .zynga-action-row{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 !important;
  transform:none !important;
}

@media(max-width:760px){
  .legacy-prototype-detail .prototype-detail-title-row{
    grid-template-columns:1fr !important;
  }

  .legacy-prototype-detail .prototype-title-actions{
    flex-wrap:wrap !important;
  }
}

/* ============================================================
   V90 POTION SORT TITLE BUTTON FIX
   Fixes the actual Potion Sort row instead of broad guessing:
   title + CTA group align as one row; buttons cannot stretch.
   ============================================================ */

/* Potion Sort title row: one real flex row, center-aligned. */
.legacy-prototype-detail .potion-sort-title-row{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:22px !important;
  flex-wrap:wrap !important;
  margin:0 0 22px !important;
  padding:0 !important;
}

.legacy-prototype-detail .potion-sort-title-row h1{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
  flex:0 0 auto !important;
  align-self:center !important;
}

/* CTA group sits on the same centerline as the title. */
.legacy-prototype-detail .potion-sort-title-actions{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  flex:0 0 auto !important;
  margin:0 !important;
  padding:0 !important;
  align-self:center !important;
  transform:none !important;
}

/* Hard final sizing for Potion Sort title buttons. */
.legacy-prototype-detail .potion-sort-title-actions .button,
.legacy-prototype-detail .potion-sort-title-actions .site-button,
.legacy-prototype-detail .potion-sort-title-actions .play-button,
.legacy-prototype-detail .potion-sort-title-actions .tuning-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:38px !important;
  height:38px !important;
  padding:0 15px !important;
  border-radius:10px !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:850 !important;
  margin:0 !important;
  align-self:center !important;
  transform:none !important;
}

/* Kill any inherited oversized proto2/play styling for this row. */
.legacy-prototype-detail .potion-sort-title-actions .play-button,
.legacy-prototype-detail .potion-sort-title-actions .tuning-button{
  background:linear-gradient(180deg, #86e7a1 0%, #47c978 100%) !important;
  border:1px solid rgba(170,255,194,.55) !important;
  color:#07150c !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.36), 0 8px 18px rgba(0,0,0,.18) !important;
}

/* No movement. */
.legacy-prototype-detail .potion-sort-title-actions .button:hover,
.legacy-prototype-detail .potion-sort-title-actions .site-button:hover,
.legacy-prototype-detail .potion-sort-title-actions .play-button:hover,
.legacy-prototype-detail .potion-sort-title-actions .tuning-button:hover{
  transform:none !important;
  filter:brightness(1.045) !important;
  text-decoration:none !important;
}

@media(max-width:760px){
  .legacy-prototype-detail .potion-sort-title-row{
    align-items:flex-start !important;
    gap:14px !important;
  }

  .legacy-prototype-detail .potion-sort-title-actions{
    flex-wrap:wrap !important;
  }
}

/* ============================================================
   V92 GRID ARROW TUNING ICON
   Tuning Sheet button icon: spreadsheet/grid + external arrow.
   ============================================================ */

.button-icon-sheet-open{
  width:1.22em !important;
  height:1.22em !important;
  flex-basis:1.22em !important;
}

.button-icon-sheet-open svg{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.9 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

/* ============================================================
   V97 ZYNGA TWO PROTOTYPES
   Supports multiple private interview projects on one company page.
   ============================================================ */

.private-role-project-divider{
  width:100% !important;
  height:1px !important;
  margin:34px 0 !important;
  background:rgba(255,255,255,.22) !important;
}

.private-role-project-panel-no-image .private-role-project-body,
.zynga-private-project-body-no-image{
  display:block !important;
}

.private-role-project-panel-no-image .private-role-project-copy{
  width:100% !important;
  max-width:none !important;
}

.private-role-project-panel-no-image{
  margin-bottom:0 !important;
}

/* ============================================================
   V99 ZYNGA TEXT/IMAGE BALANCE
   Wider left text area on the Zynga private page so card text
   wraps less and the synced right image height lands closer to
   the left content height.
   ============================================================ */

/* Zynga has two project cards now; give the text column more room. */
body:has(.private-interview-eyebrow) .zynga-private-project-body.zynga-project-body{
  grid-template-columns:minmax(680px, 1fr) max-content !important;
  column-gap:22px !important;
  align-items:start !important;
}

/* Keep the right image column present but slightly less dominant. */
body:has(.private-interview-eyebrow) .zynga-splash-frame.private-role-project-image{
  padding:8px !important;
  justify-self:start !important;
}

/* Let the copy column use the available room instead of acting narrow. */
body:has(.private-interview-eyebrow) .zynga-section-stack.private-role-project-copy,
body:has(.private-interview-eyebrow) .zynga-project-copy.private-role-project-copy{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
}

/* A little less vertical bulk in Zynga cards helps the left stack match the image more cleanly. */
body:has(.private-interview-eyebrow) .zynga-work-card.private-role-work-card{
  padding:18px 20px !important;
}

body:has(.private-interview-eyebrow) .zynga-work-card.private-role-work-card p{
  max-width:none !important;
}

/* Keep status lines and shorter project text on one line when there is room. */
body:has(.private-interview-eyebrow) .private-work-status-row{
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
}

/* Desktop image-sync still controls exact image dimensions, but these caps keep the image from dominating. */
body:has(.private-interview-eyebrow) .zynga-splash-frame img{
  max-width:390px !important;
  max-height:580px !important;
}

@media(max-width:1180px){
  body:has(.private-interview-eyebrow) .zynga-private-project-body.zynga-project-body{
    grid-template-columns:minmax(560px, 1fr) max-content !important;
    column-gap:18px !important;
  }

  body:has(.private-interview-eyebrow) .zynga-splash-frame img{
    max-width:340px !important;
  }
}

@media(max-width:980px){
  body:has(.private-interview-eyebrow) .zynga-private-project-body.zynga-project-body{
    grid-template-columns:1fr !important;
  }

  body:has(.private-interview-eyebrow) .zynga-splash-frame.private-role-project-image{
    justify-self:center !important;
  }
}