/* Supplier landing page: the same Figtree, blue, card geometry, and section
   rhythm as landing/index.html, using the supplier portal's shared tokens. */
:root { --supplier-soft: #f8fafc; }
[data-theme="dark"] { --supplier-soft: #101a2b; }
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1rem; }
.container-narrow { max-width: 860px; }
.section { padding-block: 2.5rem; background: var(--gp-surface); }
.section-tinted { background: var(--supplier-soft); border-block: 1px solid var(--gp-border); }
.section-head { max-width: 720px; margin: 0 auto 2rem; text-align: center; }
.section-title { font-size: clamp(1.375rem, 2.5vw, 1.75rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: .5rem; }
.section-text { font-size: 1rem; line-height: 1.6; color: var(--gp-text-muted); }
.section-action { margin-top: 2rem; text-align: center; }
.btn, .icon-btn { border-radius: 8px; }
.btn { padding-inline: 1rem; }
.btn .material-symbols-outlined { font-size: 19px; flex-shrink: 0; }
.btn-primary { background: #2563eb; border-color: #2563eb; }
.btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.btn-secondary { background: var(--gp-surface); }
.btn-secondary, .icon-btn { border-color: var(--gp-border-strong); }
.btn-ghost { background: transparent; }

/* Brand and navigation match the main landing header. */
.site-header { background: var(--gp-surface); border-bottom: 1px solid var(--gp-border); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-logo { flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; }
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-name { font-size: 1.05rem; font-weight: 800; line-height: 1.1; letter-spacing: -.015em; color: var(--gp-text-main); }
.brand-sub { font-size: .75rem; font-weight: 600; color: #2563eb; }
.site-nav { display: none; align-items: center; gap: 2px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .65rem; border-radius: 6px; font-size: .875rem; font-weight: 600; color: var(--gp-text-secondary); text-align: center; }
.site-nav a:hover { color: var(--gp-primary); background: var(--gp-primary-light); text-decoration: none; }
.site-actions { display: flex; align-items: center; gap: .5rem; }
.site-actions .btn { display: none; font-size: .8125rem; }
.site-actions .menu-toggle { display: inline-flex; }
.site-actions .icon-btn { background: transparent; border-color: transparent; }
.site-menu { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; background: var(--gp-surface); border-top: 1px solid var(--gp-border); }
.site-menu > a:not(.btn) { padding: .5rem .75rem; color: var(--gp-text-secondary); font-weight: 600; border-radius: 6px; }
.site-menu > a:hover { background: var(--gp-primary-light); text-decoration: none; }
.session-note { padding-block: .75rem; background: var(--gp-primary-light); border-bottom: 1px solid var(--gp-primary-border); }
.session-note-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; }
.session-note a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* A supplier-specific split hero puts production beside the invitation. */
.hero { padding-block: 2.5rem; border-bottom: 1px solid var(--gp-border); background: var(--gp-surface); }
.hero-inner { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 2rem; }
.supplier-hero-copy { min-width: 0; }
.hero h1 { max-width: 15ch; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.14; letter-spacing: -.03em; text-wrap: balance; }
.hero h1 span { color: #2563eb; }
.hero-text { max-width: 56ch; margin: 1.25rem 0 1.5rem; font-size: 1.0625rem; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: .75rem; flex-wrap: wrap; }
.hero-actions .btn { width: 100%; }
.hero .hero-actions { justify-content: flex-start; }
.supplier-hero-marketplace { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: 1rem; font-size: .9375rem; font-weight: 600; }
.supplier-hero-marketplace .material-symbols-outlined { flex-shrink: 0; font-size: 20px; }
.supplier-hero-media { min-width: 0; overflow: hidden; border: 1px solid var(--gp-border); border-radius: 12px; background: var(--supplier-soft); }
.supplier-hero-media img { width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; }
.supplier-hero-media figcaption { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; line-height: 1.6; }
.supplier-hero-media figcaption strong { color: var(--gp-text-main); font-size: 1rem; }
.supplier-hero-media figcaption span { font-size: .9375rem; color: var(--gp-text-muted); }

/* Compact sourcing categories use the main site's directory layout. */
.supplier-category-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.supplier-category { display: flex; align-items: center; gap: .75rem; min-width: 0; padding: 1rem; border: 1px solid var(--gp-border); border-radius: 8px; background: var(--gp-surface); }
.supplier-category-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 6px; background: var(--gp-primary-light); color: #2563eb; font-size: 23px; }
.supplier-category h3 { font-size: .9375rem; font-weight: 600; line-height: 1.4; }
.supplier-category p { margin-top: .2rem; font-size: .875rem; color: var(--gp-text-muted); }

/* Photographs are supplied project assets, with no invented listing metrics. */
.supplier-example-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.supplier-example { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--gp-border); border-radius: 12px; background: var(--gp-surface); }
.supplier-example > img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #fff; }
.supplier-example-body { flex: 1; display: flex; flex-direction: column; gap: .6rem; padding: 1rem; }
.supplier-example h3 { font-size: 1rem; line-height: 1.4; }
.supplier-example-body > p { font-size: .9375rem; line-height: 1.6; }
.supplier-example-body .supplier-example-detail { margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--gp-border); font-size: .875rem; color: var(--gp-text-muted); }

.supplier-workflow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.supplier-workflow > li { min-width: 0; padding: 1.25rem; border: 1px solid var(--gp-border); border-radius: 12px; background: var(--gp-surface); }
.supplier-step-number { display: inline-flex; justify-content: center; align-items: center; min-width: 28px; min-height: 28px; padding: .25rem; border-radius: 6px; background: var(--gp-primary-light); color: #2563eb; font-size: .875rem; font-weight: 700; }
.supplier-workflow h3 { margin-block: .75rem .5rem; font-size: 1rem; line-height: 1.4; }
.supplier-workflow p { font-size: .9375rem; line-height: 1.6; }
.supplier-platform-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.supplier-platform { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; min-width: 0; padding: 1.5rem; border: 1px solid var(--gp-border); border-radius: 12px; background: var(--gp-surface); }
.supplier-platform h3 { font-size: 1.1875rem; line-height: 1.4; }
.supplier-platform p { font-size: 1rem; line-height: 1.6; }
.supplier-platform .btn { margin-top: auto; }
.supplier-checks { display: flex; flex-direction: column; gap: .75rem; margin-bottom: .5rem; font-size: .9375rem; }
.supplier-checks li { display: flex; align-items: flex-start; gap: .5rem; }
.supplier-checks .material-symbols-outlined { flex-shrink: 0; color: var(--gp-success-text); font-size: 20px; }

.faq details { padding-block: .75rem; border-bottom: 1px solid var(--gp-border); }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; color: var(--gp-text-main); font-weight: 600; line-height: 1.6; }
.faq p { margin-block: .5rem 1rem; line-height: 1.7; }
.closing { text-align: center; background: var(--gp-surface); }
.closing .section-text { max-width: 640px; margin: 0 auto 1.5rem; }

/* The dark five-column footer follows the main landing's hierarchy. */
.site-footer { padding-block: 3rem 1.5rem; background: #0f172a; color: #cbd5e1; }
.supplier-footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.supplier-footer-brand { max-width: 320px; }
.site-footer .brand-name { color: #fff; }
.site-footer .brand-sub { color: #93c5fd; }
.supplier-footer-brand p { margin-top: 1rem; font-size: .875rem; line-height: 1.6; color: #94a3b8; }
.site-footer h2 { margin-bottom: .75rem; font-size: .875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #f8fafc; }
.site-footer ul { display: flex; flex-direction: column; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; color: #cbd5e1; }
.site-footer nav a:hover { color: #fff; }
.supplier-footer-bottom { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #334155; }
.supplier-footer-bottom p { color: #94a3b8; font-size: .875rem; }
.supplier-footer-bottom nav { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }

[data-theme="dark"] .hero h1 span, [data-theme="dark"] .brand-sub,
[data-theme="dark"] .supplier-category-icon, [data-theme="dark"] .supplier-step-number { color: #93c5fd; }
[data-theme="dark"] .btn-ghost { color: var(--gp-text-secondary); }
@media (min-width: 641px) {
  .container { padding-inline: 1.25rem; }
  .section { padding-block: 3rem; }
  .hero-actions .btn { width: auto; }
  .supplier-category-grid, .supplier-example-grid, .supplier-workflow, .supplier-platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supplier-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supplier-footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 993px) {
  .site-nav { display: flex; }
  .site-actions .menu-toggle { display: none; }
  .site-actions .btn { display: inline-flex; }
  .hero { padding-block: 4rem; }
  .hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
  .supplier-category-grid, .supplier-example-grid, .supplier-workflow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .supplier-footer-grid { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); }
  .supplier-footer-brand { grid-column: auto; }
}

/* An unboxed process row breaks up the category and product-card sections. */
#examples .section-head { text-align:left; margin-left:0; margin-right:0; }
.supplier-workflow { gap:0; border-block:1px solid var(--gp-border); }
.supplier-workflow > li { padding:1.25rem 0; border:0; border-bottom:1px solid var(--gp-border); border-radius:0; background:transparent; }
.supplier-workflow > li:last-child { border-bottom:0; }
.supplier-step-number { background:transparent; min-width:0; min-height:0; padding:0; font-size:1.75rem; }
@media(min-width:641px) {
 .supplier-workflow > li { padding:1.5rem; }
 .supplier-workflow > li:nth-child(odd) { border-right:1px solid var(--gp-border); }
 .supplier-workflow > li:nth-last-child(-n+2) { border-bottom:0; }
}
@media(min-width:993px) {
 .supplier-workflow { padding-block:1.75rem; }
 .supplier-workflow > li { padding:0 1.5rem; border-right:1px solid var(--gp-border); border-bottom:0; }
 .supplier-workflow > li:first-child { padding-left:0; }
 .supplier-workflow > li:last-child { padding-right:0; border-right:0; }
}
@media(max-width:640px) {
 .supplier-hero-media img { aspect-ratio:16/10; object-position:center 58%; }
}
@media(min-width:768px) and (max-width:992px) {
 .hero { padding-block:3rem; }
 .hero-inner { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem; }
}