/**
 * LogisticsETS trial door (/start) — public brand shell.
 *
 * Tokens are the logisticsets.com ones (assets/css/style.css) copied, not
 * hotlinked: the door must render correctly while the marketing site is being
 * deployed, and the website playbook says local assets only.
 *
 * Every colour is stated explicitly. This page ships one deliberate look and
 * must not half-invert under a visitor's prefers-color-scheme: dark, which the
 * Olivero base theme this tenant is built on does respond to.
 */

.ls-door {
  --lsd-navy: #071226;
  --lsd-navy2: #0c2656;
  --lsd-blue: #2563eb;
  --lsd-sky: #38bdf8;
  --lsd-ink: #0f172a;
  --lsd-slate: #475569;
  --lsd-line: #e2e8f0;
  --lsd-bg: #f8fafc;
  --lsd-grad: linear-gradient(120deg, #2563eb, #38bdf8);
  --lsd-radius: 16px;
  color-scheme: light;
  background: var(--lsd-bg);
  color: var(--lsd-ink);
  margin: 0;
}

/* The cockpit ships a body/app background of its own; this page owns the page. */
.ls-door,
.ls-door .dialog-off-canvas-main-canvas {
  background: var(--lsd-bg);
}

.lsd {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: var(--lsd-ink);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.lsd-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* ---------------------------------------------------------------- nav */

.lsd-nav {
  background: var(--lsd-navy);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.lsd-nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 68px;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}

.lsd-brand {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -.01em;
  color: #fff;
  text-decoration: none;
}

.lsd-brand:hover { color: #fff; }

.lsd-brand__mark {
  background: var(--lsd-grad);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  padding: .35em .5em;
  border-radius: 8px;
}

.lsd-brand__accent { color: var(--lsd-sky); }

.lsd-nav__links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.lsd-nav__links a {
  color: #cbd5e1;
  font-weight: 500;
  font-size: .95rem;
  text-decoration: none;
}

.lsd-nav__links a:hover { color: #fff; text-decoration: underline; }

/* ---------------------------------------------------------------- band */

.lsd-band {
  background: linear-gradient(115deg, #071226 0%, #0c2656 100%);
  color: #fff;
}

.lsd-band__in { padding: 54px 24px 78px; }

.lsd-eyebrow {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--lsd-sky);
  margin: 0 0 14px;
}

.lsd-h1 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 .35em;
  color: #fff;
}

.lsd-lede {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: #dbeafe;
  margin: 0;
  max-width: 62ch;
}

/* ---------------------------------------------------------------- main */

.lsd-main { flex: 1 0 auto; }

.lsd-main__in { padding: 0 24px 72px; }

.lsd-card {
  background: #fff;
  border: 1px solid var(--lsd-line);
  border-radius: var(--lsd-radius);
  box-shadow: 0 18px 40px -18px rgba(12, 38, 86, .45);
  padding: 34px 32px 30px;
}

.lsd-stack { margin-top: -34px; }

/* Olivero's region wrapper is a CSS grid with its own row gap and margins; on a
   one-column form that is 50-odd pixels of dead space under the last field. */
.lsd-card > .region,
.lsd-card > .region--content {
  display: block;
  margin: 0;
  padding: 0;
}

.lsd-card > .region > *:last-child,
.lsd-card form > *:last-child { margin-bottom: 0; }

.lsd-messages { margin: 0 0 18px; }

/* Olivero clamps its message region to a reading column; inside the card stack
   it has to line up with the card it is talking about. */
.lsd-messages .messages,
.lsd-messages .messages__wrapper,
.lsd-messages [data-drupal-messages] {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.lsd-aside {
  margin: 22px 2px 0;
  color: var(--lsd-slate);
  font-size: .95rem;
}

.lsd-aside a { color: var(--lsd-blue); }

/* ------------------------------------------------------- form, inside card */

.lsd-card .ls-signup-intro {
  margin: 0 0 26px;
  padding: 0 0 22px;
  border-bottom: 1px solid var(--lsd-line);
  color: var(--lsd-slate);
  font-size: 1.02rem;
}

.lsd-card .js-form-item,
.lsd-card .form-item {
  margin: 0 0 20px;
}

.lsd-card label {
  display: block;
  font-weight: 700;
  font-size: .92rem;
  color: var(--lsd-ink);
  margin: 0 0 6px;
}

.lsd-card .form-required::after {
  content: " *";
  color: #b91c1c;
}

.lsd-card input[type="text"],
.lsd-card input[type="email"],
.lsd-card input[type="tel"],
.lsd-card input[type="url"],
.lsd-card select,
.lsd-card textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 1rem;
  color: var(--lsd-ink);
  background: #fff;
  border: 1.5px solid var(--lsd-line);
  border-radius: 10px;
  padding: .72em .85em;
  transition: border-color .15s, box-shadow .15s;
  appearance: auto;
}

.lsd-card input[type="text"]:focus,
.lsd-card input[type="email"]:focus,
.lsd-card input[type="tel"]:focus,
.lsd-card select:focus,
.lsd-card textarea:focus {
  outline: none;
  border-color: var(--lsd-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}

.lsd-card .description,
.lsd-card .form-item__description {
  color: var(--lsd-slate);
  font-size: .87rem;
  margin-top: 6px;
  line-height: 1.5;
}

.lsd-card .form-actions,
.lsd-card .form-actions.js-form-wrapper {
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--lsd-line);
}

.lsd-card input[type="submit"],
.lsd-card .button {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  background: var(--lsd-grad);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.02rem;
  padding: .85em 1.9em;
  cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(37, 99, 235, .6);
  transition: transform .15s, box-shadow .15s;
  width: auto;
}

.lsd-card input[type="submit"]:hover,
.lsd-card .button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px -8px rgba(37, 99, 235, .7);
}

.lsd-card .ls-fineprint {
  margin: 18px 0 0;
  color: var(--lsd-slate);
  font-size: .85rem;
}

/* Confirmation page. */
.lsd-card .ls-signup-done h2 { margin-top: 0; }
.lsd-card .ls-signup-done p { color: var(--lsd-slate); }
.lsd-card .ls-signup-done a { color: var(--lsd-blue); }

/* Drupal messages. */
.ls-door .messages {
  border-radius: 12px;
  padding: 14px 18px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: var(--lsd-ink);
}

.ls-door .messages--error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #7f1d1d;
}

/* ---------------------------------------------------------------- footer */

.lsd-foot {
  background: var(--lsd-navy);
  color: #94a3b8;
  font-size: .88rem;
  padding: 34px 0 40px;
  flex: 0 0 auto;
}

.lsd-foot p { margin: 0 0 8px; }

.lsd-foot__brand {
  color: #fff;
  font-weight: 800;
  font-size: 1.02rem;
}

.lsd-foot__links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.lsd-foot__links a { color: #cbd5e1; text-decoration: none; }
.lsd-foot__links a:hover { color: #fff; text-decoration: underline; }

.lsd-foot__fine {
  margin-top: 14px;
  color: #64748b;
  font-size: .8rem;
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 640px) {
  /* .lsd-wrap FIRST. The band and main inners carry BOTH classes, and at equal
     specificity the later rule wins — with .lsd-wrap written after them it was
     resetting their vertical padding to zero and pulling the card up over the
     last line of the lede. Measured at 390px, not guessed. */
  .lsd-wrap { padding: 0 18px; }
  .lsd-nav__in { min-height: 0; }
  .lsd-nav__links { gap: 16px; font-size: .9rem; }
  .lsd-band__in { padding: 38px 18px 66px; }
  .lsd-main__in { padding: 0 18px 56px; }
  .lsd-card { padding: 24px 20px 22px; border-radius: 14px; }
  .lsd-stack { margin-top: -34px; }
  .lsd-card input[type="submit"] { width: 100%; justify-content: center; }
}

/* A visitor whose OS is set to dark must still get the one look this page
   ships — the cockpit's base theme would otherwise repaint the form controls
   underneath it. */
@media (prefers-color-scheme: dark) {
  .ls-door,
  .ls-door .lsd,
  .ls-door .lsd-card,
  .ls-door .lsd-card input,
  .ls-door .lsd-card select,
  .ls-door .lsd-card textarea {
    color-scheme: light;
  }
  .ls-door .lsd-card { background: #fff; }
  .ls-door .lsd-card label { color: var(--lsd-ink); }
}

/* ==========================================================================
   1.4.0 — THE TWO NEW QUESTIONS (2026-09-06)
   "What do you want?" is a two-option radio set, and a fieldset appears for
   "Where are you based?". Neither element type existed on this page before, so
   both were inheriting the cockpit theme's controls underneath — which is the
   same half-inverted look the dark-mode block at the bottom of this file was
   written to stop.
   ========================================================================== */

.lsd-card fieldset {
  border: 1px solid var(--lsd-line, #e2e8f0);
  border-radius: 10px;
  padding: 14px 16px 4px;
  margin: 0 0 18px;
  min-width: 0;
}

.lsd-card fieldset > legend {
  padding: 0 6px;
  font-weight: 600;
  color: var(--lsd-ink, #0f172a);
  font-size: .95rem;
}

/* The two outcomes. Each option is a CARD, not a line of text with a dot in
   front of it: they are the most consequential choice on the page, one of them
   is free and immediate and the other is a reviewed trial, and a visitor
   skimming on a phone has to be able to tell them apart without reading to the
   end of the sentence.

   ⚠️ THE CARD IS THE WRAPPER, NOT THE LABEL. Drupal renders a radio as
     <div class="js-form-item form-item …"><input type="radio"><label>…</label></div>
   — the input is a SIBLING of the label, not a child of it. A first version of
   this block made the LABEL a two-column grid ("20px 1fr") on the assumption
   that the input sat inside it. The input was not there, so the label's own text
   went into the 20px column and every option rendered ONE CHARACTER PER LINE, a
   thousand pixels tall. It was caught by looking at the screenshot, which is the
   only thing that would have caught it — every assertion in the harness passed
   while the page was unreadable. */
/* Claro puts a 2px border on its radios group wrapper
   (.fieldset__wrapper--group), which framed the two cards a second time inside
   the fieldset's own frame — a visibly heavier box than the "Where are you
   based?" fieldset right below it. The per-option cards ARE the affordance here,
   so the group's own border goes. Measured in the browser, not assumed. */
.lsd-card .ls-wants .fieldset__wrapper--group {
  border: 0;
  padding: 0;
}

.lsd-card .ls-wants .js-form-item,
.lsd-card .ls-wants .form-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--lsd-line, #e2e8f0);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 10px;
  transition: border-color .12s ease, background-color .12s ease;
}

.lsd-card .ls-wants .form-item:hover {
  border-color: var(--lsd-blue, #2563eb);
  background: #f8fafc;
}

/* :has() lets the whole card show the selection. Decoration only — the radio's
   own focus ring below is what a keyboard visitor actually needs. */
.lsd-card .ls-wants .form-item:has(input:checked) {
  border-color: var(--lsd-blue, #2563eb);
  background: #eff6ff;
}

.lsd-card .ls-wants input[type="radio"] {
  flex: 0 0 auto;
  margin: 3px 0 0;
  width: 18px;
  height: 18px;
  accent-color: var(--lsd-blue, #2563eb);
}

.lsd-card .ls-wants input[type="radio"]:focus-visible {
  outline: 2px solid var(--lsd-blue, #2563eb);
  outline-offset: 2px;
}

/* The label is the rest of the row. `cursor:pointer` and the `for` attribute
   Drupal already writes are what make the text clickable; the card cannot be the
   hit target when the input is outside it. */
.lsd-card .ls-wants label {
  flex: 1 1 auto;
  margin: 0;
  cursor: pointer;
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .lsd-card fieldset { padding: 12px 12px 2px; }
  .lsd-card .ls-wants .form-item { padding: 12px; }
}

/* Same reason as the block above this one: keep the new controls on the page's
   own light look when the visitor's OS is dark. */
@media (prefers-color-scheme: dark) {
  .ls-door .lsd-card fieldset,
  .ls-door .lsd-card input[type="radio"] {
    color-scheme: light;
  }
  .ls-door .lsd-card fieldset { background: #fff; }
  .ls-door .lsd-card fieldset > legend,
  .ls-door .lsd-card .ls-wants label { color: var(--lsd-ink); }
  .ls-door .lsd-card .ls-wants .form-item { background: #fff; }
  .ls-door .lsd-card .ls-wants .form-item:has(input:checked) { background: #eff6ff; }
}