/* upload-labs.css — the public /upload-labs acquisition page.
   Concept-scoped (ulb- prefix, following the how-it-works bhw- pattern);
   every color/font token inherits from styles.css. No inline styles
   anywhere on this page (CSP: style-src 'self'). */

.ulb-page{background:var(--bg);}
.ulb-wrap{max-width:1140px;margin:0 auto;padding:0 32px;position:relative;}
@media(max-width:640px){.ulb-wrap{padding:0 20px;}}

/* Same: h1 is the page title, h2 is a section head. */
.ulb-page h1{font-family:var(--bm-font-display);font-weight:300;line-height:1.06;letter-spacing:-.015em;margin:14px 0 0;}
.ulb-page h2{font-family:var(--bm-font-display);font-weight:300;line-height:1.06;letter-spacing:-.015em;margin:14px 0 0;}
/* The reference hero size — see .hero-title in styles.css. */
.ulb-page h1{font-size:clamp(38px,8vw,56px);}
.ulb-page h2{font-size:clamp(26px,3.4vw,42px);}
.ulb-page h3{font-family:var(--bm-font-ui);font-weight:400;font-size:18px;margin:0 0 8px;line-height:inherit;letter-spacing:normal;}
.ulb-it{font-style:italic;color:var(--teal);}
.ulb-eyebrow{font-family:var(--bm-font-ui);text-transform:uppercase;letter-spacing:.32em;font-size:11px;color:var(--teal);display:inline-block;}
.ulb-lead{font-size:clamp(15.5px,1.3vw,18px);color:var(--paper-dim);max-width:46ch;line-height:1.62;margin-top:16px;}

/* ── Hero ─────────────────────────────────────────────────────── */
/* The section rhythm — see .bhw-hero. */
.ulb-hero{padding:clamp(64px,9vh,120px) 0;}
.ulb-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
@media(max-width:920px){
  .ulb-hero{padding:clamp(48px,7vh,72px) 0;}
  .ulb-hero-grid{grid-template-columns:1fr;gap:28px;}
}

/* ── The upload card / flow panel ─────────────────────────────── */
/* NO CONTAINER, the same recipe .sf .su-card takes: no fill, no border, no
   radius, no shadow. THE 26px PADDING STAYS, and that is the one deliberate
   divergence from .su-card, which zeroes it: .su-card sits inside .su-shell,
   which already provides the form column's gutter, and this card does not —
   it is a standalone surface in a hero grid column. Zeroing it here would
   put the field rules against the column edge. */
.ulb-card{background:transparent;border:0;padding:26px;box-shadow:none;}

/* THE UPLOAD WIDGET'S OWN RULES ARE NOT HERE — they are the `.lu-*`
   block in styles.css, because /portal/app.html mounts the same widget
   and does not load this file. This sheet is the page's chrome only.
   See public/lab-uploader.js. */

/* The one-line field, matching the global .form-control / .form-label
   primitives in styles.css rather than restating a boxed input. The LABEL
   converts with it: an underline field under a lowercase grey label is a
   half-migrated field, and reads as a bug rather than as a style. */
.ulb-field{margin-top:var(--bm-space-field);}
/* THE FIELD CLUSTER, matching public/styles.css .form-label /
   .form-control exactly. This route builds its fields from bare
   `label` + `input` inside .ulb-field rather than from the global
   classes, so the primitives cannot reach it and are restated here.
   Restated, not reinterpreted: every number below is the same token the
   global rule reads, so the two can only drift if someone types a
   literal. 10px label, 9px to a 15px value, 6px to the rule.
   test/field-cluster-contract.test.mjs asserts this sheet and
   styles.css resolve to the same cluster. */
/* position/z-index are REQUIRED by the negative margin, not decoration:
   the input's box overlaps this label by 13px, and Chrome's autofill
   paints an opaque fill across it that would otherwise erase the label
   outright. Same reasoning as .form-label in styles.css. */
.ulb-field label{display:block;position:relative;z-index:1;font-family:var(--bm-font-ui);text-transform:uppercase;letter-spacing:.08em;font-size:var(--bm-label-size);font-weight:500;color:var(--bm-ink-label);margin-bottom:calc(var(--bm-space-label) - var(--bm-field-lead));}
/* 15px because the box is gone and the text IS the control. line-height:1
   makes the value's box exactly --bm-field-size tall, which is what the
   6px value-to-rule gap is measured from. The padding-top is the invisible
   half of the 44px tap target — cancelled by the label's negative margin
   above, so it never shows up in the spacing. */
.ulb-field input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--bm-rule);border-radius:0;color:var(--bm-ink);font-family:var(--bm-font-ui);font-weight:400;font-size:var(--bm-field-size);line-height:1;min-height:var(--bm-tap);padding:var(--bm-field-lead) 0 var(--bm-space-value);transition:border-color 160ms ease;outline:none;}
/* Focus doubles the rule and gives the pixel back in padding, so the
   baseline does not move. The rule IS the focus indicator. */
.ulb-field input:focus{border-bottom-width:2px;border-bottom-color:var(--bm-accent);padding-bottom:calc(var(--bm-space-value) - 1px);box-shadow:none;}
/* forced-colors strips author borders, which would leave the field with no
   focus indicator at all. */
@media (forced-colors: active){
  .ulb-field input:focus{outline:2px solid Highlight;outline-offset:2px;}
}
.ulb-field input::placeholder{color:var(--bm-ink-placeholder);opacity:1;}
/* Chrome paints its own fill on an autofilled field; the inset that
   suppresses it has to match what the field sits ON — the page, since
   the card above has no fill. */
.ulb-field input:-webkit-autofill,
.ulb-field input:-webkit-autofill:hover,
.ulb-field input:-webkit-autofill:focus{-webkit-text-fill-color:var(--bm-ink);-webkit-box-shadow:0 0 0 1000px var(--bg) inset;transition:background-color 5000s ease-in-out 0s;caret-color:var(--bm-ink);font-family:var(--bm-font-ui);font-size:var(--bm-field-size);}

/* THE PILL. 999px, the one radius this system has — every primary action
   on the site is one. */
.ulb-btn{font-family:var(--bm-font-ui);text-transform:uppercase;letter-spacing:.16em;font-size:12px;padding:14px 24px;border-radius:999px;display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:1px solid transparent;transition:.25s;margin-top:16px;}
.ulb-btn-primary{background:var(--teal);color:var(--ink-on-teal);width:100%;justify-content:center;}
.ulb-btn-primary:hover{background:var(--mint);}
.ulb-btn-primary:disabled{opacity:.45;cursor:not-allowed;}

.ulb-step-head{font-family:var(--bm-font-ui);font-size:19px;color:var(--paper);}
.ulb-step-sub{font-size:13px;color:var(--paper-dim);margin:8px 0 0;line-height:1.55;}
.ulb-error{font-size:13px;color:var(--attn);margin:12px 0 0;line-height:1.5;}
.ulb-signedin{font-size:12.5px;color:var(--paper-faint);margin:10px 0 0;}

/* The code step is the signup funnel's email-code gate
   (portal/signup/lib/otpVerify.js), styled by its own `.sf`-scoped rules
   in styles.css — #ulbStepCode carries the `sf` scope for exactly that.
   No code-row rules live here. */

.ulb-consent-row{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--paper-dim);line-height:1.55;margin-top:12px;cursor:pointer;}
.ulb-consent-row input{margin-top:3px;accent-color:var(--teal);flex-shrink:0;}
.ulb-consent-row a{color:var(--teal);}

/* ── Sections ─────────────────────────────────────────────────── */
.ulb-sec{padding:64px 0;}
.ulb-sec-alt{background:rgba(255,255,255,.015);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);}
.ulb-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px;}
@media(max-width:860px){.ulb-grid3{grid-template-columns:1fr;}}
.ulb-tile{border:1px solid var(--line-soft);padding:22px;}
.ulb-tile p{font-size:14px;color:var(--paper-dim);line-height:1.62;margin:0;}

.ulb-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:34px 0 0;padding:0;list-style:none;counter-reset:none;}
@media(max-width:860px){.ulb-steps{grid-template-columns:1fr;}}
.ulb-steps li{border-top:1px solid var(--line);padding-top:16px;}
.ulb-steps p{font-size:14px;color:var(--paper-dim);line-height:1.6;margin:0;}
.ulb-step-num{font-family:var(--bm-font-ui);font-size:11px;letter-spacing:.24em;color:var(--teal);display:block;margin-bottom:10px;}

.ulb-trust{margin:30px 0 0;padding:0;list-style:none;max-width:640px;}
.ulb-trust li{position:relative;padding:12px 0 12px 30px;border-bottom:1px solid var(--line-soft);font-size:14.5px;color:var(--paper-dim);line-height:1.55;}
.ulb-trust li::before{content:"";position:absolute;left:2px;top:19px;width:14px;height:8px;border-left:1.6px solid var(--teal);border-bottom:1.6px solid var(--teal);transform:rotate(-45deg);}