/* ============================================================================
   QRLib — Landing page styles (Broadsheet)
   Depends on broadsheet.css tokens.
   ========================================================================== */

/* ---------- Masthead / nav ---------- */
.masthead-bar { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--rule); }
.masthead-inner { display: flex; align-items: center; gap: var(--s-5); height: var(--topbar-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.brand-mark { color: var(--brand); display: inline-flex; }
.brand-word { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; letter-spacing: -.02em; }
.masthead-nav { display: flex; gap: var(--s-5); margin-inline: auto; }
.masthead-nav a { font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); padding: 6px 2px; border-bottom: 2px solid transparent; transition: color var(--dur), border-color var(--dur); }
.masthead-nav a:hover { color: var(--ink); border-color: var(--brand); }
.masthead-actions { display: flex; align-items: center; gap: var(--s-3); }
.lang-switch { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--r); overflow: hidden; }
.lang-switch button { padding: 5px 10px; font-size: var(--t-xs); font-weight: 700; color: var(--ink-3); }
.lang-switch button.active { background: var(--ink); color: var(--ink-inverse); }
.nav-toggle { display: none; color: var(--ink); padding: 6px; }

/* ---------- Hero ---------- */
.hero { padding-block: var(--s-8) var(--s-7); }
.hero-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: var(--s-8); align-items: center; }
.hero-lead .masthead { max-width: 15ch; }
.hero-specimen { display: flex; flex-direction: column; gap: var(--s-4); }
.specimen-frame { background: var(--card); border: 1px solid var(--rule-strong); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-2); position: relative; }
.specimen-frame::before { content: "SPECIMEN"; position: absolute; top: 10px; inset-inline-end: 12px; font-family: var(--font-mono); font-size: var(--t-2xs); letter-spacing: .2em; color: var(--ink-3); }
.specimen-qr { display: grid; place-items: center; padding: var(--s-4) 0; }
.specimen-qr svg { border-radius: var(--r); }
.specimen-cap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); border-top: 1px dotted var(--rule-strong); padding-top: var(--s-3); }
.specimen-cap .mono { font-size: var(--t-xs); color: var(--ink-2); }
.specimen-stats { display: flex; justify-content: space-between; gap: var(--s-3); text-align: center; }
.specimen-stats li { flex: 1; }
.specimen-stats strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1; }
.specimen-stats span { font-size: var(--t-2xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Trust bar ---------- */
.trust-bar { border-block: 1px solid var(--rule); background: var(--paper-2); padding-block: var(--s-4); }
.trust-logos { display: flex; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink-2); flex-wrap: wrap; }
.trust-logos .sep { color: var(--rule-strong); }

/* ---------- Bands & columns ---------- */
.band { background: var(--paper-2); border-block: 1px solid var(--rule); }
.columns-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.col-item { padding: var(--s-5) var(--s-6); border-inline-start: 1px solid var(--rule); }
.col-item:first-child { border-inline-start: 0; padding-inline-start: 0; }
.col-index { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--brand); letter-spacing: .1em; }
.col-item h3 { margin-top: var(--s-2); }

/* ---------- QR types grid ---------- */
.types-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.type-cell { background: var(--card); padding: var(--s-4); display: flex; align-items: center; gap: var(--s-3); transition: background var(--dur); }
.type-cell:hover { background: var(--paper); }
.type-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--rule-ink); border-radius: var(--r); color: var(--brand); }
.type-ico svg { width: 18px; height: 18px; }
.type-cell strong { font-size: var(--t-sm); font-weight: 600; display: block; }
.type-cell span { font-size: var(--t-2xs); color: var(--ink-3); }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.step { position: relative; }
.step-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; font-family: var(--font-display); font-weight: 700; margin-bottom: var(--s-3); }
.step h4 { margin-bottom: var(--s-2); }
.code-sample pre { margin: 0; overflow-x: auto; font-size: var(--t-sm); line-height: 1.6; color: var(--ink); background: var(--paper); }
.code-sample code { white-space: pre; }

/* ---------- Analytics showcase ---------- */
.analytics-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.tick-list li { position: relative; padding-inline-start: 26px; margin-top: var(--s-3); color: var(--ink-2); }
.tick-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 8px; width: 12px; height: 8px; border-inline-start: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); }
.analytics-card .spark { width: 100%; height: 120px; }
.mini-legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin-top: var(--s-4); border-top: 1px solid var(--rule); padding-top: var(--s-4); }
.mini-legend .k { display: block; font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.mini-legend .v { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }

/* ---------- Use cases ---------- */
.usecases-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.usecase { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: var(--s-5); transition: transform var(--dur), box-shadow var(--dur); }
.usecase:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.usecase .uc-ico { width: 40px; height: 40px; display: grid; place-items: center; color: var(--brand); border: 1.5px solid var(--rule-ink); border-radius: var(--r); margin-bottom: var(--s-4); }
.usecase h4 { margin-bottom: var(--s-2); }
.usecase p { font-size: var(--t-sm); color: var(--ink-2); }

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); align-items: start; max-width: 1000px; margin-inline: auto; }
.plan { background: var(--card); border: 1px solid var(--rule-strong); border-radius: var(--r-lg); padding: var(--s-6); position: relative; }
.plan.featured { border: 2px solid var(--brand); box-shadow: var(--shadow-2); }
.plan-flag { position: absolute; top: -12px; inset-inline-start: var(--s-6); background: var(--brand); color: #fff; font-size: var(--t-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-xs); }
.plan h3 { font-family: var(--font-sans); font-size: var(--t-h4); font-weight: 700; }
.plan .price { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; margin-block: var(--s-3) 2px; }
.plan .price small { font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 500; color: var(--ink-3); }
.plan .plan-line { color: var(--ink-2); font-size: var(--t-sm); margin-bottom: var(--s-4); }
.plan ul { margin-block: var(--s-4); display: grid; gap: var(--s-3); }
.plan ul li { position: relative; padding-inline-start: 24px; font-size: var(--t-sm); color: var(--ink-2); }
.plan ul li::before { content: ""; position: absolute; inset-inline-start: 0; top: 7px; width: 11px; height: 7px; border-inline-start: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); }

/* ---------- Quotes ---------- */
.quotes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.quote { border-top: 3px solid var(--rule-ink); padding-top: var(--s-4); }
.quote blockquote { font-size: 1.12rem; color: var(--ink); }
.quote figcaption { margin-top: var(--s-4); }
.quote figcaption strong { display: block; }
.quote figcaption span { font-size: var(--t-sm); color: var(--ink-3); }

/* ---------- Compliance strip ---------- */
.compliance-strip { background: var(--brand); color: #fff; padding-block: var(--s-5); }
.compliance-strip .cs-item strong { display: block; font-family: var(--font-display); }
.compliance-strip .cs-item span { font-size: var(--t-xs); color: color-mix(in srgb, #fff 78%, transparent); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--ink); color: var(--ink-inverse); padding-block: var(--s-9); text-align: center; }
.cta-band .masthead { color: #fff; }
.cta-band .lede { color: color-mix(in srgb, #fff 74%, transparent); }

/* ---------- Footer ---------- */
.site-footer { background: var(--paper-2); border-top: 2px solid var(--rule-ink); padding-block: var(--s-7) var(--s-5); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--s-6); }
.footer-col h5 { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); margin-bottom: var(--s-3); }
.footer-col a { display: block; font-size: var(--t-sm); color: var(--ink-2); padding: 4px 0; }
.footer-col a:hover { color: var(--brand); }

/* ---------- Consent banner ---------- */
.consent { position: fixed; inset-inline: 0; bottom: 0; z-index: 100; padding: var(--s-4); }
.consent-inner { max-width: var(--maxw); margin-inline: auto; background: var(--ink); color: var(--ink-inverse); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: var(--s-4) var(--s-5); display: flex; align-items: center; gap: var(--s-5); }
.consent-copy strong { font-family: var(--font-display); }
.consent-copy p { font-size: var(--t-sm); color: #cfc9bd; margin-top: 4px; }
.consent-actions { display: flex; gap: var(--s-2); flex: none; }
.consent-actions .btn-ghost { --fg: #fff; --bd: rgba(255,255,255,.3); }
.consent-actions .btn-ghost:hover { --bg: rgba(255,255,255,.1); }

/* ---------- Mobile ---------- */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero-specimen { max-width: 360px; }
  .analytics-showcase { grid-template-columns: 1fr; gap: var(--s-5); }
  .steps, .usecases-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .masthead-nav { position: fixed; inset: var(--topbar-h) 0 auto 0; flex-direction: column; background: var(--paper); border-bottom: 1px solid var(--rule); padding: var(--s-4); gap: var(--s-2); margin: 0; transform: translateY(-120%); transition: transform var(--dur) var(--ease); box-shadow: var(--shadow-2); }
  .masthead-nav.open { transform: none; }
  .nav-toggle { display: inline-flex; }
  .columns-3, .pricing-grid, .quotes-grid { grid-template-columns: 1fr; }
  .col-item { border-inline-start: 0; border-top: 1px solid var(--rule); padding-inline: 0; }
  .col-item:first-child { border-top: 0; }
  .steps, .usecases-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .consent-inner { flex-direction: column; align-items: stretch; }
  .consent-actions { flex-wrap: wrap; }
  .consent-actions .btn { flex: 1; }
}