/* The launch site: one design for every student page.
 *
 * The launch style's identity (the paper canvas with its grain, Outfit set
 * heavy and tight, Space Grotesk numerals, the apps' pastel panels, the ink
 * doodles, the orange poster with its perforated edge, the White edge pass)
 * on the Figma web anatomy (pill nav, trust row, poster, deal and brand
 * cards, pastel category tiles, breadcrumbs, numbered steps, the sign-up
 * card, the guide reading layout, the scalloped brand hero).
 *
 * Rules: light only. One orange lead per screen (the poster or the brand
 * hero); every other action is an ink pill. Orange is never a line. Labels
 * in sentence case. Nothing moves on load; motion only answers the student,
 * and reduced motion turns it off.
 *
 * Loaded last on every page with body.ls, so equal specificity wins over
 * site.css and the page stylesheets. Selectors and data attributes the
 * scripts read are never renamed here; this file only restyles them.
 */

/* ---------- tokens ---------- */
.ls {
  --ls-ink: #141412;
  --ls-ink-2: #2B2722;
  --ls-soft: #55504A;
  --ls-muted: #6B6660;
  --ls-canvas: #FAF7F2;
  --ls-paper: #FFFFFF;
  --ls-line: #EEE5DC;
  --ls-line-2: #E2D6CA;
  --ls-control: #96897F;
  --ls-orange: #FF6B35;
  --ls-orange-deep: #EB501D;
  --ls-accent-text: #C93F12;
  --ls-tint: #FFF3EC;
  --ls-tint-line: #FFC4A8;
  --ls-chai: #FFE6A8;
  --ls-sand: #F7E1C8;
  --ls-food: #C9E4DC;
  --ls-move: #F9D8DE;
  --ls-study: #DCE8C0;
  --ls-fashion: #D3E2F2;
  --ls-lilac: #E6DDF5;
  --ls-ok: #1E7D46;
  --ls-ok-bg: #E8F5EC;
  --ls-wait: #8F5A00;
  --ls-wait-bg: #FFF2DB;
  --ls-max: 1120px;
  --ls-read: 720px;
  --ls-gutter: 24px;
  --ls-section: clamp(56px, 7vw, 96px);
  --ls-shadow: 1px 2px 4px rgba(22, 21, 18, .16);
  --ls-lift: var(--tud-shadow-card);
  --ls-ease: cubic-bezier(.2, .7, .2, 1);
  /* The apps' ScallopEdge as a bulge: a 6px column of half discs at a 24px pitch, used as a mask on a tinted
     strip so a stub's scallops push into the white body beside it (homepage deal tickets: stub on the right). */
  --tud-scallop-bulge: radial-gradient(circle at 100% 50%, #000 5.5px, #0000 6px) 0 0 / 6px 24px round;
  /* The same bulge for a stub on the left, pushing right. */
  --tud-scallop-bulge-right: radial-gradient(circle at 0 50%, #000 5.5px, #0000 6px) 0 0 / 6px 24px round;
  --site-content: var(--ls-max);
  --site-accent-text: var(--ls-accent-text);
  color: var(--ls-ink);
  background: var(--ls-canvas);
}

/* The paper grain that used to sit behind every page (a multiplied noise tile at .17) is retired (the founder,
   16 October 2026): it darkened the page a few levels while the footer painted the plain canvas token over it,
   so page and footer read as two shades. Page and footer are now one surface, the canvas token. */
body.ls { position: relative; isolation: isolate; }

.ls :is(h1, h2, h3) { text-wrap: balance; color: var(--ls-ink); }
.ls p { text-wrap: pretty; }
.ls :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--ls-ink); outline-offset: 2px; }
.ls main { overflow-x: clip; }
/* The hidden attribute always wins over a component's display. */
.ls [hidden]:not(.shop-filters) { display: none !important; }
.ls .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ls .container, .ls-wrap { width: min(100% - (var(--ls-gutter) * 2), var(--ls-max)); margin-inline: auto; }
.ls-section { margin-top: var(--ls-section); }
.ls-read { max-width: var(--ls-read); }
.ls .theme-art img { mix-blend-mode: multiply; }

/* ---------- type ---------- */
.ls-h1, .ls .page-title {
  font-size: clamp(44px, 5.3vw, 76px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
}
.ls-h2, .ls-head h2 {
  font-size: clamp(30px, 3.1vw, 44px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
}
.ls-lead { max-width: 46ch; color: var(--ls-soft); font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; line-height: 1.52; }
.ls-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 28px; }
.ls-head p { max-width: 52ch; margin-top: 10px; color: var(--ls-soft); font-size: 17px; line-height: 1.55; }
.ls-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--ls-accent-text);
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}
.ls-link:hover { text-decoration-thickness: 2.5px; }

/* ---------- buttons: ink pills ---------- */
.ls-btn, .ls .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 24px;
  border: 1.5px solid var(--ls-ink);
  border-radius: 999px;
  color: var(--ls-paper);
  background: var(--ls-ink);
  font-family: var(--tud-font-primary);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 160ms var(--ls-ease), color 160ms var(--ls-ease), transform 160ms var(--ls-ease);
}
.ls-btn:hover, .ls .btn:hover { text-decoration: none; transform: translateY(-1px); }
.ls-btn:active, .ls .btn:active { transform: translateY(1px); }
.ls .btn-primary, .ls-btn--ink { color: var(--ls-paper); background: var(--ls-ink); border-color: var(--ls-ink); }
.ls .btn-primary:hover, .ls-btn--ink:hover { background: #33302B; border-color: #33302B; box-shadow: none; }
.ls .btn-secondary, .ls-btn--line { color: var(--ls-ink); background: transparent; border-color: var(--ls-ink); }
.ls .btn-secondary:hover, .ls-btn--line:hover { background: rgba(20, 20, 18, .05); border-color: var(--ls-ink); }
.ls .btn-sm { min-height: 44px; padding: 8px 18px; font-size: 15px; }
.ls .btn-block, .ls-btn--block { width: 100%; }
.ls .btn:disabled, .ls-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
@media (prefers-reduced-motion: reduce) { .ls-btn, .ls .btn, .ls-btn:hover, .ls .btn:hover { transform: none; transition: none; } }

/* ---------- header ---------- */
.ls .site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--ls-line); background: rgba(250, 247, 242, .94); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
.ls .nav { width: min(100% - (var(--ls-gutter) * 2), var(--ls-max)); min-height: 76px; gap: 20px; }
.ls .nav-brand { flex: none; }
.ls .nav-logo { width: 144px; height: auto; }
/* Plain text links after the logo, as the references set them: no capsule.
   The current page is marked with weight and an ink underline. */
.ls .nav-brand { margin-right: clamp(8px, 1.6vw, 24px); }
.ls .nav-links { gap: clamp(4px, 1vw, 14px); margin-inline: 0; }
.ls .nav-link {
  min-height: 44px;
  padding: 0 10px;
  color: var(--ls-ink-2);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 9px;
}
.ls .nav-link:hover { color: var(--ls-ink); }
.ls .nav-link[aria-current="page"] { color: var(--ls-ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--ls-ink); }
.ls .nav-right { gap: 10px; flex: none; margin-left: auto; }
.ls .nav-signin { min-width: 0; }
html[data-nav-session="on"] .ls .nav-signin, html[data-nav-session="on"] .ls .nav-signin-alt { display: none; }

/* The account button app.js builds: "Your pass" with a status dot. */
.ls .nav-account-btn { gap: 8px; min-height: 44px; padding-inline: 14px 16px; }
.ls .nav-pass-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--ls-orange); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.ls .nav-pass-dot[data-status="pending"] { background: #F2B233; }
.ls .nav-pass-dot[data-status="verified"] { background: #3DBE6E; }
.ls .nav-account-menu { border-color: var(--ls-line-2); border-radius: 16px; box-shadow: var(--ls-lift); }
.ls .nav-account-item:hover { background: var(--ls-tint); }

/* The small-screen menu. */
.ls-menu { display: none; position: relative; }
.ls-menu summary { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--ls-ink); border-radius: 50%; cursor: pointer; list-style: none; }
.ls-menu summary::-webkit-details-marker { display: none; }
.ls-menu[open] summary { background: var(--ls-ink); color: var(--ls-paper); }
.ls-menu-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; display: grid; width: min(280px, calc(100vw - 32px)); padding: 8px; border: 1px solid var(--ls-line-2); border-radius: 16px; background: var(--ls-paper); box-shadow: var(--ls-lift); }
.ls-menu-panel a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 10px; color: var(--ls-ink); font-size: 16px; font-weight: 600; text-decoration: none; }
.ls-menu-panel a:hover { background: var(--ls-tint); }
.ls-menu-panel a[aria-current="page"] { color: var(--ls-accent-text); background: var(--ls-tint); }
.ls-menu-panel .ls-menu-signin { margin-top: 6px; border-top: 1px solid var(--ls-line); border-radius: 0 0 10px 10px; }
@media (max-width: 960px) {
  .ls .nav-links { display: none; }
  .ls .nav { justify-content: space-between; }
  .ls-menu { display: block; }
}
@media (max-width: 600px) {
  .ls { --ls-gutter: 16px; }
  .ls .nav { min-height: 64px; gap: 10px; }
  .ls .nav-logo { width: 118px; }
  .ls .nav-signin, .ls .nav-merchant { display: none; }
  .ls .nav-right { gap: 8px; }
  .ls .nav-right .btn-sm { min-height: 44px; padding-inline: 16px; font-size: 15px; }
}

/* The verify nudge app.js adds under the header on /deals/. */
.ls .verify-nudge { border-bottom: 1px solid var(--ls-tint-line); background: var(--ls-tint); }

/* ---------- footer ---------- */
.ls main#main-content { padding-bottom: var(--ls-section); }
.ls .page-shell { padding-bottom: var(--ls-section); }

/* ---------- breadcrumbs ---------- */
.ls-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin: 0; padding: 0; list-style: none; font-size: 15px; font-weight: 600; }
.ls-crumbs li { display: inline-flex; align-items: center; gap: 4px; color: var(--ls-soft); }
.ls-crumbs li + li::before { content: ""; width: 7px; height: 7px; margin: 0 8px 0 4px; border-top: 1.5px solid var(--ls-muted); border-right: 1.5px solid var(--ls-muted); transform: rotate(45deg); }
.ls-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ls-soft); text-decoration: underline; text-decoration-color: var(--ls-line-2); text-underline-offset: 4px; }
.ls-crumbs a:hover { color: var(--ls-ink); text-decoration-color: currentColor; }
.ls-crumbs [aria-current="page"] { color: var(--ls-ink); }

/* ---------- sticker and tags ---------- */
.ls-sticker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 10px;
  color: var(--ls-ink);
  background: var(--ls-paper);
  border: 1.5px solid var(--ls-ink);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transform: rotate(-4deg);
  box-shadow: var(--ls-shadow);
}
.ls-sticker i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3DBE6E; }
.ls-sticker--soon i { background: var(--ls-orange); }
.ls-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ls-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 10px; border-radius: 8px; background: var(--ls-canvas); color: var(--ls-ink-2); font-size: 13px; font-weight: 600; line-height: 1.2; box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls-tag--soon { color: var(--ls-accent-text); background: var(--ls-tint); box-shadow: inset 0 0 0 1px var(--ls-tint-line); }

/* ---------- the poster: the page's orange lead ---------- */
.ls-poster {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: center;
  gap: 24px;
  min-width: 0;
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 64px) clamp(44px, 5vw, 60px);
  color: var(--ls-ink);
  background: var(--ls-orange);
  border-radius: 22px;
  -webkit-mask: radial-gradient(circle at 50% 100%, #0000 6.5px, #000 7px) 0 0 / 22px 100% round;
  mask: radial-gradient(circle at 50% 100%, #0000 6.5px, #000 7px) 0 0 / 22px 100% round;
}
.ls-poster-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ls-plate { display: inline-grid; place-items: center; min-width: 88px; min-height: 64px; padding: 4px; border-radius: 12px; background: var(--ls-paper); }
.ls-plate .tud-logo { --logo-size: 56px; background: var(--ls-paper); border-radius: 8px; }
.ls-poster-brand { margin-top: 22px; font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -0.02em; }
.ls-poster-saving {
  margin-top: 2px;
  font-family: var(--tud-font-secondary);
  font-size: clamp(64px, 9.4vw, 136px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -0.055em;
  overflow-wrap: anywhere;
}
.ls-poster-line { max-width: 40ch; margin-top: 16px; font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; line-height: 1.45; }
.ls-poster-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 26px; }
.ls-poster-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ls-ink); font-size: 16px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.ls-poster-art { justify-self: center; width: min(100%, 300px); }
.ls-poster-art img { width: 100%; height: auto; }
.ls-poster :focus-visible { outline-color: var(--ls-ink); }
@media (max-width: 720px) {
  .ls-poster { grid-template-columns: minmax(0, 1fr); padding: 24px 20px 44px; }
  .ls-poster-art { position: absolute; top: 18px; right: 12px; width: 108px; }
  .ls-poster-top { padding-right: 96px; }
  .ls-poster-actions .ls-btn { flex: 1 1 100%; }
}

/* ---------- deal card ---------- */
.ls-deals { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.ls-deal { display: flex; flex-direction: column; min-width: 0; overflow: hidden; color: var(--ls-ink); text-decoration: none; background: var(--ls-paper); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--ls-line-2); transition: transform 160ms var(--ls-ease), box-shadow 160ms var(--ls-ease); }
.ls-deal:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--ls-line-2), var(--ls-lift); }
.ls-deal-panel { position: relative; display: flex; align-items: flex-end; min-height: 148px; padding: 18px 20px; background: var(--ls-tone, var(--ls-sand)); }
.ls-deal-saving { position: relative; z-index: 1; display: flex; flex-direction: column; max-width: 62%; }
.ls-deal-saving-number { font-family: var(--tud-font-secondary); font-size: 56px; font-weight: 700; line-height: .92; letter-spacing: -0.05em; white-space: nowrap; }
.ls-deal-saving--rs .ls-deal-saving-number { font-size: 38px; }
.ls-deal-saving-rest { font-size: 17px; font-weight: 700; }
.ls-deal-saving--words { font-size: 26px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.ls-deal-art { position: absolute; right: 8px; bottom: 6px; width: 118px; transform: rotate(-4deg); }
.ls-deal-art img { width: 100%; height: auto; }
.ls-deal-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ls-deal-panel--photo .ls-deal-saving { padding: 8px 12px 9px; background: var(--ls-paper); border-radius: 12px; box-shadow: var(--ls-shadow); }
.ls-deal-panel--photo .ls-deal-saving-number { font-size: 40px; }
.ls-deal-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px 20px 20px; }
.ls-deal-brand { display: flex; align-items: center; gap: 12px; }
.ls-deal-brand .tud-logo { box-shadow: inset 0 0 0 1px rgba(20, 20, 18, .1); }
.ls-deal-name { font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.ls-deal-line { color: var(--ls-soft); font-size: 15px; line-height: 1.5; }
.ls-deal .ls-tags { margin-top: auto; padding-top: 4px; }
@media (prefers-reduced-motion: reduce) { .ls-deal, .ls-deal:hover { transform: none; transition: none; } }

.ls-tone-0 { --ls-tone: var(--ls-chai); }
.ls-tone-1 { --ls-tone: var(--ls-sand); }
.ls-tone-2 { --ls-tone: var(--ls-food); }
.ls-tone-3 { --ls-tone: var(--ls-move); }
.ls-tone-4 { --ls-tone: var(--ls-study); }
.ls-tone-5 { --ls-tone: var(--ls-fashion); }
.ls-tone-6 { --ls-tone: var(--ls-lilac); }

/* ---------- brand cards and the invite ---------- */
.ls-brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ls-brand { display: flex; align-items: center; gap: 16px; height: 100%; min-height: 104px; padding: 16px 18px; color: var(--ls-ink); text-decoration: none; background: var(--ls-paper); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls-brand:hover .ls-brand-name { text-decoration: underline; text-underline-offset: 4px; }
.ls-brand .tud-logo { box-shadow: inset 0 0 0 1px rgba(20, 20, 18, .1); }
.ls-brand-text { display: grid; gap: 3px; min-width: 0; }
.ls-brand-name { font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.ls-brand-meta { color: var(--ls-soft); font-size: 14px; line-height: 1.35; }
.ls-brand--invite { background: transparent; box-shadow: none; border: 1.5px dashed var(--ls-control); }
.ls-invite-mark { display: grid; place-items: center; width: 72px; height: 72px; flex: none; border-radius: 18px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls-brand--invite .ls-brand-meta { color: var(--ls-accent-text); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- category tiles: pastel paper ---------- */
.ls-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.ls-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 236px; padding: 20px; overflow: hidden; color: var(--ls-ink); text-decoration: none; background: var(--ls-tile, var(--ls-sand)); border-radius: 16px; }
.ls-tile--fashion { --ls-tile: var(--ls-fashion); }
.ls-tile--chai { --ls-tile: var(--ls-chai); }
.ls-tile--food { --ls-tile: var(--ls-food); }
.ls-tile--move { --ls-tile: var(--ls-move); }
.ls-tile--study { --ls-tile: var(--ls-study); }
.ls-tile--sand { --ls-tile: var(--ls-sand); }
.ls-tile--lilac { --ls-tile: var(--ls-lilac); }
.ls-tile-art { position: absolute; top: 18px; left: 18px; width: 96px; }
.ls-tile-art img { width: 100%; height: auto; }
.ls-tile--soon .ls-tile-art { opacity: .5; }
.ls-tile-name { font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
.ls-tile-state { margin-top: 4px; color: var(--ls-ink-2); font-size: 14px; font-weight: 600; }
a.ls-tile .ls-tile-state { text-decoration: underline; text-underline-offset: 3px; }
a.ls-tile:hover { box-shadow: inset 0 0 0 2px var(--ls-ink); }
@media (max-width: 960px) { .ls-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .ls-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ls-tile { min-height: 168px; padding: 16px; }
  .ls-tile-art { top: 14px; left: 14px; width: 72px; }
  .ls-tile-name { font-size: 17px; }
}

/* ---------- steps: a real sequence ---------- */
.ls-steps { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; counter-reset: ls-step; }
.ls-steps li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-content: start; column-gap: 18px; counter-increment: ls-step; }
.ls-steps li::before { content: counter(ls-step); grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ls-paper); background: var(--ls-ink); font-family: var(--tud-font-secondary); font-size: 17px; font-weight: 700; }
.ls-steps h3 { align-self: center; min-height: 40px; display: flex; align-items: center; font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
.ls-steps p { margin-top: 4px; color: var(--ls-soft); font-size: 16px; line-height: 1.55; }
.ls-steps--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 760px) { .ls-steps--row { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* ---------- trust row ---------- */
.ls-trust { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ls-trust li { display: flex; align-items: flex-start; gap: 12px; color: var(--ls-ink-2); font-size: 16px; font-weight: 600; line-height: 1.45; }
.ls-trust-icon { flex: none; margin-top: 2px; color: var(--ls-ink); }

/* ---------- forms and the sign-up card ---------- */
/* Field shape is not set here or on any page: --ls-control-radius and --ls-control-h (site.css) shape every field, select, code box and search. Buttons stay pills. */
.ls-label { display: block; margin-bottom: 8px; color: var(--ls-ink); font-size: 15px; font-weight: 700; }
.ls-input { width: 100%; min-height: var(--ls-control-h); padding: 12px 16px; border: 1.5px solid var(--ls-control); border-radius: var(--ls-control-radius); color: var(--ls-ink); background: var(--ls-paper); font-size: 17px; }
.ls-input::placeholder { color: #93887E; }
.ls-input:focus-visible { outline: 2px solid var(--ls-ink); outline-offset: 1px; border-color: var(--ls-ink); }
.ls-signup { position: relative; z-index: 1; display: grid; gap: 0; width: 100%; max-width: 480px; padding: clamp(22px, 3vw, 32px); border-radius: 20px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2), var(--ls-lift); }
.ls-signup-title { margin-bottom: 20px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.ls-signup .ls-btn { margin-top: 14px; }
.ls-signup-note { margin-top: 14px; color: var(--ls-soft); font-size: 14px; line-height: 1.5; }

/* ---------- the White edge pass ---------- */
.ls-pass-stage { container-type: inline-size; perspective: 1200px; }
.ls-pass { position: relative; display: block; width: 100%; aspect-ratio: 85.6 / 53.98; overflow: hidden; border-radius: 6.4cqw; background: linear-gradient(172deg, #FFFFFF 0%, #F8F6F2 55%, #F0EDE8 100%); box-shadow: var(--tud-shadow-card-raised); transform: rotateX(var(--ls-rx, 0deg)) rotateY(var(--ls-ry, 0deg)); transform-style: preserve-3d; transition: transform 500ms var(--ls-ease); }
.ls-pass-stage.is-tilting .ls-pass { transition: none; }
.ls-pass::before { content: ""; position: absolute; inset: 0; background: linear-gradient(118deg, transparent 18%, rgba(255, 255, 255, .75) 32%, transparent 46%, transparent 58%, rgba(255, 255, 255, .5) 66%, transparent 76%); pointer-events: none; }
.ls-pass-sheen { position: absolute; inset: -20%; background: linear-gradient(105deg, transparent calc(var(--ls-sheen, 50%) - 16%), rgba(255, 237, 224, .55) calc(var(--ls-sheen, 50%) - 4%), rgba(214, 238, 247, .45) var(--ls-sheen, 50%), transparent calc(var(--ls-sheen, 50%) + 14%)); mix-blend-mode: multiply; opacity: .5; pointer-events: none; }
.ls-pass-symbol { position: absolute; top: 6.1cqw; right: 6.1cqw; width: 6.4cqw; height: auto; }
.ls-pass-top { position: absolute; top: 5.8cqw; left: 5.8cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 1.2cqw; }
.ls-pass-wordmark { width: 28cqw; height: auto; margin-bottom: 1.1cqw; }
.ls-pass-kind { color: #6B6660; font-size: 3.6cqw; font-weight: 500; line-height: 1.2; }
.ls-pass-chip { display: inline-flex; align-items: center; gap: 1.2cqw; height: 6.4cqw; padding: 0 2.6cqw 0 1.2cqw; border-radius: 999px; background: #161512; color: #FFFFFF; font-size: 3.3cqw; font-weight: 700; line-height: 1; }
.ls-pass-chip i { width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: var(--ls-orange); }
.ls-pass-bottom { position: absolute; left: 5.8cqw; right: 5.8cqw; bottom: 7cqw; display: flex; align-items: flex-end; justify-content: space-between; gap: 3.5cqw; }
.ls-pass-who { display: flex; flex-direction: column; min-width: 0; gap: .6cqw; }
.ls-pass-who strong { overflow: hidden; color: #161512; font-size: 6.6cqw; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; text-overflow: ellipsis; white-space: nowrap; }
.ls-pass-who span { overflow: hidden; color: #2B2722; font-size: 3.9cqw; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.ls-pass-valid { display: flex; flex-direction: column; align-items: flex-end; gap: .6cqw; text-align: right; }
.ls-pass-valid span { color: rgba(22, 21, 18, .8); font-size: 3.2cqw; font-weight: 500; }
.ls-pass-valid strong { color: #161512; font-size: 4.3cqw; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.ls-pass-edge { position: absolute; left: 0; right: 0; bottom: 0; height: 2.4cqw; background: linear-gradient(90deg, #FF5C26 0%, #FF6A33 24%, #FF9E73 calc(var(--ls-sheen, 50%) - 6%), #FFE3D3 var(--ls-sheen, 50%), #FF7A47 calc(var(--ls-sheen, 50%) + 8%), #FF5C26 86%, #EB501D 100%); }
@media (prefers-reduced-motion: reduce) { .ls-pass { transform: none !important; transition: none; } }

/* ---------- questions ----------
   One accordion for the whole site (the homepage's, Addenda 34 and 35): a ruled row, the bare orange plus at
   the rule's end, the answer growing open and shrinking shut (site-launch.js animates its height, 380 ms each
   way, the open on a soft ease-out with the body fading and rising in from 60 ms, the close on the same curve
   run backwards with the body fading and sinking over the first 200 ms). While the script runs a row, .is-opening
   or .is-closing marks the way it is heading, so the plus's turn keeps step with the height, and the details
   element only hides the answer once it has shrunk to nothing. Without the script the details toggle natively.
   Markup: .ls-faq > details > summary (text + span.ls-faq-icon) + .ls-faq-answer > .ls-faq-body.
   .ls-faq--compact is the smaller one for steps nested in a card. Every colour is a --ls token, so the
   dark theme follows. */
.ls-faq { border-top: 1px solid var(--ls-line-2); }
.ls-faq details { border-bottom: 1px solid var(--ls-line-2); }
.ls-faq summary { position: relative; display: flex; align-items: center; min-height: 68px; padding: 14px 40px 14px 0; color: var(--ls-ink); font-size: 18px; font-weight: 700; line-height: 1.35; cursor: pointer; list-style: none; }
.ls-faq summary::-webkit-details-marker { display: none; }
.ls-faq summary::marker { content: none; }
.ls-faq summary::after { content: none; }
/* The icon is the bare plus in the link's deep orange, a 2px stroke with round caps, no circle. Open, the upright
   stroke turns flat onto the other: a minus. */
.ls-faq-icon { position: absolute; top: 50%; right: 0; width: 16px; height: 16px; margin-top: -8px; }
.ls-faq-icon::before, .ls-faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 1px; background: var(--ls-accent-text); transition: transform 260ms var(--ls-ease), background-color 160ms var(--ls-ease); }
.ls-faq-icon::after { transform: rotate(90deg); }
.ls-faq details[open]:not(.is-closing) .ls-faq-icon::after { transform: rotate(180deg); }
.ls-faq details.is-opening .ls-faq-icon::before, .ls-faq details.is-opening .ls-faq-icon::after { transition: transform 380ms cubic-bezier(.22, .61, .36, 1), background-color 160ms var(--ls-ease); }
.ls-faq details.is-closing .ls-faq-icon::before, .ls-faq details.is-closing .ls-faq-icon::after { transition: transform 380ms cubic-bezier(.64, 0, .78, .39), background-color 160ms var(--ls-ease); }
@media (hover: hover) { .ls-faq summary:hover .ls-faq-icon::before, .ls-faq summary:hover .ls-faq-icon::after { background: var(--ls-ink); } }
.ls-faq-answer { display: grid; grid-template-rows: 0fr; max-width: 66ch; padding: 0; color: var(--ls-soft); font-size: 16px; line-height: 1.65; transition: grid-template-rows 380ms cubic-bezier(.22, .61, .36, 1); }
.ls-faq details[open] .ls-faq-answer { grid-template-rows: 1fr; }
.ls-faq-body { min-height: 0; overflow: hidden; padding-right: 40px; }
.ls-faq-body > :last-child { padding-bottom: 22px; }
.ls-faq-body p + p { margin-top: 10px; }
.ls-faq-body a { color: var(--ls-accent-text); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.ls-faq-body a:hover { color: var(--ls-ink); }
.ls-faq--compact { margin-top: 20px; }
.ls-faq--compact summary { min-height: 48px; padding: 10px 28px 10px 0; font-size: 15px; }
.ls-faq--compact .ls-faq-icon { width: 12px; height: 12px; margin-top: -6px; }
.ls-faq--compact .ls-faq-icon::before, .ls-faq--compact .ls-faq-icon::after { width: 10px; margin-left: -5px; }
.ls-faq--compact .ls-faq-answer { font-size: 14px; }
.ls-faq--compact .ls-faq-body { padding-right: 28px; }
.ls-faq--compact .ls-faq-body > :last-child { padding-bottom: 14px; }
.ls-faq--compact details:last-child { border-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .ls-faq-answer, .ls-faq-icon::before, .ls-faq-icon::after { transition: none; } }
@media (forced-colors: active) { .ls-faq-icon::before, .ls-faq-icon::after { background: CanvasText; } }

/* ---------- guide cards ---------- */
.ls-guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.ls-guide { display: flex; flex-direction: column; gap: 8px; min-height: 140px; padding: 24px 26px; color: var(--ls-ink); text-decoration: none; background: var(--ls-paper); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls-guide-title { font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.ls-guide-blurb { color: var(--ls-soft); font-size: 15px; line-height: 1.5; }
.ls-guide-go { margin-top: auto; padding-top: 6px; color: var(--ls-accent-text); font-size: 15px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.ls-guide:hover .ls-guide-go { text-decoration-thickness: 2.5px; }

/* ---------- brands and campus ---------- */
.ls-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border-radius: 18px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls-door { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 96px; align-items: center; gap: 20px; padding: 26px 28px; color: var(--ls-ink); text-decoration: none; }
.ls-door + .ls-door { border-left: 1px solid var(--ls-line-2); }
.ls-door-text { display: grid; gap: 6px; }
.ls-door-text strong { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.ls-door-text > span:not(.ls-door-go) { color: var(--ls-soft); font-size: 15px; line-height: 1.5; }
.ls-door-go { color: var(--ls-accent-text); font-size: 15px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.ls-door-art { width: 96px; }
@media (max-width: 760px) {
  .ls-doors { grid-template-columns: minmax(0, 1fr); }
  .ls-door + .ls-door { border-left: 0; border-top: 1px solid var(--ls-line-2); }
  .ls-door { grid-template-columns: minmax(0, 1fr) 72px; padding: 22px 20px; }
  .ls-door-art { width: 72px; }
}

/* ---------- the closing band ---------- */
.ls-band { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 140px; align-items: center; gap: 20px 32px; padding: 30px 36px; border-radius: 20px; background: var(--ls-chai); }
.ls-band h2 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.ls-band p { max-width: 50ch; margin-top: 8px; color: var(--ls-ink-2); font-size: 16px; line-height: 1.55; }
.ls-band-art { width: 140px; }
@media (max-width: 760px) {
  .ls-band { grid-template-columns: minmax(0, 1fr) 84px; padding: 24px 20px; }
  .ls-band-copy { grid-column: 1; grid-row: 1; }
  .ls-band-art { grid-column: 2; grid-row: 1; width: 84px; align-self: start; }
  .ls-band .ls-btn { grid-column: 1 / -1; width: 100%; }
}

/* ---------- page heads ---------- */
.ls-page-head { padding-top: clamp(28px, 4vw, 56px); }
.ls-page-head .ls-crumbs { margin-bottom: 18px; }
.ls-page-head .ls-lead { margin-top: 18px; }

/* =========================================================================
   Homepage
   ========================================================================= */
.ls-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(32px, 5vw, 72px); padding-top: clamp(40px, 6vw, 88px); }
.ls-hero h1 { font-size: clamp(48px, 6.4vw, 92px); line-height: .96; letter-spacing: -0.05em; }
.ls-hero .ls-lead { margin-top: 24px; }
.ls-hero .ls-trust { margin-top: 28px; }
.ls-hero-side { position: relative; display: grid; justify-items: end; padding-top: clamp(72px, 9vw, 120px); }
.ls-hero-side .ls-pass-stage { position: absolute; top: 0; right: 4%; z-index: 0; width: min(64%, 330px); transform: rotate(-6deg); }
.ls-hero-side .ls-signup { margin-top: 0; }
.ls-hero-walker { position: absolute; top: 0; left: 2%; z-index: 0; width: 128px; pointer-events: none; }
[data-ls-state] .ls-hero-walker { display: none; }
.ls-hero-walker img { width: 100%; height: auto; }

/* Signed in: the card becomes the account's next step. */
.ls-account { display: none; position: relative; z-index: 1; width: 100%; max-width: 480px; padding: clamp(22px, 3vw, 32px); border-radius: 20px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2), var(--ls-lift); }
.ls-account h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.025em; }
.ls-account p { margin-top: 10px; color: var(--ls-soft); font-size: 16px; line-height: 1.55; }
.ls-account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
[data-ls-state="signed"] .ls-hero .ls-signup, [data-ls-state="verified"] .ls-hero .ls-signup { display: none; }
[data-ls-state="signed"] .ls-account, [data-ls-state="verified"] .ls-account { display: block; }
[data-ls-state="verified"] .ls-hero-side { padding-top: 0; justify-items: stretch; }
[data-ls-state="verified"] .ls-hero-side .ls-pass-stage { position: relative; top: auto; right: auto; width: 100%; max-width: 480px; margin-bottom: 20px; transform: rotate(-3deg); justify-self: end; }
[data-ls-state="verified"] .ls-account { justify-self: end; }

.ls-home-poster { margin-top: var(--ls-section); }
.ls-home-poster h2 { margin-bottom: 24px; }

/* The app section keeps the launch homepage's real phones. */
.ls-app { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(32px, 6vw, 88px); }
.ls-app-copy .ls-lead { margin-top: 18px; }
.ls-app-stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ls-store { display: inline-grid; grid-template-columns: 28px auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; min-height: 56px; padding: 8px 20px 8px 16px; border-radius: 14px; color: var(--ls-paper); background: var(--ls-ink); text-decoration: none; }
/* The marks as the stores draw them: the white Apple logo, the four-colour Play triangle, on the black badge. */
.ls-store img { grid-row: 1 / 3; }
.ls-store span { font-size: 12px; font-weight: 500; line-height: 1.1; }
.ls-store strong { font-size: 18px; font-weight: 700; line-height: 1.1; }
.ls-phones { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 24px; max-width: 560px; margin-left: auto; }
.ls-phones figure { margin: 0; }
.ls-phones figcaption { margin-bottom: 12px; color: var(--ls-soft); font-size: 14px; font-weight: 600; text-align: center; }
.ls-phones img { width: 100%; height: auto; }
.ls-pixel { position: relative; }
.ls-pixel-screen { position: absolute; inset: 2.6% 5.2% 2.6% 5.4%; width: 89.4% !important; height: 94.8% !important; object-fit: cover; border-radius: 6%; }
.ls-pixel-frame { position: relative; }
.ls-app-note { margin-top: 12px; color: var(--ls-muted); font-size: 13px; text-align: right; }

.ls-home-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }

@media (max-width: 960px) {
  .ls-hero { grid-template-columns: minmax(0, 1fr); }
  .ls-hero-side { justify-items: start; padding-top: 0; margin-top: 8px; }
  .ls-hero-side .ls-pass-stage { display: none; }
  [data-ls-state="verified"] .ls-hero-side .ls-pass-stage { display: block; justify-self: start; }
  [data-ls-state="verified"] .ls-account { justify-self: start; }
  .ls-hero-walker { display: none; }
  .ls-app { grid-template-columns: minmax(0, 1fr); }
  .ls-phones { margin: 0 auto; }
  .ls-home-faq { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .ls-hero { padding-top: 28px; }
  .ls-hero h1 { font-size: clamp(44px, 12.4vw, 56px); }
  .ls-signup { padding: 20px; border-radius: 18px; }
  .ls-phones { gap: 14px; }
}

.ls-home-more { margin-top: 20px; }
.ls-unavailable { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 24px; padding: 28px; border-radius: 18px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls-unavailable h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.ls-unavailable p { margin-top: 6px; color: var(--ls-soft); }
.ls-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .6fr); align-items: center; gap: 32px; }
.ls-how .ls-steps { max-width: 560px; }
.ls-how-link { margin-top: 18px; }
.ls-how-art { justify-self: center; width: min(100%, 280px); transform: rotate(4deg); }
@media (max-width: 760px) { .ls-how { grid-template-columns: minmax(0, 1fr); } .ls-how-art { display: none; } }

/* Brand shops on the homepage, and the product card everywhere. */
.ls-shop + .ls-shop { margin-top: 36px; }
.ls-shop-head { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 18px; color: var(--ls-ink); text-decoration: none; }
.ls-shop-head strong { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.ls-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 20px; }
.ls-product { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--ls-ink); text-decoration: none; }
.ls-product-photo { display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls-product-photo img { width: 100%; height: 100%; object-fit: cover; }
.ls-product-fallback { width: 60%; opacity: .7; }
.ls-product-name { font-size: 16px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ls-product:hover .ls-product-name { text-decoration: underline; text-underline-offset: 3px; }
.ls-product-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.ls-product-price strong { font-family: var(--tud-font-secondary); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ls-product-price s { color: var(--ls-muted); font-size: 14px; }

/* =========================================================================
   Deals directory and category pages
   ========================================================================= */
.ls-page { display: block; }
.ls-hub-head { display: grid; grid-template-columns: minmax(0, 1fr) 200px; align-items: end; gap: 32px; }
.ls-hub-head h1 { max-width: 13ch; }
.ls-hub-art { width: 200px; }
@media (max-width: 760px) { .ls-hub-head { grid-template-columns: minmax(0, 1fr); } .ls-hub-art { display: none; } }

.ls-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.ls-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; color: var(--ls-ink); background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); font-size: 15px; font-weight: 600; text-decoration: none; }
.ls-chip:hover { box-shadow: inset 0 0 0 1.5px var(--ls-ink); }
.ls-chip[aria-current="true"] { color: var(--ls-paper); background: var(--ls-ink); box-shadow: none; }
@media (max-width: 600px) {
  .ls-chips { flex-wrap: nowrap; margin-inline: calc(var(--ls-gutter) * -1); padding: 2px var(--ls-gutter) 6px; overflow-x: auto; scrollbar-width: none; }
  .ls-chips::-webkit-scrollbar { display: none; }
  .ls-chip { flex: none; }
}
.ls-feature-title { margin-bottom: 20px; }
.ls-count { color: var(--ls-soft); font-size: 15px; font-weight: 600; }
.ls-empty { display: grid; justify-items: center; gap: 10px; max-width: 520px; margin: 40px auto 0; padding: 32px 24px; text-align: center; }
.ls-empty h2, .ls-empty h3 { font-size: 26px; font-weight: 800; letter-spacing: -0.025em; }
.ls-empty p { color: var(--ls-soft); font-size: 16px; line-height: 1.55; }
.ls-empty .ls-btn { margin-top: 8px; }
.ls-empty-art { width: 140px; }
.ls-empty--soft { max-width: none; margin: 0; padding: 36px 28px; border-radius: 18px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls-empty-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: 8px; }

.ls-cat-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: center; gap: 24px; margin-top: clamp(20px, 3vw, 32px); padding: clamp(24px, 4vw, 48px); border-radius: 22px; background: var(--ls-tile); }
.ls-cat-hero .ls-crumbs { margin-bottom: 14px; }
.ls-cat-hero .ls-crumbs a, .ls-cat-hero .ls-crumbs li { color: var(--ls-ink-2); }
.ls-cat-hero .ls-crumbs a { text-decoration-color: rgba(20, 20, 18, .3); }
.ls-cat-hero h1 { max-width: 14ch; }
.ls-cat-hero .ls-lead { margin-top: 16px; color: var(--ls-ink-2); }
.ls-cat-art { width: 240px; transform: rotate(-4deg); }
@media (max-width: 760px) {
  .ls-cat-hero { grid-template-columns: minmax(0, 1fr) 96px; align-items: start; padding: 22px 20px; }
  .ls-cat-art { width: 96px; margin-top: 52px; }
  .ls-cat-hero .ls-lead { grid-column: 1 / -1; }
}
.ls-invite-wide { min-height: 0; }
.ls-cat-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.ls-cat-about h2 { margin-bottom: 18px; }
.ls-cat-about p { color: var(--ls-soft); font-size: 17px; line-height: 1.65; }
.ls-cat-about p + p { margin-top: 14px; }
@media (max-width: 860px) { .ls-cat-about { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
   Brand pages
   ========================================================================= */
.ls .brand-custom.ls-brand-page { padding-top: 0; }
.ls-crumbs-row { padding-block: 10px; }
.ls .brand-crumbs { margin-bottom: 0; }

/* The launch hero: orange, full bleed, a scalloped bottom edge. */
.ls-brand-hero {
  position: relative;
  padding: clamp(32px, 5vw, 64px) 0 clamp(56px, 6vw, 80px);
  color: var(--ls-ink);
  background: var(--ls-orange);
  -webkit-mask: radial-gradient(circle at 50% 100%, #0000 9.5px, #000 10px) 0 0 / 32px 100% repeat-x;
  mask: radial-gradient(circle at 50% 100%, #0000 9.5px, #000 10px) 0 0 / 32px 100% repeat-x;
}
.ls-brand-hero-inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: center; gap: 32px; }
.ls-brand-hero .ls-plate { min-width: 0; min-height: 0; padding: 6px; }
.ls-brand-hero .ls-plate .tud-logo.brand-identity-logo { --logo-size: 64px; display: inline-grid; width: var(--logo-size); height: var(--logo-size); margin: 0; padding: 0; border-radius: 10px; background: var(--logo, none) 0 0 / 40000% 40000% no-repeat, var(--ls-paper); box-shadow: none; }
.ls-brand-hero .ls-plate .tud-logo.brand-identity-logo:not(:has(> img)) { background: var(--tud-logo-tone, var(--ls-sand)); }
.ls-brand-hero .page-title { margin-top: 22px; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -0.04em; }
.ls-hero-saving { margin-top: 4px; font-family: var(--tud-font-secondary); font-size: clamp(72px, 10.5vw, 152px); font-weight: 700; line-height: .9; letter-spacing: -0.055em; overflow-wrap: anywhere; }
.ls-brand-hero .lede { max-width: 44ch; margin-top: 18px; color: var(--ls-ink); font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; line-height: 1.5; }
.ls-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-top: 28px; }
.ls-hero-actions .brand-offer-action { margin: 0; }
.ls-hero-actions .btn { min-height: 52px; padding-inline: 28px; font-size: 17px; }
.ls-hero-actions .btn:disabled { color: var(--ls-paper); background: var(--ls-ink); opacity: .7; }
.ls-brand-hero-art { justify-self: center; width: min(100%, 320px); }
.ls-brand-hero :focus-visible { outline-color: var(--ls-ink); }
@media (max-width: 760px) {
  .ls-brand-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .ls-brand-hero-art { position: absolute; top: 24px; right: var(--ls-gutter); width: 104px; }
  .ls-brand-hero .ls-poster-top { padding-right: 104px; }
  .ls-hero-actions .brand-offer-action, .ls-hero-actions .brand-offer-action .btn { width: 100%; }
}

.ls .brand-section { margin-top: var(--ls-section); }
.ls .brand-section-title { margin-bottom: 24px; font-size: clamp(30px, 3.1vw, 44px); font-weight: 800; line-height: 1.12; letter-spacing: -0.035em; }
.ls .brand-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.ls .brand-section-head .brand-section-title { margin-bottom: 0; }
.ls-brand-page .brand-section:first-child { margin-top: clamp(40px, 5vw, 64px); }

.ls-terms { display: grid; gap: 12px; max-width: var(--ls-read); margin: 0; padding: 0; list-style: none; }
.ls-terms li { position: relative; padding-left: 26px; color: var(--ls-ink-2); font-size: 18px; line-height: 1.55; }
.ls-terms li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--ls-ink); }

/* Offer rows (more than one offer, or a brand's own design): the apps' row card. */
.ls .brand-offers { display: grid; gap: 16px; }
.ls .brand-offer { --offer-panel: 128px; padding: 16px 24px 16px 16px; border: 0; border-radius: 18px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls .brand-offer--lead { --offer-panel: 156px; }
.ls .brand-offer-panel { border-radius: 12px; }
.ls .brand-offer-discount { font-family: var(--tud-font-secondary); font-size: clamp(30px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.04em; }
.ls .brand-offer-title { font-weight: 700; }
.ls .brand-offer-desc { color: var(--ls-soft); }
.ls .brand-offer-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; font-family: var(--tud-font-primary); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ls .brand-offer-meta li { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 10px; border-radius: 8px; background: var(--ls-canvas); color: var(--ls-ink-2); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls .deal-badge { min-height: 26px; padding: 3px 10px; border-radius: 8px; font-family: var(--tud-font-primary); font-size: 13px; letter-spacing: 0; text-transform: none; }
@media (max-width: 600px) {
  .ls .brand-offer, .ls .brand-offer--lead { --offer-panel: 88px; grid-template-columns: var(--offer-panel) minmax(0, 1fr); padding: 14px; column-gap: 16px; }
  .ls .brand-offer-panel { align-self: start; width: var(--offer-panel); max-width: none; height: var(--offer-panel); aspect-ratio: 1; }
  .ls .brand-offer-action { grid-column: 1 / -1; justify-self: stretch; }
  .ls .brand-offer-action .btn { width: 100%; }
}

/* Steps on brand pages keep their hooks and wear the ls-steps style. */
.ls .redeem-steps.ls-steps { display: grid; padding: 0; border: 0; }
.ls .redeem-step { padding: 0; border: 0; border-radius: 0; background: none; }

.ls-about-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.ls-about-faq .brand-section-title { margin-bottom: 18px; }
.ls .brand-about p { max-width: 60ch; color: var(--ls-soft); font-size: 16px; line-height: 1.65; }
.ls .brand-about p:first-of-type { color: var(--ls-ink); font-weight: 600; }
.ls .brand-about p + p { margin-top: 14px; }
@media (max-width: 860px) { .ls-about-faq { grid-template-columns: minmax(0, 1fr); } }
.ls-similar { margin-bottom: 20px; }

/* The brand page's closing band keeps app.js's .brand-cta hooks. */
.ls .ls-band.brand-cta { overflow: visible; color: var(--ls-ink); }
.ls .ls-band.brand-cta::after { display: none; }
.ls .ls-band.brand-cta h2 { max-width: 24ch; color: var(--ls-ink); }
.ls .ls-band.brand-cta p { color: var(--ls-ink-2); opacity: 1; }

/* On a phone the homepage's other deals swipe sideways instead of stacking. */
@media (max-width: 600px) {
  .ls-home-more .ls-deals { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; gap: 12px; margin-inline: calc(var(--ls-gutter) * -1); padding: 2px var(--ls-gutter) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ls-gutter); scrollbar-width: none; }
  .ls-home-more .ls-deals::-webkit-scrollbar { display: none; }
  .ls-home-more .ls-deal { scroll-snap-align: start; }
}

/* =========================================================================
   Brand shops, product pages and bookings (shop.js and bookings.js keep
   every hook; this only restyles them)
   ========================================================================= */
/* ---------- brand shops ---------- */
.ls .shop-stall { margin-bottom: 32px; border-radius: 16px; }
.ls .shop-stall-id .tud-logo.shop-stall-logo { width: var(--logo-size); height: var(--logo-size); margin: 0; padding: 0; border: 0; border-radius: calc(var(--logo-size) * 0.24); background: var(--logo, none) 0 0 / 40000% 40000% no-repeat, var(--tud-color-bg-surface); box-shadow: inset 0 0 0 1px rgba(20, 20, 18, .1); }
.ls .shop-stall-id .tud-logo.shop-stall-logo:not(:has(> img)) { background: var(--tud-logo-tone, var(--tud-color-deal-panel-1)); }
.ls .shop-stall-name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.ls .shop-head .brand-section-title { margin-bottom: 14px; }
.ls .shop-terms { font-size: 17px; line-height: 1.6; }
.ls .shop-filter { font-weight: 600; }
.ls .shop-card-photo { border-radius: 12px; }
.ls .shop-card-title { font-weight: 600; }
.ls .shop-price-student, .ls .pdp-price-student strong, .ls .slip-total strong, .ls .bk-tier-price, .ls .bk-total { font-family: var(--tud-font-secondary); font-variant-numeric: tabular-nums; }
.ls .shop-price-student { font-weight: 700; letter-spacing: -0.02em; }
.ls .pdp-brand a { gap: 12px; font-weight: 700; }
.ls .pdp-brand .tud-logo { box-shadow: inset 0 0 0 1px rgba(20, 20, 18, .1); }
.ls .pdp-title { font-weight: 800; letter-spacing: -0.04em; }
.ls .pdp-price { border-color: var(--ls-line-2); }
.ls .pdp-price-student strong { font-size: 40px; font-weight: 700; letter-spacing: -0.04em; }
.ls .pdp-size span:not(.sr-only) { border-radius: 10px; font-weight: 700; }
.ls .slip { border-radius: 16px; }

/* ---------- bookings ---------- */
.ls .bk-page .shop-stall { grid-template-columns: minmax(0, 1fr); }
.ls .bk-head { margin-block: 8px 32px; }
.ls .bk-head .pdp-title { font-size: clamp(36px, 4.4vw, 60px); }
.ls .bk-terms { border-radius: 16px; }
.ls .bk-terms, .ls .pdp-info .bk-terms { box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls .bk-term-title { font-size: 17px; }
.ls .bk-brand-card { border-radius: 16px; background: var(--tud-color-accent-tint); }
.ls .bk-rail-title { font-size: 22px; letter-spacing: -0.02em; }
.ls .bk-offer--plain { border-radius: 16px; box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls .bk-offer--plain .shop-card-title { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; }
.ls .bk-offer--plain .shop-price-student { font-size: 24px; }
.ls .bk-tier { border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls .bk-chips .paid-option { font-weight: 600; }
.ls .bk-chips .paid-option:has(input:checked) { color: var(--tud-color-text-inverse); background: var(--ls-ink); box-shadow: none; }
.ls .bk-row .tud-logo { --logo-size: 56px; border-radius: 13px; background: var(--logo, none) 0 0 / 40000% 40000% no-repeat, var(--tud-color-bg-surface); }
.ls .bk-row .tud-logo:not(:has(> img)) { background: var(--tud-logo-tone, var(--tud-color-deal-panel-1)); }
@media (max-width: 520px) { .ls .bk-row .tud-logo { --logo-size: 48px; border-radius: 11px; } }

/* One offering with no photos: the details on the left, and price, picker and
   action in a ticket on the right that stays in view while the student reads.
   The three groups are transparent to layout everywhere else, so a page with
   photos and every small screen keep the single column they had. */
.ls .pdp-info > :is(.bk-info-head, .bk-ticket, .bk-info-body) { display: contents; }
@media (min-width: 900px) {
  .ls .pdp.bk-pdp--plain { grid-template-columns: minmax(0, 1fr); }
  .ls .bk-pdp--plain .pdp-info { position: static; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); grid-template-rows: auto 1fr; grid-template-areas: "head ticket" "body ticket"; gap: 32px clamp(40px, 6vw, 88px); align-items: start; }
  .ls .bk-pdp--plain .pdp-info > :is(.bk-info-head, .bk-ticket, .bk-info-body) { display: grid; align-content: start; gap: var(--tud-space-5); min-width: 0; }
  .ls .bk-pdp--plain .bk-info-head { grid-area: head; }
  .ls .bk-pdp--plain .bk-info-body { grid-area: body; }
  .ls .bk-pdp--plain .bk-info-head .pdp-title { max-width: 18ch; font-size: clamp(40px, 4.6vw, 64px); line-height: 1.02; }
  .ls .bk-pdp--plain .bk-ticket { grid-area: ticket; position: sticky; top: calc(var(--site-header-h, 76px) + 24px); padding: 8px 24px 24px; border-radius: 16px; background: var(--tud-color-bg-surface); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
  .ls .bk-pdp--plain .bk-ticket .pdp-price { border-top: 0; }
}
.ls .bk-buy .bk-hours { padding-bottom: 14px; border-bottom: 1px solid var(--tud-color-border-default); }
.ls .bk-buy .bk-chips { gap: 8px; }


/* ---------- split, guides hub, how it works ---------- */
.ls-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.ls-guide--lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) clamp(120px, 16vw, 200px); align-items: center; gap: 24px; min-height: 0; padding: clamp(24px, 3.4vw, 44px); background: var(--ls-chai); box-shadow: none; }
.ls-guide-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ls-guide--lead .ls-guide-title { max-width: 18ch; font-size: clamp(26px, 3vw, 38px); line-height: 1.08; letter-spacing: -0.03em; }
.ls-guide--lead .ls-guide-blurb { max-width: 46ch; color: var(--ls-ink-2); font-size: 17px; }
.ls-guide--lead .ls-guide-go { color: var(--ls-ink); }
.ls-guide-art img { display: block; width: 100%; height: auto; }
.ls-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.ls-way { padding: 24px 26px; background: var(--ls-paper); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls-way:nth-child(1) { background: var(--ls-fashion); box-shadow: none; }
.ls-way:nth-child(2) { background: var(--ls-food); box-shadow: none; }
.ls-way:nth-child(3) { background: var(--ls-sand); box-shadow: none; }
.ls-way h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.ls-way p { margin-top: 8px; color: var(--ls-ink-2); font-size: 16px; line-height: 1.5; }
.ls-hub-head .ls-trust { margin-top: 24px; }
@media (max-width: 960px) { .ls-split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .ls-ways { grid-template-columns: minmax(0, 1fr); }
  .ls-guide--lead { grid-template-columns: minmax(0, 1fr); }
  .ls-guide--lead .ls-guide-art { display: none; }
}

/* ---------- reading pages: guides and the legal set ---------- */
.ls .legal { width: min(100% - (var(--ls-gutter) * 2), var(--ls-read)); padding-top: clamp(28px, 4vw, 56px); }
.ls .legal-header { margin-bottom: clamp(28px, 4vw, 44px); }
.ls .legal-header .ls-crumbs { margin-bottom: 18px; }
.ls .legal .page-title { max-width: 18ch; }
.ls .legal-effective { margin-top: 14px; color: var(--ls-muted); font-family: inherit; font-size: 14px; font-weight: 600; }
.ls .legal-intro { margin-top: 22px; color: var(--ls-ink-2); font-size: clamp(18px, 1.5vw, 20px); font-weight: 500; line-height: 1.6; }
.ls .legal h2 { margin-bottom: 12px; font-size: clamp(22px, 2.2vw, 27px); font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; }
.ls .legal h3 { margin: 22px 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -0.015em; }
.ls .legal :is(p, ul, ol) { color: var(--ls-soft); font-size: 17px; line-height: 1.72; }
.ls .legal ol { margin: 0 0 14px; padding-left: 1.4em; }
.ls .legal li { margin-bottom: 8px; }
.ls .legal li::marker { color: var(--ls-ink); font-weight: 700; }
.ls .legal strong { color: var(--ls-ink); }
.ls .legal a { color: var(--ls-ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.ls .legal a:hover { color: var(--ls-accent-text); }
.ls .legal section { margin-bottom: clamp(32px, 4vw, 44px); scroll-margin-top: 96px; }
.ls .legal-art { width: clamp(96px, 12vw, 132px); }
.ls .support-contact { padding: 22px 24px; color: var(--ls-ink); font-size: 17px; font-weight: 600; background: var(--ls-chai); border-radius: 16px; }
.ls .legal-cross { border-top-color: var(--ls-line-2); }
.ls-toc { margin: 0 0 clamp(32px, 4vw, 48px); padding: 20px 24px 22px; background: var(--ls-paper); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls .legal .ls-toc-title { margin-bottom: 10px; font-size: 15px; font-weight: 700; letter-spacing: 0; }
.ls .legal .ls-toc ol { margin: 0; padding-left: 1.4em; columns: 2; column-gap: 32px; font-size: 15px; line-height: 1.45; }
.ls .legal .ls-toc li { break-inside: avoid; margin-bottom: 8px; }
.ls .legal .ls-toc a { color: var(--ls-ink-2); font-weight: 600; text-decoration-color: var(--ls-line-2); }
.ls .legal .ls-toc a:hover { text-decoration-color: currentColor; }
@media (max-width: 760px) { .ls .legal .ls-toc ol { columns: 1; } }
/* ---------- Doodle hover, the live Setup page's response on every doodle ----------
   A hand-drawn doodle tilts three degrees and grows four percent over the
   site's base duration and standard ease, exactly as the Setup steps do. The
   motion sits on the picture inside the .theme-art wrapper, not on the wrapper,
   so a doodle that rests at an angle, is centred with a translate or is moved
   by a scroll reveal keeps that placement and the hover just adds to it. Only
   the picture on show is drawn, so the ink and orange pair move as one in both
   themes. A doodle inside a card or ticket answers to the card's hover or
   keyboard focus, a standalone doodle answers to its own hover, and --dh-r
   alternates the lean so a row does not all tip one way. The marks site.css
   already moves (.step-card, .cat-card, .enforce-art, .legal-art, .installed-nod,
   .state-art, .deal-panel--doodle) are left to it. The 3D models, logo, photos,
   brand logos and app screenshots are not .theme-art and never matched. The home
   hero walker and the portal screenshot poster are .theme-art and are left out by name.
   The company pages set pointer-events: none on their drawings so a click passes through to the
   card under them; the picture takes pointer events back so a standalone doodle can feel its hover,
   while a doodle in a card still answers to the card. */
.theme-art { --dh-r: -3deg; }
:where(main :is(section, header):nth-of-type(even)) .theme-art { --dh-r: 3deg; }
:is(.ls-tile, .ab-ticket, .df-feature, .df-card, .ab-beliefs > li, .cb-card, .ct-need, .hw-way, .gd-ticket, .ls-deal, .ls-guide, .ls-app-stage):nth-child(odd) .theme-art { --dh-r: -3deg; }
:is(.ls-tile, .ab-ticket, .df-feature, .df-card, .ab-beliefs > li, .cb-card, .ct-need, .hw-way, .gd-ticket, .ls-deal, .ls-guide, .ls-app-stage):nth-child(even) .theme-art { --dh-r: 3deg; }
/* The Setup steps copy the live step cards, which all lean the same way: three degrees clockwise. */
.su-step .theme-art { --dh-r: 3deg; }
img.doodle-tilt { --dh-r: -3deg; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .theme-art:not(.enforce-art, .legal-art, .installed-nod, .state-art, .hh-walk, .portal-demo-poster, .step-card .theme-art, .cat-card .theme-art, .deal-panel--doodle .theme-art) > img,
  img.doodle-tilt {
    transition: transform var(--tud-duration-base) var(--tud-ease-standard);
  }
  .theme-art:not(.enforce-art, .legal-art, .installed-nod, .state-art, .hh-walk, .portal-demo-poster, .step-card .theme-art, .cat-card .theme-art, .deal-panel--doodle .theme-art):hover > img,
  :is(.ls-tile, .ab-ticket, .df-feature, .df-card, .ab-beliefs > li, .cb-card, .ct-need, .hw-way, .su-step, .gd-ticket, .ls-deal, .ls-guide, .ls-app-stage):is(:hover, :focus-visible) .theme-art:not(.enforce-art, .legal-art, .installed-nod, .state-art, .hh-walk, .portal-demo-poster, .step-card .theme-art, .cat-card .theme-art, .deal-panel--doodle .theme-art) > img,
  img.doodle-tilt:hover {
    transform: rotate(var(--dh-r)) scale(1.04);
  }
  .df-page .theme-art:not(.hh-walk, .portal-demo-poster) > img,
  .df-page img.doodle-tilt,
  .nf-doodle > img { pointer-events: auto; }
}

/* Fixes from the first look. */
.ls-section + .ls-band { margin-top: clamp(48px, 6vw, 80px); }
.ls-guides--hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .ls-guides--hub { grid-template-columns: minmax(0, 1fr); } }
.ls .legal .ls-crumbs a { color: var(--ls-soft); font-weight: 600; text-decoration-thickness: 1px; text-decoration-color: var(--ls-line-2); }
.ls .legal .ls-crumbs a:hover { color: var(--ls-ink); text-decoration-color: currentColor; }

/* ---------- every page: quiet overlines ---------- */
.ls .overline { margin-bottom: 12px; color: var(--ls-soft); font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; }
/* A heading the script focuses for a screen reader takes no ring: nobody tabbed to it. */
.ls [tabindex="-1"]:focus-visible { outline: none; }

/* ---------- account cards: sign in, verify, profile, orders, bookings ---------- */
.ls :is(.si-main, .vf-main, .vf-page, .pf-main, .ac-page, .orders-main) :is(.card, .card--hero) { border: 0; border-radius: 24px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2), var(--ls-lift); }
.ls :is(.si-title, .vf-title, .pv-title, .pf-title, .ac-door-title, .ac-title, .orders-title) { color: var(--ls-ink); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.ls :is(.si-title, .vf-title, .pf-title, .ac-door-title) { font-size: clamp(30px, 3.4vw, 40px); }
.ls :is(.si-body, .vf-body, .pf-body, .pv-lede) { color: var(--ls-soft); font-size: 16px; line-height: 1.55; }
.ls :is(.si-main, .vf-main, .vf-page, .pf-main, .ac-page, .orders-main) .tud-flow :is(input[type="email"], input[type="text"], input[type="tel"], input:not([type]), select, textarea), .ls :is(.si-main, .vf-main, .vf-page, .pf-main, .ac-page, .orders-main) .field input { border: 1.5px solid var(--ls-line-2); background: var(--ls-paper); color: var(--ls-ink); font-size: 16px; }
.ls :is(.si-main, .vf-main, .vf-page, .pf-main, .ac-page, .orders-main) .tud-flow :is(input, select, textarea):focus-visible, .ls :is(.si-main, .vf-main, .vf-page, .pf-main, .ac-page, .orders-main) .field input:focus-visible { border-color: var(--ls-ink); box-shadow: 0 0 0 3px rgba(20, 20, 18, .14); }
.ls :is(.si-main, .vf-main, .vf-page, .pf-main, .ac-page, .orders-main) .field-label { color: var(--ls-ink); font-size: 15px; font-weight: 700; }
.ls :is(.si-main, .vf-main, .vf-page, .pf-main, .ac-page, .orders-main) .fine { color: var(--ls-muted); font-size: 14px; }
.ls :is(.si-main, .vf-main, .vf-page, .pf-main, .ac-page, .orders-main) .link-button { color: var(--ls-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--ls-line-2); text-underline-offset: 4px; }
.ls :is(.si-main, .vf-main, .vf-page, .pf-main, .ac-page, .orders-main) .link-button:hover { text-decoration-color: currentColor; }
/* Verify's paper slip becomes the same card: no tape, no turn, no handwriting. */
.ls .vf-slip { padding: clamp(24px, 4vw, 40px); border-radius: 24px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2), var(--ls-lift); transform: none; }
.ls .vf-slip::before { content: none; }
.ls .vf-hand { height: auto; margin-bottom: 10px; color: var(--ls-soft); font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.3; transform: none; }
/* The two routes as Figma's route cards; the chosen one carries a filled radio dot, never a tick. */
.ls .pv-choice { min-height: 84px; padding: 16px 18px; border: 0; border-radius: 16px; background: var(--ls-canvas); box-shadow: inset 0 0 0 1.5px var(--ls-line-2); }
.ls .pv-choice:hover { box-shadow: inset 0 0 0 1.5px var(--ls-ink); }
.ls .pv-choice[aria-expanded="true"] { background: var(--ls-chai); box-shadow: inset 0 0 0 2px var(--ls-ink); }
.ls .pv-choice-title { color: var(--ls-ink); font-weight: 700; }
.ls .pv-choice-meta { color: var(--ls-soft); }
.ls .pv-choice-mark { border: 1.5px solid var(--ls-control); background: var(--ls-paper); }
.ls .pv-choice-mark svg { display: none; }
.ls .pv-choice[aria-expanded="true"] .pv-choice-mark { border-color: var(--ls-ink); background: var(--ls-paper); box-shadow: inset 0 0 0 4px var(--ls-paper), inset 0 0 0 11px var(--ls-ink); }

/* The side panel beside the sign-in and verify cards. */
.ls :is(.si-main, .vf-main) { padding-top: clamp(28px, 4vw, 64px); }
.ls .si-main > .container, .ls .vf-main > .container { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 400px); justify-content: center; align-items: start; column-gap: clamp(40px, 6vw, 88px); }
.ls .si-main .si-stage { width: 100%; grid-column: 1; }
.ls .vf-main > .container > :not(.ls-auth-side) { grid-column: 1; width: 100%; }
.ls .ls-auth-side { grid-column: 2; grid-row: 1 / span 12; display: grid; gap: 16px; padding-top: 12px; }
.ls .ls-auth-side h2 { font-size: clamp(28px, 2.8vw, 36px); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; }
.ls .ls-auth-side > p { color: var(--ls-soft); font-size: 17px; line-height: 1.5; }
.ls .ls-auth-pass { width: min(100%, 360px); margin: 8px 0 6px; }
.ls .ls-auth-side .ls-trust { display: grid; gap: 10px; }
.ls .ls-auth-side .ls-link { justify-self: start; }
.ls .vf-main:has(#vf-panel-verified:not(.hidden)) .ls-auth-side,
.ls .vf-main:has(#vf-panel-loading:not(.hidden)) .ls-auth-side { display: none; }
.ls .vf-main:has(#vf-panel-verified:not(.hidden)) > .container { grid-template-columns: minmax(0, 560px); }
@media (max-width: 900px) {
  .ls .si-main > .container, .ls .vf-main > .container { grid-template-columns: minmax(0, 560px); row-gap: 40px; }
  .ls .ls-auth-side { grid-column: 1; grid-row: auto; padding-top: 0; }
  .ls .ls-auth-pass { display: none; }
}

/* Profile, ambassador code, orders and bookings: the signed-out door is the same card. */
.ls :is(.pf-card, .ac-door) { display: grid; gap: 14px; padding: clamp(24px, 4vw, 40px); }
.ls :is(.pf-main, .ac-page, .orders-main) { padding-top: clamp(28px, 4vw, 64px); }
.ls .orders-wrap { width: min(100% - (var(--ls-gutter) * 2), 880px); }
.ls .orders-title { font-size: clamp(34px, 4vw, 52px); }
.ls :is(.orders-empty, .orders-gate) { padding: clamp(24px, 4vw, 40px); border: 0; border-radius: 24px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
/* Labels in sentence case: site.css set these in tracked capitals. */
.ls :is(.pill, .eyebrow, .join-progress li, .deal-badge, .deal-hero-brand, .deal-card-brand, .deal-card-meta, .deal-hero-meta, .brand-chip, .lang-btn, .brand-offer-meta, .deal-code-label) { text-transform: none; letter-spacing: 0; }
/* The small dead ends (no bookings, service down) on the same type. */
.ls .brand-missing { max-width: 720px; padding-block: clamp(32px, 5vw, 72px) 0; }
.ls .brand-missing .page-title { font-size: clamp(36px, 4.4vw, 56px); font-weight: 800; line-height: 1.02; letter-spacing: -0.04em; }
.ls .brand-missing .lede { margin-top: 16px; color: var(--ls-soft); font-size: 18px; line-height: 1.55; }
.ls .brand-missing-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ls .ls-missing .ls-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* No ticks anywhere: a finished step keeps its number on ink, and the
   verified seal carries the pass's orange dot. */
.ls .tud-steps [data-state="done"] .tud-step-dot { color: var(--ls-paper); background: var(--ls-ink); }
.ls .tud-steps [data-state="done"] .tud-step-dot svg { display: none; }
.ls .tud-steps [data-state="done"] .tud-step-n { display: inline; }
.ls .pass-seal-check { display: none; }
.ls .pass-seal::after { content: ""; position: relative; width: 38%; height: 38%; border-radius: 50%; background: var(--ls-orange); }

/* The wide doodle (Sports and fitness) is sized by HEIGHT, the height a square doodle gets from its width, so it stands as tall as
   the others and runs wider; never squashed, never cropped. */
.ls-deal-art.theme-art--wide img, .ls-cat-art.theme-art--wide img, .ls-empty-art.theme-art--wide img { width: auto; max-width: 100%; }
.ls-deal-art.theme-art--wide { width: auto; max-width: 70%; }
.ls-deal-art.theme-art--wide img { height: 118px; }
.ls-cat-art.theme-art--wide { width: auto; max-width: 100%; justify-self: center; }
.ls-cat-hero:has(.ls-cat-art.theme-art--wide) { grid-template-columns: minmax(0, 1fr) auto; }
.ls-cat-art.theme-art--wide img { height: 200px; }
.ls-empty-art.theme-art--wide { width: auto; }
.ls-empty-art.theme-art--wide img { height: 140px; }
@media (max-width: 720px) {
  .ls-cat-hero:has(.ls-cat-art.theme-art--wide) { grid-template-columns: minmax(0, 1fr) auto; }
  .ls-cat-art.theme-art--wide img { height: 80px; }
}