/* Partner with us: the mix the founder approved on 18 Oct 2026 (Figma, Web 2026-10 Merchants, partners row).
 * The original's big title, benefits and shopfront drawing, the redesign's white form card with tidy paired
 * fields, the live portal plate, four feature cards with tone stubs, and the Locations poster as a true A5
 * sheet (148 x 210 mm, 920 x 1305 px) as tall as the card stack beside it.
 * Loaded after site.css and site-launch.css, before company-theme.css.
 */

.ls .partners-main {
  --pt-field: #FFFFFF;  /* white like the ambassador form (founder, 19 Oct) */
  --pt-field-line: #6B6660;   /* 5.2:1 on the field */
  --pt-dot-ring: rgba(20, 20, 18, .22);
  --pt-poster-w: 464px;
  padding-top: 72px;         /* the title starts at about 148 px at 1440 */
  row-gap: 104px;
  /* `.ls main` clips sideways, and this main is the container itself, so the form card's shadow (the card token, 24 px
     sideways at most) was cut flat at the content edge. The clip box takes the gutter as padding instead: the content
     keeps its width and x, and the clip sits one gutter out (the screen's edge on a phone). */
  width: min(100%, var(--ls-max) + 2 * var(--ls-gutter));
  padding-inline: var(--ls-gutter);
}

/* ---------- Hero ---------- */
.ls .partners-pitch { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 80px; align-items: start; }
.ls .partners-pitch .page-title { max-width: 520px; font-size: 64px; line-height: 0.98; letter-spacing: -0.05em; }
.ls .partners-pitch .lede { max-width: 520px; margin-top: 28px; color: var(--ls-soft); font-size: 19px; line-height: 1.53; }
.ls .partners-benefits { gap: 14px; margin-top: 28px; }
.ls .partners-benefits li,
.ls .partners-benefit-lead { max-width: 520px; color: var(--ls-ink); font-size: 17px; font-weight: 500; line-height: 1.47; }
.ls .partners-benefits li::before,
.ls .partners-benefit-lead::before { width: 8px; height: 8px; margin-top: 0.6em; margin-right: 6px; background: var(--ls-orange); }
/* The shopfront, untilted and centred under the benefits, at the size the mix gives it. */
.ls .partners-art { display: flex; justify-content: center; margin-top: 56px; padding-top: 0; }
.ls .partners-art img { width: auto; height: 260px; }

/* The short copy column holds still beside the long form, only where the whole column fits. */
@media (min-width: 900px) and (min-height: 1000px) {
  .ls .partners-pitch-copy { position: sticky; top: 112px; }
}

/* ---------- The form card ---------- */
.ls .partners-form-card { max-width: none; padding: 28px; border-radius: 20px; scroll-margin-top: 96px; }
.ls .partners-form-heading { margin-bottom: 24px; }
.ls .partners-form-heading h2 { margin-bottom: 14px; font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -0.04em; }
.ls .partners-form-heading p:not(.fine) { color: var(--ls-ink); font-size: 16px; line-height: 1.5; }
.ls .partners-form-heading .fine { margin-top: 16px; color: var(--ls-ink-2); font-size: 13px; line-height: 1.55; }
.ls .partners-form-card .form-stack { gap: 18px; }
.ls .partners-form-card .field { gap: 8px; }
.ls .partners-form-card .field-row { gap: 14px; }
.ls .partners-form-card .field :is(input, select, textarea) {
  border: 1px solid var(--pt-field-line);
  color: var(--ls-ink);
  background: var(--pt-field);
  font-size: 17px;
}
.ls .partners-form-card .field textarea { min-height: 120px; }
/* One focus ring for every control: the ink border, a soft halo and a 2px ink outline. */
.ls .partners-form-card .field :is(input, select, textarea):focus-visible { border-color: var(--ls-ink); box-shadow: 0 0 0 3px rgba(20, 20, 18, .14); outline: 2px solid var(--ls-ink); outline-offset: 2px; }
.ls .partners-form-card .field :is(input, select, textarea)[aria-invalid="true"] { border: 1.5px solid var(--tud-color-status-error-text); }
/* Category: a radio group of pills. Unselected pills wear the text fields' own fill, border and focus ring
   (the same --pt-field tokens) with a dot in the category's palette tone (.ls-tone-N sets --ls-tone); the picked
   one fills with that tone. Ink text on every tone in both themes: the light tints are pale (ink 12:1 and up)
   and the dark theme's deep tones carry the cream ink (9.5:1 and up). No tick. */
.ls .partners-form-card .cat-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.ls .partners-form-card .cat-field legend { margin-bottom: 8px; padding: 0; }
.ls .partners-form-card .cat-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.ls .partners-form-card .cat-pill { position: relative; display: inline-flex; cursor: pointer; }
.ls .partners-form-card .cat-pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ls .partners-form-card .cat-pill span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px; border: 1px solid var(--pt-field-line); border-radius: 999px; color: var(--ls-ink); background: var(--pt-field); font-size: 16px; font-weight: 600; line-height: 1; transition: background-color 140ms var(--ls-ease), border-color 140ms var(--ls-ease); }
.ls .partners-form-card .cat-pill span::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ls-tone, var(--ls-sand)); box-shadow: inset 0 0 0 1px var(--pt-dot-ring); }
.ls .partners-form-card .cat-pill:hover span { border-color: var(--ls-ink); }
.ls .partners-form-card .cat-pill input:focus-visible + span { border-color: var(--ls-ink); box-shadow: 0 0 0 3px rgba(20, 20, 18, .14); outline: 2px solid var(--ls-ink); outline-offset: 2px; }
.ls .partners-form-card .cat-pill input:checked + span { border-color: color-mix(in srgb, var(--ls-tone, var(--ls-sand)) 55%, var(--ls-ink)); background: var(--ls-tone, var(--ls-sand)); }
.ls .partners-form-card .cat-field[aria-invalid="true"] .cat-pill span { border: 1.5px solid var(--tud-color-status-error-text); }
.ls .partners-form-card .cat-other { margin-top: 14px; }
.ls .partners-form-card .cat-other[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .ls .partners-form-card .cat-pill span { transition: none; } }
/* Where students can buy: one chip style, one selected state. Every chip in these groups is the same width in an even
   grid (two across on a phone, as many as fit at 140px beyond that), the label sits centred on one line with equal insets,
   and picked is ink border plus the accent tint, with no per-option colour and no dot. The numbers line up on the
   field's right edge, one under another. Sub-groups follow the form's own 18px rhythm. */
.ls .partners-form-card .reach-field { gap: 18px; }
.ls .partners-form-card .reach-field > .reach-grid,
.ls .partners-form-card .reach-cities { margin: 0; }
.ls .partners-form-card .reach-cities[hidden] { display: none; }
.ls .partners-form-card .reach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.ls .partners-form-card .reach-field .cat-pill { --ls-tone: color-mix(in srgb, var(--ls-orange) 16%, var(--pt-field)); display: flex; min-width: 0; }
.ls .partners-form-card .reach-field .cat-pill span { box-sizing: border-box; width: 100%; justify-content: center; padding: 0 12px; overflow: hidden; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.ls .partners-form-card .reach-field .cat-pill span::before { display: none; }
.ls .partners-form-card .reach-field .cat-pill input:checked + span { border-color: var(--ls-ink); box-shadow: inset 0 0 0 1px var(--ls-ink); }
.ls .partners-form-card .reach-counts { display: grid; gap: 10px; margin: 0; }
.ls .partners-form-card .reach-counts:empty { display: none; }
.ls .partners-form-card .reach-count { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ls .partners-form-card .reach-count label { color: var(--ls-ink); font-size: 16px; font-weight: 600; line-height: 1.3; }
.ls .partners-form-card .reach-count input { flex: none; width: 96px; min-height: 52px; padding: 0 14px; border: 1px solid var(--pt-field-line); border-radius: 12px; color: var(--ls-ink); background: var(--pt-field); font: inherit; font-size: 17px; text-align: right; }
.ls .partners-form-card .reach-count input { -moz-appearance: textfield; appearance: textfield; }
.ls .partners-form-card .reach-count input::-webkit-inner-spin-button, .ls .partners-form-card .reach-count input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.ls .partners-form-card .reach-count input:focus-visible { border-color: var(--ls-ink); box-shadow: 0 0 0 3px rgba(20, 20, 18, .14); outline: 2px solid var(--ls-ink); outline-offset: 2px; }
.ls .partners-form-card .reach-count input[aria-invalid="true"] { border: 1.5px solid var(--tud-color-status-error-text); }
.ls .partners-form-card .form-commit { gap: 20px; margin-top: 2px; }
.ls .partners-form-card .form-commit .btn { min-height: 52px; padding-inline: 24px; font-size: 16px; }
.ls .partners-form-card .form-reassure { color: var(--ls-ink); font-size: 13px; }
.ls .partners-form-card .form-msg:not(:empty) { font-size: 14px; line-height: 1.5; }

/* The sent state: the heading and the reply line, no icon. */
.ls .partners-success { padding-block: 56px; }
.ls .partners-success h2 { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; }
.ls .partners-success p { color: var(--ls-soft); }

.ls .partners-portal-signin { max-width: none; margin: 18px 0 0; color: var(--ls-muted); font-size: 14px; }

/* ---------- The portal ---------- */
.ls .partners-portal { padding-top: 0; border-top: 0; }
.ls .portal-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 80px; align-items: start; margin-bottom: 40px; }
.ls .portal-heading h2 { max-width: 520px; margin: 0; font-size: 48px; font-weight: 800; line-height: 1.05; letter-spacing: -0.045em; }

.ls .portal-demo { border: 1px solid var(--ls-line-2); border-radius: 20px; background: var(--ls-paper); }
.ls .portal-plate-cap { gap: 6px 12px; padding: 14px 16px; border-bottom: 0; color: var(--ls-soft); background: var(--ls-tint); font-family: inherit; font-size: 13px; font-weight: 500; line-height: 18px; }
.ls .portal-plate-tab { color: var(--ls-accent-text); font-size: 14px; font-weight: 700; }
.ls .portal-demo-foot { padding: 16px 20px; border-top: 1px solid var(--ls-line-2); background: var(--ls-paper); }
.ls .portal-demo-open { min-height: 44px; padding-inline: 18px; font-size: 15px; }

/* Four feature cards beside the A5 poster. The poster sets the row's height and the cards share it,
   so their tops and feet line up with the sheet's. */
.ls .portal-detail { grid-template-columns: minmax(0, 1fr) calc(var(--pt-poster-w) + 2 * var(--pt-sheet-inset)); align-items: stretch; gap: 48px; margin-top: 72px; }
.ls .portal-ledger { display: flex; flex-direction: column; gap: 16px; border-top: 0; }
/* Each card is a ticket like the homepage deal rows: a narrow tinted stub on the left whose scallops bulge into
   the white body (the shared --tud-scallop-bulge-right mask, the homepage bulge mirrored, 24px pitch). The scalloped join carries no stroke. */
.ls .portal-row {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 20px 32px 20px 48px;
  border: 0;
  border-radius: 20px;
  background: var(--ls-paper);
  box-shadow: inset 0 0 0 1px var(--ls-line-2);
}
.ls .portal-row::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 18px; border-radius: 20px 0 0 20px; background: var(--pt-tone, var(--ls-chai)); }
.ls .portal-row::after { content: ""; position: absolute; top: 0; bottom: 0; left: 18px; width: 6px; background: var(--pt-tone, var(--ls-chai)); -webkit-mask: var(--tud-scallop-bulge-right); mask: var(--tud-scallop-bulge-right); }
.ls .portal-row:nth-child(1) { --pt-tone: var(--ls-chai); }
.ls .portal-row:nth-child(2) { --pt-tone: var(--ls-food); }
.ls .portal-row:nth-child(3) { --pt-tone: var(--ls-fashion); }
.ls .portal-row:nth-child(4) { --pt-tone: var(--ls-study); }
.ls .portal-row dt { color: var(--ls-ink); font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; }
.ls .portal-row dd { max-width: none; color: var(--ls-soft); font-size: 16px; line-height: 1.55; }

.ls .portal-plate--sheet { position: relative; align-self: start; width: 100%; overflow: visible; border: 0; border-radius: 0; background: transparent; }
.ls .portal-plate--sheet .portal-plate-cap { position: absolute; bottom: calc(100% + 8px); left: var(--pt-sheet-inset); padding: 0; background: transparent; }
/* One sheet of paper on the page. `.ls main` clips sideways at the page gutter, so a sheet that touches the gutter has its
   shadow cut into a grey box. The sheet is inset (--pt-sheet-inset) by more than the shadow reaches, and the shadow is
   layered: a hairline edge, then five warm-tinted layers (the page ink, not grey) that double in size and fade in turn, so the fall-off is smooth with no band; a little heavier under the foot, all four sides. */
.ls { --pt-sheet-inset: 20px; --pt-paper-edge: rgba(56, 38, 20, .08); --pt-paper-shadow: var(--tud-shadow-paper); }
.ls .portal-plate-art { display: block; width: calc(100% - 2 * var(--pt-sheet-inset)); height: auto; margin-inline: auto; aspect-ratio: 148 / 210; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px var(--pt-paper-edge), var(--pt-paper-shadow); }

/* Under 1200 the cards wrap taller than any sheet that fits beside them, so the poster moves under them. */
@media (max-width: 1199px) {
  .ls .partners-pitch, .ls .portal-heading { column-gap: 48px; }
  .ls .portal-detail { grid-template-columns: 1fr; gap: 64px; }
  .ls .portal-plate--sheet { width: min(100%, 340px); }
}

/* ---------- Stacked ---------- */
@media (max-width: 920px) {
  .ls .partners-pitch { grid-template-columns: 1fr; row-gap: 0; }
  .ls .partners-pitch-copy { max-width: 640px; }
  .ls .partners-art { margin: 40px 0 48px; }
  .ls .partners-form-card { max-width: 640px; margin-inline: 0; }
  .ls .portal-heading { grid-template-columns: 1fr; }
  .ls .portal-plate--sheet { width: min(100%, 300px); justify-self: center; }
}

@media (max-width: 600px) {
  .ls .partners-main { padding-top: 32px; row-gap: 72px; }
  .ls .partners-pitch .page-title { font-size: 44px; line-height: 1; }
  .ls .partners-pitch .lede { margin-top: 20px; font-size: 16px; line-height: 1.5; }
  .ls .partners-benefits { margin-top: 24px; }
  .ls .partners-benefits li, .ls .partners-benefit-lead { font-size: 16px; }
  .ls .partners-art { margin: 32px 0 40px; }
  .ls .partners-art img { height: 200px; }
  /* the card's side padding, so the Category row swipes out to the card's edge (/assets/booking-choices.css) */
  .ls .partners-form-card { padding: 24px 18px; --choice-bleed: 18px; }
  .ls .partners-form-heading h2 { font-size: 28px; }
  .ls .portal-heading { margin-bottom: 28px; }
  .ls .portal-heading h2 { font-size: 32px; }
  .ls .portal-detail { margin-top: 32px; }
  .ls .portal-row { padding: 22px 20px 22px 42px; }
  .ls .portal-row dt { font-size: 19px; }
  .ls .portal-demo-open { width: auto; }
  .ls .portal-plate--sheet { width: 100%; }
}

/* ---------- Dark ---------- */
:root[data-theme="dark"] .ls .partners-main { --pt-field: #2E2822; --pt-field-line: #8C7F71; --pt-dot-ring: rgba(246, 239, 228, .35); }
:root[data-theme="dark"] .ls .partners-form-card .field :is(input, select, textarea):focus-visible,
:root[data-theme="dark"] .ls .partners-form-card .cat-pill input:focus-visible + span,
:root[data-theme="dark"] .ls .partners-form-card .reach-count input:focus-visible { box-shadow: 0 0 0 3px rgba(246, 239, 228, .2); }
/* The poster is a printed sheet, white in both themes; a hairline keeps its edge on the dark ground and the shadow is darker paper-on-table. */
:root[data-theme="dark"] .ls { --pt-paper-edge: #443B32; --pt-paper-shadow: var(--tud-shadow-paper); }