/*
 * css/uda.css - the UDA driver and pricing layouts' own styles
 * (template/driver.html, template/pricing.html), full-monty 2026-10-15,
 * notes/uda.md. Builds on site.css's tokens and components (.hero-inner,
 * .card, .prop-item, .matrix-table, .pricing-card, .refund-policy); everything
 * here is additive, and the pages read correctly without it.
 */

/* Hero: text and the page's screencast side by side (site.css stacks
   .hero-inner below 920px). */
.uda-hero { align-items: center; }
.uda-hero-media:empty { display: none; }
.uda-screencast { margin: 0; }
.uda-screencast video {
  display: block; width: 100%; height: auto; border-radius: 8px;
  background: #001a33; box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  border: 1px solid rgba(220, 236, 255, .14);
}
.uda-screencast figcaption {
  margin-top: .7rem; font-family: 'Montserrat', sans-serif; font-size: .68rem; font-weight: 600;
  letter-spacing: .04em; color: rgba(200, 220, 255, .55);
}
@media (max-width: 920px) {
  .uda-hero-media { max-width: 560px; }
}

/* Why should you care? */
.uda-why { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: start; }
.uda-why .lead { margin-bottom: 1.4rem; }
.uda-ideal-h { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink2); margin-bottom: .6rem; }
.uda-ideal, .uda-ticks { list-style: none; padding: 0; margin: 0; }
.uda-ideal li, .uda-ticks li { position: relative; padding: .38rem 0 .38rem 1.6rem; font-size: .95rem; line-height: 1.55; color: var(--ink); }
.uda-ideal li::before, .uda-ticks li::before { content: "\2713"; position: absolute; left: 0; top: .38rem; color: var(--check); font-weight: 800; }
.uda-why-points { display: grid; gap: 1.6rem; }
@media (max-width: 860px) { .uda-why { grid-template-columns: 1fr; gap: 2rem; } }

/* Available editions and architecture diagrams */
.uda-editions { margin-bottom: 2.5rem; }
.uda-ticks li { font-size: .92rem; color: var(--ink2); }
.uda-sub-h { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1rem; color: var(--ink); margin: 0 0 1rem; }
/* Was (production's images, three abreast on white cards):
.uda-arch { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.uda-arch-fig { margin: 0; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 1rem; }
.uda-arch-fig a { display: block; }
.uda-arch-fig img { width: 100%; height: auto; margin: 0 auto; }
.uda-arch-fig figcaption { margin-top: .75rem; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: .78rem; color: #3D5080; text-align: center; }
   Now the exploded drawings, one at a time in tabs (template/driver.html).
   A drawing is shown at its own size (821 units wide for most; its labels
   are 10 px there) and never narrower than 600 px: on a phone its frame
   scrolls sideways rather than shrinking the labels out of reach. Each
   drawing carries its background, so the frame is the drawing. The dark file
   shows unless the page is in light mode (the hero diagrams' rule). */
.uda-arch-fig { margin: 0; scroll-margin-top: 5.5rem; }   /* #architecture-N lands below the sticky nav */
.uda-arch-fig .edition-h { margin-top: 1.25rem; }
.uda-arch-frame { max-width: 860px; overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.uda-arch-frame a { display: block; }
.uda-arch-frame img { display: block; width: 100%; min-width: 600px; height: auto; }
.uda-arch-light { display: none !important; }
:root[data-theme="light"] .uda-arch-dark { display: none !important; }
:root[data-theme="light"] .uda-arch-light { display: block !important; }
@media (max-width: 620px) { .uda-editions { grid-template-columns: 1fr; } }

/* Features comparison by driver edition */
.uda-features .matrix-table th[scope="row"] { text-align: left; }
.uda-feat-d { display: block; margin-top: .25rem; font-family: inherit; font-size: .8rem; font-weight: 400;
  line-height: 1.5; color: var(--ink2); text-transform: none; letter-spacing: 0; }
.uda-features .matrix-table td { vertical-align: middle; }
.uda-feat-mt th[scope="row"] { box-shadow: inset 3px 0 0 var(--blue); }

/* Pricing: the JDBC page's pointer to the JDBC-to-ODBC bridge */
.pricing-card.tier-bridge { border-style: solid; }
.uda-protocol-note a, .pricing-note a { color: var(--link); font-weight: 700; }

/* Documentation, installation and support */
.uda-links { list-style: none; padding: 0; margin: 0; }
.uda-links li { padding: .3rem 0; font-size: .92rem; }
.uda-links a { color: var(--link); font-weight: 700; }
.uda-links a::after { content: " \2192"; }

/* "Which Driver Do I Need?": the fourth question is shown by script */
.wd-question[hidden] { display: none; }