/* Batch Barcode Scanner overview (/batch-barcode-scanning/overview) */

/* The design file uses static Inter. The variable font's automatic optical sizing picks
   `opsz 32` at display sizes, which is ~6-7% narrower and changes every designed line
   break, so optical sizing is disabled for this page. */
body {
    font-optical-sizing: none;
}

/* Choose Your Options: card tint is a 6% -> 1% accent gradient in the design. */
#options .option-card {
    background-image: linear-gradient(180deg, rgba(254, 142, 20, 0.06), rgba(254, 142, 20, 0.01));
}

#options .option-card--blue {
    background-image: linear-gradient(180deg, rgba(43, 127, 255, 0.06), rgba(43, 127, 255, 0.01));
}

/* The white panel inside each option card carries the design-system shadow/sm
   effect (offset y=1, blur 2/3, 5%). The `shadow-sm` utility compiles to the
   default Tailwind 10% shadow, so the design token is applied here instead. */
#options .option-panel {
    box-shadow: var(--shadow-sm);
}

/* Secondary action used by the customization card. */
#options .option-btn-blue {
    color: var(--color-white);
    background-color: var(--color-blue-500);
    box-shadow: var(--shadow-sm);
}

#options .option-btn-blue:hover {
    background-color: #1f6fef;
}

/* Choose Your Options cards: the legacy `article { display: block }` rule in global.min.css
   outranks layered `tw:` utilities, so the flex column is declared here. */
#options .option-card,
#options .option-card--blue {
    display: flex;
    flex-direction: column;
}

/* The design's quote panel is taller than its content (Figma frame heights 205 / 229),
   which is what pushes the case-study text column up inside the card. */
@media (min-width: 64rem) {
    #success-story .case-study-quote {
        min-height: 205px;
    }
}

@media (min-width: 80rem) {
    #success-story .case-study-quote {
        min-height: 229px;
    }
}

/* Industry heading: the design steps 24/32 -> 28/32 (md) -> 28/36 (lg) -> 32/40 (xl),
   while heading-03 skips the md step. */
#solutions h2 {
    font-size: 1.5rem;
    line-height: 2rem;
}

@media (min-width: 48rem) {
    #solutions h2 {
        font-size: 1.75rem;
        line-height: 2rem;
    }
}

@media (min-width: 64rem) {
    #solutions h2 {
        font-size: 1.75rem;
        line-height: 2.25rem;
    }
}

@media (min-width: 80rem) {
    #solutions h2 {
        font-size: 2rem;
        line-height: 2.5rem;
    }
}