/* ===== portfolio patch: 2-column flow ===== */

:root{
  --portfolio-max: 1180px;
}

.wrap{
  position: relative;
  z-index: 2;
}

.portfolioHero{
  margin: 10px auto 24px;
}

.portfolioHero__inner{
  max-width: var(--portfolio-max);
  margin: 0 auto;
  padding: 28px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(700px 320px at 8% 10%, rgba(110,231,255,.10), transparent 60%),
    radial-gradient(520px 240px at 88% 0%, rgba(167,139,250,.12), transparent 58%),
    linear-gradient(180deg, rgba(15,22,48,.86), rgba(11,18,40,.76));
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
}

.portfolioHero__eyebrow{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: #dbe6ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.portfolioHero__title{
  margin: 14px 0 12px;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--text);
}

.portfolioHero__sub{
  max-width: 860px;
  margin: 0;
  color: #d6e3ff;
  font-size: 16px;
  line-height: 1.7;
}

.portfolioHero__pills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}

.portfolioPill{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:var(--text);
  font-size:13px;
  font-weight:700;
}

/* main 2-column flow */
.layout{
  display:grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 22px;
  align-items: start;
}

/* flatten left wrapper so its children become grid items */
.colLeft{
  display: contents;
}

/* place the four main modules */
.panel--recommend{
  grid-column: 1;
  grid-row: 1;
}

.builder.panel{
  grid-column: 2;
  grid-row: 1;
}

.panel--single-eval{
  grid-column: 1;
  grid-row: 2;
}

#slipWorkshopSection{
  grid-column: 2;
  grid-row: 2;
}

/* clean card styling */
.panel,
.card{
  border-radius: 20px;
}

.panelTitle,
.cardTitle{
  letter-spacing: .1px;
  font-size: 15px;
  font-weight: 800;
}

.panelSub,
.miniText,
.field span{
  color:#b8c7e8;
}

.panel--recommend{
  border:1px solid rgba(110,231,255,.14) !important;
  box-shadow:
    0 16px 34px rgba(0,0,0,.26),
    0 0 0 1px rgba(110,231,255,.04) inset;
}

.builder.panel{
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 38px rgba(0,0,0,.28);
}

.panel--single-eval{
  border:1px solid rgba(167,139,250,.20) !important;
  background:
    linear-gradient(180deg, rgba(14,20,44,.96), rgba(10,15,34,.90)) !important;
  box-shadow:
    0 18px 38px rgba(0,0,0,.30),
    0 0 0 1px rgba(167,139,250,.05) inset;
}

#slipWorkshopSection{
  border:1px solid rgba(255,255,255,.12) !important;
  background:
    linear-gradient(180deg, rgba(13,20,42,.92), rgba(9,15,32,.86)) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.30);
}

/* step labels */
.workflowStepLabel{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  margin-bottom:10px;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:#d7e4ff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* remove any old sticker-style step decorations */
.workflowStep::before{
  display:none !important;
  content:none !important;
}

/* tracker full-width */
#trackerCard{
  max-width: 1180px;
  margin: 24px auto 0 !important;
}

/* mobile / tablet fallback */
@media (max-width: 1100px){
  .layout{
    grid-template-columns: 1fr;
  }

  .colLeft{
    display: block;
  }

  .panel--recommend,
  .builder.panel,
  .panel--single-eval,
  #slipWorkshopSection{
    grid-column: auto;
    grid-row: auto;
    margin-top: 18px !important;
  }

  .panel--recommend{
    margin-top: 0 !important;
  }
}

@media (max-width: 720px){
  .portfolioHero__inner{
    padding:22px 18px;
    border-radius:20px;
  }

  .portfolioHero__title{
    font-size:clamp(32px, 9vw, 46px);
  }

  .portfolioHero__sub{
    font-size:15px;
  }
}
/* ===== end 2-column flow ===== */

/* ===== audit pair layout ===== */
.auditPairGrid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap:22px;
  align-items:start;
  max-width:1180px;
  margin:24px auto 0;
}

.auditPairGrid > .auditPairCard{
  margin-top:0 !important;
  min-width:0;
}

@media (max-width: 1100px){
  .auditPairGrid{
    grid-template-columns: 1fr;
    gap:18px;
  }
}
/* ===== end audit pair layout ===== */


/* ===== tracker audit split ===== */
.auditSplitGrid{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  gap:22px;
  align-items:start;
  margin-top:14px;
}

.auditSplitCard{
  min-width:0;
}

@media (max-width: 1100px){
  .auditSplitGrid{
    grid-template-columns:1fr;
  }
}
/* ===== end tracker audit split ===== */


/* ===== audit DOM split ===== */
.auditSplitGrid{
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  gap:22px;
  align-items:start;
  margin-top:14px;
}

.auditSplitGrid > .auditSplitCard{
  min-width:0;
  margin-top:0 !important;
}

@media (max-width: 1100px){
  .auditSplitGrid{
    grid-template-columns:1fr;
    gap:18px;
  }
}
/* ===== end audit DOM split ===== */


/* ===== audit row move ===== */
.auditRowShell{
  max-width:1180px;
  margin:24px auto 0;
}

.auditRowShell .auditSplitGrid{
  margin-top:0 !important;
}

#swAuditMount{
  margin-top:0 !important;
}
/* ===== end audit row move ===== */


/* ===== 3-card audit layout ===== */
.auditTriGrid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  grid-template-areas:
    "summary markets"
    "summary model";
  gap:22px;
  align-items:start;
  margin-top:14px;
}

.auditTriCard{ min-width:0; margin-top:0 !important; }
.auditTriCard--summary{ grid-area:summary; }
.auditTriCard--markets{ grid-area:markets; }
.auditTriCard--model{ grid-area:model; }

@media (max-width: 1100px){
  .auditTriGrid{
    grid-template-columns:1fr;
    grid-template-areas:
      "summary"
      "markets"
      "model";
    gap:18px;
  }
}
/* ===== end 3-card audit layout ===== */


/* ===== 3-card audit layout ===== */
.auditTriGrid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  grid-template-areas:
    "summary markets"
    "summary model";
  gap:22px;
  align-items:start;
  margin-top:14px;
}

.auditTriCard{ min-width:0; margin-top:0 !important; }
.auditTriCard--summary{ grid-area:summary; }
.auditTriCard--markets{ grid-area:markets; }
.auditTriCard--model{ grid-area:model; }

@media (max-width: 1100px){
  .auditTriGrid{
    grid-template-columns:1fr;
    grid-template-areas:
      "summary"
      "markets"
      "model";
    gap:18px;
  }
}
/* ===== end 3-card audit layout ===== */