/* SupplierCore on top of the shared Core styles (ac-*, then cc-polish).
   Only what differs: the wordmark, a fourth family card, the pricing
   plans, the light browser frame and the clause table. */

.brand { gap: 10px; font-size: 1.15rem; letter-spacing: -.01em; }
.brand img { width: 30px; height: auto; }
.brand .a, .wordmark { color: #3B8BF0; }
.brand .c, .wordmark span { color: #4FB35B; }
.site-nav .nav-signin { color: var(--ac-text); }
.site-header .wrap > .btn-primary.desk { padding: 9px 16px; font-size: .9rem; }
@media (max-width: 700px) { .site-header .wrap > .btn-primary.desk { display: none; } }
@media (min-width: 701px) { .site-header .wrap { flex-wrap: nowrap; } .site-nav { margin-left: auto; } }


/* the app's light theme sits in a neutral frame, not ComplaintCore's cream */
.browser { background: #fff; }
.browser-bar { background: #EEF1F5; border-bottom-color: #DDE2E9; }
.browser-bar i { background: #C9D0DA; }
.browser-bar span { color: #5D6878; background: #fff; }
.ai-card-head.amber { color: var(--ac-warning-text); }

/* screenshots: always their own shape */
figure.shot img, .browser img { width: 100%; height: auto; }
figure.shot.light { background: linear-gradient(180deg, #F3F5F8, #E9EDF2); border-color: rgba(255,255,255,.1); }

/* five products: four cards in a row, then the standalone one */
.family-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.family-single { display: flex; gap: 20px; align-items: center; margin-top: 20px; padding: 22px 26px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, #161D28, #121821); box-shadow: var(--cc-lift); }
.family-single .family-icon { margin: 0; flex: none; }
.family-single h3 { margin: 0 0 4px; font-size: 1.1rem; }
.family-single p { margin: 0; color: var(--ac-text-secondary); }
.family-single a { margin-left: auto; white-space: nowrap; font-weight: 600; text-decoration: none; }
.family-foot { text-align: center; margin: 22px 0 0; }
@media (max-width: 1000px) { .family-grid.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .family-grid.four { grid-template-columns: 1fr; }
  .family-single { flex-direction: column; text-align: center; }
  .family-single a { margin: 0; }
}

/* before and after: a folder of files, then one network */
.ba-before ul { list-style: none; margin: 0; padding: 0; font: 12.5px/1.35 "Courier New", monospace; }
.ba-before li { display: flex; gap: 8px; padding: 5px 2px; border-bottom: 1px dashed #c8cdd2; }
.ba-before li:last-child { border-bottom: 0; }
.ba-before li b { font-weight: 400; color: #8a5a00; margin-left: auto; white-space: nowrap; }
.network { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.network li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06); font-size: .9rem; color: #C9D2DE; }
.network li i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; font-style: normal; font-size: .75rem;
  font-weight: 800; color: #0D1117; background: var(--ac-success-text); }
.network li em { margin-left: auto; font-style: normal; font-size: .78rem; color: var(--ac-text-tertiary); white-space: nowrap; }
.ba-after .ba-big.ok { color: #7EE2A0; }

/* the light section's read-out: the hazards behind one decision */
.readout table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: .9rem; }
.readout td { padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.readout td:last-child { text-align: right; white-space: nowrap; }
.score { display: inline-block; min-width: 30px; padding: 1px 8px; border-radius: 6px; font-weight: 700; font-size: .8rem; text-align: center; }
.score.hi { color: #FFB4A9; background: rgba(229,83,75,.18); }
.score.md { color: #F0CF7A; background: rgba(210,153,34,.18); }
.score.lo { color: #8FE0A6; background: rgba(46,160,67,.18); }
.verdict { margin-top: 18px !important; padding: 12px 14px; border-radius: 10px; background: rgba(210,153,34,.12); border: 1px solid rgba(210,153,34,.35); color: #F3DFA8; }

/* BRCGS clauses: the shared comparison table, with the clause as the row head */
.compare.clauses tbody th { color: var(--ac-brand-text); white-space: nowrap; width: 9%; }
.compare.clauses td:last-child { color: var(--ac-text); }

/* closing call to action */
.closing-cta { text-align: center; padding: 104px 0; background: radial-gradient(60% 80% at 50% 0%, rgba(47,129,247,.16), rgba(47,129,247,0)) !important; }
.closing-cta h2 { max-width: 18em; margin: 0 auto 14px; }
.closing-cta p.lead { max-width: 36em; margin: 0 auto 26px; color: #B7C1D0; font-size: 1.1rem; }
.closing-cta .hero-pill { margin-bottom: 18px; }
.closing-cta .actions { justify-content: center; display: flex; gap: 12px; flex-wrap: wrap; }

.site-footer .legal { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.06); font-size: .85rem; color: var(--ac-text-tertiary); }

/* the screen always takes the wide column, whichever side it is on */
.zig-row.flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.hero h1 { font-size: clamp(2.1rem, 3.9vw, 3.1rem); }
.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
@media (max-width: 900px) { .zig-row.flip, .hero-grid { grid-template-columns: 1fr; } }

/* the after card: give it the wider column and keep every row inside it */
.problem-grid .before-after { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.1fr); }
.ba-after { min-width: 0; }
.ba-after .ba-big.ok { font-size: clamp(1.6rem, 2.4vw, 2.2rem); white-space: normal; overflow-wrap: anywhere; }
.network li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; row-gap: 1px; align-items: center; }
.network li i { grid-row: span 2; }
.network li em { margin: 0; white-space: normal; grid-column: 2; }
@media (max-width: 560px) { .problem-grid .before-after { grid-template-columns: 1fr; } }

/* plans: three cards, each with its own monthly and yearly checkout */
.plans { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; }
.plans .panel { margin: 0; display: flex; flex-direction: column; }
.plans .panel .eyebrow { margin: 0; }
.plan-sites { font-size: 1.15rem; font-weight: 600; color: var(--ac-text); margin: 4px 0 14px; }
.plan-buy { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; }
.plan-notes { margin-top: 40px; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }