.product-runtime {
  --product-field: var(--product-runtime-colour);
  --product-accent: var(--lime);
  --product-soft: var(--sky);
  --product-hero-copy: var(--ink);
  --product-hero-muted: var(--ink-soft);
  --product-link: var(--blue-dark);
  --product-heading-accent: var(--blue-dark);
  --product-frame-shadow: var(--blue-dark);
  --product-decoration: var(--blue-dark);
  --product-focus-contrast: var(--ink);
}
.product-supply-chain {
  --product-field: var(--product-supply-chain-colour);
  --product-accent: var(--pink);
  --product-soft: var(--pink-soft);
  --product-hero-copy: var(--ink);
  --product-hero-muted: var(--ink-soft);
  --product-link: var(--blue-dark);
  --product-heading-accent: var(--critical);
  --product-frame-shadow: var(--pink);
  --product-decoration: var(--pink);
  --product-focus-contrast: var(--ink);
}
.product-hunt {
  --product-field: var(--product-hunt-colour);
  --product-accent: var(--pink);
  --product-soft: var(--sky);
  --product-hero-copy: var(--ink);
  --product-hero-muted: var(--ink-soft);
  --product-link: var(--blue-dark);
  --product-heading-accent: var(--blue-dark);
  --product-frame-shadow: var(--blue);
  --product-decoration: var(--blue);
  --product-focus-contrast: var(--ink);
}

.product-main { width: 100%; }
.product-main > :not(.product-platform-band):not(.product-hero) { width: min(var(--site-max), calc(100% - 40px)); margin-inline: auto; }
.product-hero { position: relative; isolation: isolate; min-height: 650px; display: grid; align-items: center; background: var(--product-field); color: var(--product-hero-copy); }
.product-hero-inner { padding-block: clamp(64px, 8vw, 104px) clamp(82px, 9vw, 120px); display: grid; grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr); align-items: center; gap: clamp(42px, 7vw, 96px); }
.product-hero::before { content: ""; position: absolute; z-index: -1; top: -280px; right: -210px; width: 660px; height: 660px; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 51px, currentColor 52px 54px); color: var(--product-decoration); opacity: .16; pointer-events: none; }
.product-supply-chain .product-hero::before { top: auto; right: -150px; bottom: -340px; opacity: .24; }
.product-hunt .product-hero::before { top: -230px; right: -180px; opacity: .18; }
.product-eyebrow,
.product-section-label { width: fit-content; margin: 0 0 15px; color: var(--blue-dark); font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; }
.product-eyebrow { padding: 7px 10px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--product-accent); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.product-hero h1 { max-width: 660px; margin: 0; font-size: clamp(3.25rem, 5.7vw, 5.6rem); line-height: .96; letter-spacing: -.066em; }
.product-hero h1 span { color: var(--product-heading-accent); }
.product-lede { max-width: 650px; margin: 24px 0 0; color: var(--product-hero-muted); font-size: clamp(.98rem, 1.3vw, 1.08rem); line-height: 1.72; }
.product-actions { margin-top: 31px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.primary-product-action,
.product-crosslink > a { min-height: 48px; padding: 11px 16px; display: inline-flex; align-items: center; gap: 9px; border-radius: 9px; background: var(--blue); color: #fff; font-size: .78rem; text-decoration: none; }
.product-hero .primary-product-action { background: var(--product-accent); color: var(--ink); }
.product-hero .primary-product-action:hover { background: var(--yellow); color: var(--ink); }
.evidence-link:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
.secondary-product-action { min-height: 48px; padding: 11px 16px; display: inline-flex; align-items: center; gap: 9px; border-radius: 9px; background: var(--paper); color: var(--ink); font-size: .78rem; text-decoration: none; }
.product-hero a:focus-visible { border-radius: 3px; outline: none; box-shadow: 0 0 0 4px var(--pink), 0 0 0 7px var(--product-focus-contrast); }
.product-hero .action-button:focus-visible { box-shadow: 3px 3px 0 var(--ink), 0 0 0 4px var(--pink), 0 0 0 7px var(--product-focus-contrast); }
.product-hero-visual { position: relative; overflow: hidden; border: 2px solid var(--ink); border-radius: 19px; background: var(--paper); box-shadow: 10px 10px 0 var(--product-frame-shadow); transform: rotate(1deg); }
.product-supply-chain .product-hero-visual { transform: rotate(-1deg); }
.product-hunt .product-hero-visual { transform: rotate(.7deg); }
.product-hero-visual img { display: block; width: 100%; height: auto; }
.product-visual-label { min-height: 46px; padding: 0 15px; display: flex; align-items: center; gap: 8px; border-bottom: 1.5px solid var(--ink); background: var(--product-soft); color: var(--ink); font-family: var(--mono); font-size: .62rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.product-visual-label span { width: 8px; height: 8px; border: 1px solid var(--ink); border-radius: 50%; background: var(--product-accent); }

.hunt-evidence-console { background: var(--ink-panel); }

.product-section { padding: clamp(94px, 11vw, 145px) 0 0; }
.product-section-heading { max-width: 910px; }
.product-section-heading.section-intro { max-width: none; }
.product-section-heading.compact { max-width: 780px; }
.product-section-heading h2,
.evidence-copy h2,
.platform-band-copy h2,
.product-crosslink h2 { margin: 0; font-size: clamp(2.3rem, 4.5vw, 4.25rem); line-height: 1; letter-spacing: -.058em; }
.product-section-heading > p:last-child { max-width: 700px; margin: 0 0 4px; color: var(--ink-soft); font-size: .98rem; line-height: 1.72; }
.product-scanner-heading > p { max-width: 650px; margin: 0 0 4px; color: var(--ink-soft); font-size: .98rem; line-height: 1.72; }
.product-scanner-section #browser-scanner { margin-top: 48px; }
.capability-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px solid var(--ink); background: var(--paper); box-shadow: 8px 8px 0 var(--ink); }
.capability-grid article { min-height: 315px; padding: clamp(25px, 3vw, 38px); border: .75px solid var(--ink); }
.capability-grid article:nth-child(1) { background: var(--sky); }
.capability-grid article:nth-child(2) { background: var(--lime); }
.capability-grid article:nth-child(3) { background: var(--yellow); }
.capability-number { font-family: var(--mono); font-size: .7rem; color: var(--blue-dark); }
.capability-grid h3 { margin: 72px 0 12px; font-size: 1.4rem; line-height: 1.1; letter-spacing: -.035em; }
.capability-grid p { margin: 0; color: var(--ink-soft); font-size: .8rem; line-height: 1.7; }

.product-flow { margin-top: clamp(100px, 12vw, 155px); padding: clamp(72px, 8vw, 105px); border: 2px solid var(--ink); border-radius: 20px; background: var(--blue); color: #fff; box-shadow: 9px 9px 0 var(--ink); }
.product-flow .product-section-label { color: var(--lime); }
.flow-steps { margin: 50px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; border: 1px solid rgba(255,255,255,.75); }
.flow-steps li { position: relative; min-height: 220px; padding: 24px; border: .5px solid rgba(255,255,255,.75); }
.flow-steps li:not(:last-child)::after { content: "→"; position: absolute; z-index: 1; top: 50%; right: -13px; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; background: var(--lime); color: var(--ink); font-family: var(--mono); font-size: .72rem; }
.flow-steps span { color: var(--lime); font-family: var(--mono); font-size: .65rem; }
.flow-steps strong { display: block; margin-top: 45px; font-size: 1.02rem; }
.flow-steps p { margin: 9px 0 0; color: var(--blue-soft); font-size: .72rem; line-height: 1.6; }

.product-evidence { padding: clamp(105px, 12vw, 155px) 0 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); align-items: center; gap: clamp(45px, 8vw, 105px); }
.product-evidence.reverse .evidence-visual { order: 2; }
.product-evidence.reverse .evidence-copy { order: 1; }
.evidence-visual { overflow: hidden; border: 2px solid var(--ink); border-radius: 17px; background: var(--paper); box-shadow: 9px 9px 0 var(--pink); }
.evidence-visual img { display: block; width: 100%; height: auto; }
.evidence-copy h2 { font-size: clamp(2.15rem, 3.7vw, 3.6rem); }
.evidence-copy > p:not(.product-section-label) { margin: 20px 0 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.72; }
.product-check-list { margin: 25px 0 0; padding: 22px 0 0; display: grid; gap: 11px; border-top: 1.5px solid var(--line-soft); list-style: none; }
.product-check-list li { position: relative; padding-left: 25px; font-size: .78rem; font-weight: 750; }
.product-check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--blue-dark); font-family: var(--mono); }
.evidence-link { min-height: 44px; margin-top: 25px; padding: 9px 13px; display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; background: var(--product-accent); color: var(--ink); font-size: .78rem; text-decoration: none; }

.trust-surfaces,
.feature-section { padding-top: clamp(105px, 12vw, 155px); }
.surface-grid,
.feature-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.surface-grid article { min-height: 225px; padding: 28px; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 5px 5px 0 var(--ink); }
.surface-grid article:nth-child(1) { background: var(--sky); }
.surface-grid article:nth-child(2) { background: var(--yellow); }
.surface-grid article:nth-child(3) { background: var(--lime); }
.surface-grid article:nth-child(4) { background: var(--pink-soft); }
.surface-grid span { font-family: var(--mono); color: var(--blue-dark); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }
.surface-grid h3 { margin: 52px 0 9px; font-size: 1.22rem; letter-spacing: -.03em; }
.surface-grid p { margin: 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.65; }
.feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-grid article { min-height: 195px; padding: 25px; border: 1.5px solid var(--ink); border-top: 7px solid var(--feature-accent, var(--ink)); border-radius: 12px; background: var(--paper); }
.feature-grid article:nth-child(1) { --feature-accent: var(--blue); }
.feature-grid article:nth-child(2) { --feature-accent: var(--pink); }
.feature-grid article:nth-child(3) { --feature-accent: var(--lime); }
.feature-grid article:nth-child(4) { --feature-accent: var(--orange); }
.feature-grid article:nth-child(5) { --feature-accent: var(--yellow); }
.feature-grid article:nth-child(6) { --feature-accent: var(--sky); }
.feature-grid h3 { margin: 0; font-size: 1.02rem; letter-spacing: -.025em; }
.feature-grid p { margin: 24px 0 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.65; }

.product-platform-band { width: 100%; margin: clamp(105px, 13vw, 170px) 0 0; padding: clamp(78px, 9vw, 112px) max(20px, calc((100% - var(--site-max)) / 2)); background: var(--platform-colour); color: var(--paper); border-block: 2px solid var(--ink); }
.platform-band-copy h2 { font-size: clamp(2.25rem, 4.1vw, 3.8rem); }
.product-platform-band .product-section-label { color: var(--lime); }
.platform-band-copy > p:last-child { margin-bottom: 4px; color: var(--blue-soft); font-size: .9rem; line-height: 1.7; }
.platform-band-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1.5px solid var(--ink); box-shadow: 7px 7px 0 var(--pink); }
.platform-band-grid article { min-height: 175px; padding: 22px; border: .75px solid var(--ink); background: var(--paper); }
.platform-band-grid span { color: var(--blue-dark); font-family: var(--mono); font-size: .62rem; }
.platform-band-grid strong { display: block; margin-top: 25px; font-size: .92rem; }
.platform-band-grid p { margin: 6px 0 0; color: var(--ink-soft); font-size: .7rem; line-height: 1.55; }
.product-crosslink { margin-block: clamp(84px, 10vw, 125px); padding: clamp(30px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 40px; border: 2px solid var(--ink); border-radius: 18px; background: var(--lime); box-shadow: 8px 8px 0 var(--ink); }
.product-crosslink h2 { max-width: 700px; font-size: clamp(1.8rem, 3.4vw, 3rem); }
.product-crosslink div > p:last-child { max-width: 600px; margin: 13px 0 0; color: var(--ink-soft); font-size: .8rem; }
.product-crosslink > a { flex: 0 0 auto; }
.product-crosslink > a.product-supply-chain-action { background: var(--product-supply-chain-colour); color: var(--ink); }
.product-crosslink > a.product-runtime-action { background: var(--product-runtime-colour); color: var(--ink); }
.product-crosslink > a.product-hunt-action { background: var(--product-hunt-colour); color: var(--ink); }

@media (max-width: 900px) {
  .product-hero-inner { grid-template-columns: 1fr; }
  .product-hero-copy { max-width: 760px; }
  .product-hero-visual { max-width: 760px; transform: none; }
  .product-supply-chain .product-hero-visual { transform: none; }
  .product-hunt .product-hero-visual { transform: none; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-grid article { min-height: 240px; }
  .capability-grid h3 { margin-top: 48px; }
  .flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-steps li:nth-child(2)::after { display: none; }
  .product-evidence { grid-template-columns: 1fr; }
  .product-evidence.reverse .evidence-visual,
  .product-evidence.reverse .evidence-copy { order: initial; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .product-main > :not(.product-platform-band):not(.product-hero) { width: calc(100% - 24px); }
  .product-hero { min-height: auto; }
  .product-hero-inner { padding-block: 50px 82px; gap: 45px; }
  .product-hero::before { top: -170px; right: -190px; width: 460px; height: 460px; background-size: auto; }
  .product-supply-chain .product-hero::before { top: auto; right: -170px; bottom: -240px; }
  .product-hero h1 { font-size: clamp(2.7rem, 13vw, 3.8rem); }
  .product-hero-visual,
  .product-supply-chain .product-hero-visual,
  .product-hunt .product-hero-visual { border-radius: 13px; box-shadow: 6px 6px 0 var(--product-frame-shadow); }
  .product-actions { align-items: flex-start; flex-direction: column; }
  .capability-grid { box-shadow: 5px 5px 0 var(--ink); }
  .product-flow { padding: 48px 21px; border-radius: 15px; box-shadow: 6px 6px 0 var(--ink); }
  .flow-steps { grid-template-columns: 1fr; }
  .flow-steps li { min-height: 180px; }
  .flow-steps li:not(:last-child)::after { top: auto; right: 22px; bottom: -13px; content: "↓"; }
  .flow-steps li:nth-child(2)::after { display: grid; }
  .flow-steps strong { margin-top: 32px; }
  .evidence-visual { box-shadow: 6px 6px 0 var(--pink); }
  .surface-grid,
  .feature-grid,
  .platform-band-grid { grid-template-columns: 1fr; }
  .surface-grid article { min-height: 205px; }
  .product-platform-band { padding-inline: 20px; }
  .product-crosslink { align-items: flex-start; flex-direction: column; box-shadow: 6px 6px 0 var(--ink); }
  .product-crosslink > a { flex: initial; }
}