/* EXPLORATION ONLY (throwaway branches): six brand page directions, ?x=a|b|c|d|e|f. Light only, except F, which has a dark mode at the foot. */

/* The colours each direction dresses in: our orange by default, the brand's own when it set them. */
.ls-dl .xb-hero, .ls-dl .xc-page, .ls-dl .xe-story { --xa: #FF5C26; --xai: #1A1613; --xt: var(--ls-tint); --xband: var(--ls-ink); }
.ls-dl .dl-brand[data-brand-design="brand"] :is(.xb-hero, .xc-page, .xe-story) { --xa: var(--brand-accent); --xai: var(--brand-accent-ink); --xt: var(--brand-tone); --xband: var(--brand-band); }

/* The offer card takes the direction's colours; our orange stays on our own action when the card wears the brand's. */
.ls-dl .xb :is(.xb-hero, .xe-deal) .dl-offer { color: var(--xai); background: var(--xa); }
.ls-dl .xb :is(.xb-hero, .xe-deal) .dl-offer :is(.dl-offer-title, .deal-code-use, .deal-code-note, .deal-code-expiry) { color: var(--xai); }
/* An outlined brand card colours its saving in the accent; on the accent ground the saving takes the ink instead. */
.ls-dl .xb :is(.xb-hero, .xe-deal) .dl-offer .dl-offer-saving { color: var(--xai); }
.ls-dl .xb .xb-own .dl-offer .brand-offer-cta { color: #141412; background: #FF5C26; border-color: #FF5C26; box-shadow: 0 0 0 2px var(--xai); }
.ls-dl .xb .xb-own .dl-offer :focus-visible { outline-color: var(--xai); }

/* Shared fixes: 44 px targets for Terms and the shop filters, ink links on tone grounds, and the title's breathing room. */
.ls-dl .xb .dl-terms { margin-top: 2px; }
.ls-dl .xb .dl-terms > summary { min-height: 44px; }
.ls-dl .xb .shop .shop-filter { min-height: 44px; }
.ls-dl .xb :is(.xa-hero, .xbb-hero, .xd-hero, .xe-cover) .dl-blinks a { color: var(--ls-ink); text-decoration-color: #FF5C26; }
.ls-dl .xb :is(.xa-hero, .xbb-hero, .xd-hero) .dl-answer { margin-top: 20px; }
.ls-dl .xb .xb-hero .dl-bchips { margin-top: 22px; }
.ls-dl .xb .xb-hero .dl-blinks { margin-top: 10px; }

/* Prints: the brand's real photos as instant prints, a white margin and a deeper one at the foot. */
.ls-dl .xb-print { display: block; padding: 8px 8px 30px; border-radius: 6px; background: #FFFFFF; box-shadow: var(--tud-shadow-paper); }
.ls-dl .xb-print img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; border-radius: 3px; background: var(--ls-line); }
.ls-dl .xb-print--wide img { aspect-ratio: 16 / 10; }

/* No photo: the storefront model stands in, upright and centred; with nothing live, the empty box. */
.ls-dl .xb-fallback { display: grid; place-items: center; }
.ls-dl .xb-fallback-model, .ls-dl .xb-none-art { display: block; width: min(100%, 280px); }
.ls-dl :is(.xb-fallback-model, .xb-none-art) img { display: block; width: 100%; height: auto; }
.ls-dl .xb .dl-none { margin-top: 0; }
.ls-dl .xb .dl-none .ls-btn { min-height: 52px; }

/* =========================================================
   A. A hand of prints: the fan the founder liked, made deliberate.
   ========================================================= */
.ls-dl .xa-hero { padding: clamp(14px, 2vw, 24px) 0 clamp(48px, 5vw, 72px); background: var(--xt); }
.ls-dl :is(.xa-in, .xd-in) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); grid-template-areas: "crumbs art" "copy art" "copy deal"; column-gap: clamp(40px, 6vw, 96px); }
.ls-dl :is(.xa-crumbs, .xd-crumbs) { grid-area: crumbs; }
.ls-dl :is(.xa-copy, .xd-copy) { grid-area: copy; align-self: start; padding: 0 0 24px; }
.ls-dl :is(.xa-art, .xd-art) { grid-area: art; position: relative; height: 300px; margin-top: 8px; }
.ls-dl :is(.xa-deal, .xd-deal) { grid-area: deal; position: relative; z-index: 2; justify-self: center; width: 100%; max-width: 440px; margin-top: -34px; }
.ls-dl :is(.xa-deal, .xd-deal) .dl-offer { width: 100%; }
.ls-dl :is(.xa-hand, .xd-hand) { position: absolute; inset: 0; }
.ls-dl :is(.xa-hand, .xd-hand) .xb-print { position: absolute; bottom: 0; left: 50%; width: 192px; transform-origin: 50% 150%; }
.ls-dl :is(.xa-hand, .xd-hand).xb-n1 .xb-print { width: 232px; transform: translateX(-50%) rotate(-3deg); }
.ls-dl :is(.xa-hand, .xd-hand).xb-n1 .xb-print--wide { width: 340px; }
.ls-dl :is(.xa-hand, .xd-hand).xb-n2 .xb-print--0 { transform: translateX(calc(-50% - 62px)) rotate(-8deg); }
.ls-dl :is(.xa-hand, .xd-hand).xb-n2 .xb-print--1 { transform: translateX(calc(-50% + 62px)) rotate(7deg); }
.ls-dl :is(.xa-hand, .xd-hand).xb-n2 .xb-print--wide { width: 286px; transform: translateX(calc(-50% - 56px)) rotate(-6deg); }
.ls-dl :is(.xa-hand, .xd-hand).xb-n2 .xb-print--wide + .xb-print { width: 168px; transform: translateX(calc(-50% + 118px)) rotate(7deg); }
.ls-dl :is(.xa-hand, .xd-hand).xb-n3 .xb-print { width: 180px; }
.ls-dl :is(.xa-hand, .xd-hand).xb-n3 .xb-print--0 { z-index: 2; transform: translateX(-50%) rotate(-1deg); }
.ls-dl :is(.xa-hand, .xd-hand).xb-n3 .xb-print--1 { transform: translateX(calc(-50% - 104px)) rotate(-10deg); }
.ls-dl :is(.xa-hand, .xd-hand).xb-n3 .xb-print--2 { transform: translateX(calc(-50% + 104px)) rotate(9deg); }
.ls-dl :is(.xa-hand, .xd-hand).xb-n3 .xb-print--wide { width: 250px; }
.ls-dl :is(.xa-hand, .xd-hand).xb-fallback { padding-bottom: 40px; }
.ls-dl :is(.xa-hand, .xd-hand).xb-fallback--none { padding-bottom: 0; }
/* With nothing live there is no ticket, so the art takes the column and the words carry the one action. */
.ls-dl .xa-hero.xb-is-none .xa-in { grid-template-areas: "crumbs art" "copy art" "deal art"; grid-template-rows: auto auto 1fr; }
.ls-dl .xa-hero.xb-is-none .xa-art { grid-row: 1 / 4; align-self: center; }
.ls-dl .xa-hero.xb-is-none .xa-deal { grid-area: deal; align-self: start; justify-self: stretch; max-width: none; margin-top: 32px; }
.ls-dl .xa-hero.xb-is-none .xa-copy { align-self: start; padding-bottom: 0; }
@media (max-width: 960px) {
  .ls-dl :is(.xa-in, .xd-in), .ls-dl .xa-hero.xb-is-none .xa-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumbs" "art" "copy" "deal"; }
  .ls-dl :is(.xa-art, .xd-art), .ls-dl .xa-hero.xb-is-none .xa-art { grid-row: auto; height: 220px; margin: 12px 0 28px; }
  .ls-dl :is(.xa-hand, .xd-hand) .xb-print { width: 136px; padding: 6px 6px 22px; }
  .ls-dl :is(.xa-hand, .xd-hand).xb-n1 .xb-print { width: 168px; }
  .ls-dl :is(.xa-hand, .xd-hand).xb-n1 .xb-print--wide { width: 290px; }
  .ls-dl :is(.xa-hand, .xd-hand).xb-n2 .xb-print--0 { transform: translateX(calc(-50% - 48px)) rotate(-8deg); }
  .ls-dl :is(.xa-hand, .xd-hand).xb-n2 .xb-print--1 { transform: translateX(calc(-50% + 48px)) rotate(7deg); }
  .ls-dl :is(.xa-hand, .xd-hand).xb-n2 .xb-print--wide { width: 236px; transform: translateX(calc(-50% - 40px)) rotate(-6deg); }
  .ls-dl :is(.xa-hand, .xd-hand).xb-n2 .xb-print--wide + .xb-print { width: 124px; transform: translateX(calc(-50% + 96px)) rotate(7deg); }
  .ls-dl :is(.xa-hand, .xd-hand).xb-n3 .xb-print { width: 124px; }
  .ls-dl :is(.xa-hand, .xd-hand).xb-n3 .xb-print--0 { width: 142px; }
  .ls-dl :is(.xa-hand, .xd-hand).xb-n3 .xb-print--1 { transform: translateX(calc(-50% - 84px)) rotate(-10deg); }
  .ls-dl :is(.xa-hand, .xd-hand).xb-n3 .xb-print--2 { transform: translateX(calc(-50% + 84px)) rotate(9deg); }
  .ls-dl :is(.xa-hand, .xd-hand) .xb-fallback-model { width: 168px; }
  .ls-dl :is(.xa-hand, .xd-hand) .xb-none-art { width: 190px; }
  .ls-dl :is(.xa-copy, .xd-copy), .ls-dl .xa-hero.xb-is-none .xa-copy { padding: 0; }
  .ls-dl :is(.xa-deal, .xd-deal), .ls-dl .xa-hero.xb-is-none .xa-deal { grid-area: deal; justify-self: stretch; max-width: none; margin-top: 28px; }
  .ls-dl .xb .xb-is-none .dl-none .ls-btn { width: 100%; }
}

/* A and D, below the hero: the steps band carries one kit model, as How it works does (model left, steps stacked). */
.ls-dl .xa-steps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ls-dl .xa-model { display: grid; place-items: center; }
.ls-dl .xa-model .hm-model { width: min(100%, 380px); height: auto; }
.ls-dl .xa-steps .dl-steps, .ls-dl .xa-steps .dl-steps.dl-steps--4 { grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: 560px; }
@media (max-width: 860px) {
  .ls-dl .xa-steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ls-dl .xa-model .hm-model { width: min(72%, 260px); }
}

/* =========================================================
   B. The ticket is the hero: tone panel with the prints, paper body,
   accent stub, perforated between body and stub.
   ========================================================= */
.ls-dl .dl-brand.xb .xbb-hero.dl-bhero { background: var(--ls-canvas); }
.ls-dl .xbb-hero { padding: clamp(14px, 2vw, 24px) 0 clamp(40px, 5vw, 64px); background: var(--ls-canvas); }
.ls-dl .xbb-tk { position: relative; display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 1fr) minmax(0, 360px); margin-top: 52px; border-radius: 24px; background: var(--ls-paper); box-shadow: 0 1px 2px rgba(20, 20, 18, .08), 0 28px 56px -32px rgba(20, 20, 18, .5); }
.ls-dl .xbb-panel { position: relative; min-height: 400px; border-radius: 24px 0 0 24px; background: var(--xt); }
.ls-dl .xbb-panel::after { content: ""; position: absolute; top: 0; bottom: 0; right: -6px; width: 6px; background: radial-gradient(circle at 0 50%, var(--xt) 5.5px, #0000 6px) 0 0 / 6px 24px round; }
.ls-dl .xbb-prints { position: absolute; left: 0; right: 0; top: -40px; height: 330px; }
.ls-dl .xbb-prints .xb-print { position: absolute; top: 0; left: 50%; width: 168px; transform-origin: 50% 120%; }
.ls-dl .xbb-prints.xb-n1 { top: 0; bottom: 0; height: auto; }
.ls-dl .xbb-prints.xb-n1 .xb-print { top: 50%; width: 204px; transform: translate(-50%, -50%) rotate(-4deg); }
.ls-dl .xbb-prints.xb-n1 .xb-print--wide { width: 236px; }
.ls-dl .xbb-prints.xb-n2 .xb-print--0 { transform: translateX(-72%) rotate(-7deg); }
.ls-dl .xbb-prints.xb-n2 .xb-print--1 { top: 104px; transform: translateX(-26%) rotate(5deg); }
.ls-dl .xbb-prints.xb-n2 .xb-print--wide { width: 214px; transform: translateX(-60%) rotate(-6deg); }
.ls-dl .xbb-prints.xb-n3 .xb-print--0 { z-index: 3; top: 116px; width: 178px; transform: translateX(-50%) rotate(-2deg); }
.ls-dl .xbb-prints.xb-n3 .xb-print--1 { top: 0; width: 128px; transform: translateX(-96%) rotate(-7deg); }
.ls-dl .xbb-prints.xb-n3 .xb-print--2 { top: 14px; width: 128px; transform: translateX(-4%) rotate(6deg); }
.ls-dl .xbb-prints.xb-fallback { top: 0; bottom: 0; height: auto; }
.ls-dl .xbb-prints .xb-fallback-model { width: 200px; }
.ls-dl .xbb-prints .xb-none-art { width: 190px; }
.ls-dl .xbb-body { align-self: center; padding: 40px clamp(28px, 3.2vw, 44px) 36px; }
/* The logo rides above the name, so the name keeps two lines in the narrow body. */
.ls-dl .xbb-body .dl-btitle { flex-direction: column; gap: 16px; margin-top: 0; }
.ls-dl .xbb-hero .dl-h1 { font-size: clamp(32px, 3.2vw, 46px); }
.ls-dl .xbb-hero .dl-btitle .dl-bid-plate { margin-top: 0; }
.ls-dl .xbb-stub { position: relative; border-left: 2px dashed color-mix(in srgb, var(--xa) 55%, #FFFFFF); border-radius: 0 24px 24px 0; }
.ls-dl .xbb-stub::before, .ls-dl .xbb-stub::after { content: ""; position: absolute; z-index: 2; left: -15px; width: 28px; height: 28px; border-radius: 50%; background: var(--ls-canvas); }
.ls-dl .xbb-stub::before { top: -14px; box-shadow: inset 0 -5px 6px -5px rgba(20, 20, 18, .18); }
.ls-dl .xbb-stub::after { bottom: -14px; box-shadow: inset 0 5px 6px -5px rgba(20, 20, 18, .18); }
.ls-dl .xb .xbb-stub .dl-offer { display: flex; flex-direction: column; justify-content: center; width: auto; height: 100%; padding: 36px 30px 28px; border-radius: 0 24px 24px 0; box-shadow: none; }
.ls-dl .xbb-stub .dl-offer-saving--long { font-size: clamp(40px, 3.6vw, 54px); }
.ls-dl .xbb-is-none .xbb-stub, .ls-dl .xbb-hero.xb-is-none .xbb-stub { display: grid; align-content: center; padding: 36px 30px; border-left-color: var(--ls-line-2); }
.ls-dl :is(.xbb-slots, .xd-slots) { margin-top: 16px; }
.ls-dl :is(.xbb-slots-day, .xd-slots-day) { font-size: 17px; font-weight: 700; }
.ls-dl :is(.xbb-slots-day, .xd-slots-day) span { display: block; margin-bottom: 2px; font-size: 14px; font-weight: 600; }
.ls-dl :is(.xbb-slots, .xd-slots) ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.ls-dl :is(.xbb-slot, .xd-slot) { display: grid; align-content: center; gap: 1px; min-height: 56px; padding: 6px 10px; border-radius: 12px; color: var(--ls-ink); background: var(--ls-paper); text-align: center; text-decoration: none; }
.ls-dl :is(.xbb-slot, .xd-slot) strong { font-family: var(--tud-font-secondary); font-size: 16px; font-weight: 700; white-space: nowrap; }
.ls-dl :is(.xbb-slot, .xd-slot) span { color: var(--ls-soft); font-size: 12px; font-weight: 700; white-space: nowrap; }
.ls-dl :is(.xbb-slot, .xd-slot):hover { box-shadow: inset 0 0 0 2px var(--ls-ink); }
.ls-dl :is(.xbb-slot, .xd-slot):focus-visible { outline: 2px solid var(--xai); outline-offset: 2px; }
.ls-dl .xbb-has-slots .brand-offer-action { margin-top: 16px; }
/* The slots moved into the ticket, so the Book a time card below keeps its photo and facts only. */
.ls-dl :is(.xb-b, .xb-d) .dl-slots-stub { display: none; }
.ls-dl :is(.xb-b, .xb-d) .dl-slots { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); }
@media (max-width: 1100px) {
  .ls-dl .xbb-tk { grid-template-columns: minmax(0, 230px) minmax(0, 1fr) minmax(0, 330px); }
  .ls-dl .xbb-prints .xb-print { width: 146px; }
  .ls-dl .xbb-prints.xb-n1 .xb-print { width: 184px; }
  .ls-dl .xbb-prints.xb-n1 .xb-print--wide, .ls-dl .xbb-prints.xb-n2 .xb-print--wide { width: 206px; }
}
@media (max-width: 960px) {
  .ls-dl .xbb-tk { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .ls-dl .xbb-panel { min-height: 204px; border-radius: 24px 24px 0 0; }
  .ls-dl .xbb-panel::after { top: auto; bottom: -6px; left: 0; right: 0; width: auto; height: 6px; background: radial-gradient(circle at 50% 0, var(--xt) 5.5px, #0000 6px) 0 0 / 24px 6px round; }
  .ls-dl .xbb-prints { top: -28px; height: 232px; }
  .ls-dl .xbb-prints .xb-print { width: 124px; padding: 6px 6px 22px; }
  .ls-dl .xbb-prints.xb-n1 { top: 0; bottom: 0; height: auto; }
  .ls-dl .xbb-prints.xb-n1 .xb-print { width: 150px; }
  .ls-dl .xbb-prints.xb-n1 .xb-print--wide { width: 236px; }
  .ls-dl .xbb-prints.xb-n2 .xb-print--wide { width: 196px; }
  .ls-dl .xbb-prints.xb-n2 .xb-print--1 { top: 36px; }
  .ls-dl .xbb-prints.xb-n3 .xb-print--0 { top: 36px; width: 134px; }
  .ls-dl .xbb-prints.xb-n3 .xb-print--1, .ls-dl .xbb-prints.xb-n3 .xb-print--2 { width: 110px; }
  .ls-dl .xbb-prints.xb-n3 .xb-print--1 { transform: translateX(-104%) rotate(-8deg); }
  .ls-dl .xbb-prints.xb-n3 .xb-print--2 { transform: translateX(4%) rotate(7deg); }
  .ls-dl .xbb-prints.xb-fallback { top: 12px; bottom: 12px; }
  .ls-dl .xbb-prints .xb-fallback-model, .ls-dl .xbb-prints .xb-none-art { width: 144px; }
  .ls-dl .xbb-body { padding: 28px 20px 26px; }
  .ls-dl .xbb-body .dl-btitle { flex-direction: row; gap: 14px; }
  .ls-dl .xbb-hero .dl-h1 { font-size: 36px; }
  .ls-dl .xbb-stub { border-left: 0; border-top: 2px dashed color-mix(in srgb, var(--xa) 55%, #FFFFFF); border-radius: 0 0 24px 24px; }
  .ls-dl .xbb-stub::before { top: -15px; left: -14px; box-shadow: none; }
  .ls-dl .xbb-stub::after { top: -15px; bottom: auto; left: auto; right: -14px; box-shadow: none; }
  .ls-dl .xb .xbb-stub .dl-offer { padding: 28px 20px 24px; border-radius: 0 0 24px 24px; }
  .ls-dl .xbb-hero.xb-is-none .xbb-stub { padding: 28px 20px; border-top-color: var(--ls-line-2); }
  .ls-dl .xb-b .dl-slots, .ls-dl .xb-d .dl-slots { grid-template-columns: minmax(0, 1fr); }
}
/* B, below the hero: each step is a small ticket, the number on a tone stub, perforated from the words. */
.ls-dl .xb-b .dl-steps { gap: 16px; }
.ls-dl .xb-b .dl-steps.dl-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .ls-dl .xb-b .dl-steps.dl-steps--4 { grid-template-columns: minmax(0, 1fr); } }
.ls-dl .xb-b .dl-steps li { grid-template-columns: 72px minmax(0, 1fr); column-gap: 0; overflow: hidden; border-radius: 16px; background: var(--ls-canvas); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls-dl .xb-b .dl-steps li::before { grid-row: 1 / 3; width: auto; height: 100%; min-height: 100%; border-radius: 0; color: var(--ls-ink); background: var(--ls-tint); font-size: 28px; border-right: 2px dashed var(--ls-tint-line); }
.ls-dl .xb-b .dl-steps h3 { padding: 18px 20px 0; min-height: 0; }
.ls-dl .xb-b .dl-steps p { padding: 0 20px 20px; }

/* =========================================================
   C. The poster and the ticket rail: the hero is a poster in the brand's
   colour with its name set huge; the ticket rides a rail on the right that
   starts inside the poster and stays beside everything below it.
   ========================================================= */
.ls-dl .xc-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 352px); grid-template-areas: "hero rail" "flow rail"; column-gap: clamp(36px, 4.4vw, 64px); align-items: start; padding-bottom: var(--ls-section); }
.ls-dl .dl-brand.xb .xc-hero.dl-bhero { grid-area: hero; position: relative; padding: clamp(14px, 2vw, 24px) 0 0; color: var(--xai); background: var(--xa); box-shadow: 0 0 0 100vmax var(--xa); clip-path: inset(0 -100vmax); }
.ls-dl .xc-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 236px); grid-template-areas: "crumbs crumbs" "name name" "copy art"; column-gap: 32px; padding-bottom: 64px; }
.ls-dl .xc-hero > .dl-bband { margin-inline: -100vmax; }
.ls-dl .xc-crumbs { grid-area: crumbs; }
.ls-dl .dl-brand.xb .xc-hero .ls-crumbs :is(li, a, [aria-current="page"]) { color: var(--xai); }
.ls-dl .xc-hero .ls-crumbs a { text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.ls-dl .xc-hero .ls-crumbs li + li::before { border-color: currentColor; opacity: .7; }
.ls-dl .xc-name-row { grid-area: name; }
.ls-dl .xc-copy { grid-area: copy; align-self: start; }
.ls-dl .xc-title { display: grid; justify-items: start; gap: 18px; margin-top: 18px; }
.ls-dl .xb .xc-title .dl-bid-plate { margin-top: 0; }
.ls-dl .xc-hero .dl-h1 { color: inherit; font-size: inherit; line-height: 1; }
.ls-dl .xc-name { display: block; font-size: clamp(60px, 7.2vw, 104px); font-weight: 800; line-height: .92; letter-spacing: -0.055em; overflow-wrap: anywhere; }
.ls-dl .xc-sub { display: block; margin-top: 8px; font-size: clamp(26px, 2.5vw, 36px); font-weight: 800; letter-spacing: -0.03em; }
.ls-dl .xc-hero .dl-answer { max-width: 40ch; margin-top: 24px; color: inherit; font-size: 18px; font-weight: 600; }
.ls-dl .xc-hero .dl-desc { color: inherit; opacity: .92; }
.ls-dl .xc-hero .dl-bhero-links a { color: inherit; text-decoration-color: currentColor; }
.ls-dl .xc-art { grid-area: art; position: relative; align-self: start; height: 290px; margin-top: 18px; }
.ls-dl .xc-prints { position: absolute; inset: 0; }
.ls-dl .xc-prints .xb-print { position: absolute; }
.ls-dl .xc-prints .xb-print--0 { z-index: 2; top: 0; right: 0; width: 196px; transform: rotate(3deg); }
.ls-dl .xc-prints .xb-print--0.xb-print--wide { top: 40px; right: -12px; width: 250px; }
.ls-dl .xc-prints .xb-print--1 { top: 86px; left: -26px; width: 150px; transform: rotate(-7deg); }
.ls-dl .xc-prints.xb-fallback .xb-fallback-model, .ls-dl .xc-prints .xb-none-art { width: 220px; }
.ls-dl .xc-sticker { position: absolute; z-index: 3; top: 196px; right: 150px; }
.ls-dl .xc-prints.xb-n1 .xc-sticker { right: 160px; }
.ls-dl .xc-prints.xb-n1:has(.xb-print--wide) .xc-sticker { top: 170px; right: 190px; }
.ls-dl .xc-sticker .dl-bid-plate { box-shadow: 0 2px 4px rgba(20, 20, 18, .2), 0 14px 26px -12px rgba(20, 20, 18, .5); }
.ls-dl .xc-sticker .tud-logo.brand-identity-logo { --logo-size: 64px; }
.ls-dl .xc-rail { grid-area: rail; position: relative; z-index: 2; height: 100%; padding-top: 76px; }
.ls-dl .xc-rail .dl-offer-saving--long { font-size: clamp(40px, 3.4vw, 50px); }
.ls-dl .xb .xc-rail .dl-offer { padding: 24px 24px 20px; }
.ls-dl .dl-brand.xb .xc-rail .dl-offer { width: 100%; color: var(--ls-ink); background: var(--ls-paper); box-shadow: inset 0 0 0 3px var(--xa), 0 30px 60px -30px rgba(20, 20, 18, .55); }
.ls-dl .dl-brand.xb .xc-rail .dl-offer-saving { color: var(--xa); }
.ls-dl .dl-brand.xb .xc-page:not(.xb-own) .xc-rail .dl-offer-saving { color: #C93F12; }
.ls-dl .dl-brand.xb .xc-rail .dl-offer :is(.dl-offer-title, .deal-code-use, .deal-code-note, .deal-code-expiry) { color: var(--ls-ink); }
.ls-dl .dl-brand.xb .xc-rail .dl-offer .brand-offer-cta { color: #141412; background: #FF5C26; border-color: #FF5C26; box-shadow: none; }
.ls-dl .dl-brand.xb .xc-rail .dl-offer .brand-offer-cta:hover { background: #FF7A4D; border-color: #FF7A4D; }
.ls-dl .xc-rail .dl-offer :focus-visible { outline-color: var(--ls-ink); }
.ls-dl .xc-rail .dl-none { padding: 28px 24px; border-radius: 20px; background: var(--ls-paper); box-shadow: inset 0 0 0 3px var(--xa), 0 30px 60px -30px rgba(20, 20, 18, .55); }
.ls-dl .xc-rail .dl-none .ls-btn { width: 100%; }
.ls-dl .xc-flow { grid-area: flow; min-width: 0; }
.ls-dl .xc-flow .ls-wrap { width: auto; margin-inline: 0; }
.ls-dl .xc-flow > :first-child { margin-top: clamp(44px, 5vw, 64px); }
.ls-dl .xc-flow .dl-band-paper { margin-top: var(--ls-section); padding: clamp(32px, 3.4vw, 44px); border-radius: 20px; }
.ls-dl .xc-flow .dl-band-paper > .ls-wrap { width: auto; }
.ls-dl .xc-flow .dl-band-paper--edge::before { content: none; }
.ls-dl .xc-flow .dl-steps, .ls-dl .xc-flow .dl-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
.ls-dl .xc-flow .dl-about-faq { grid-template-columns: minmax(0, 1fr); gap: var(--ls-section); }
.ls-dl .xc-flow .dl-about-faq > .dl-about { position: static; }
.ls-dl .xc-flow .dl-rows { grid-template-columns: minmax(0, 1fr); }
.ls-dl .xc-flow .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ls-dl .xc-flow .dl-slots { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ls-dl .xc-flow .dl-slots-photo { grid-column: 1 / -1; min-height: 220px; }
.ls-dl .xc-flow .dl-slots-photo::after { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 6px; background: radial-gradient(circle at 50% 100%, var(--ls-paper) 5.5px, #0000 6px) 0 0 / 24px 100% round; }
@media (min-width: 961px) and (min-height: 760px) {
  .ls-dl .xc-stick { position: sticky; top: calc(var(--site-header-h, 76px) + 24px); }
}
@media (max-width: 960px) {
  .ls-dl .xc-page { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "rail" "flow"; }
  .ls-dl .xc-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumbs" "art" "name" "copy"; padding-bottom: 84px; }
  .ls-dl .xc-art { height: 250px; margin-top: 12px; }
  .ls-dl .xc-prints .xb-print { padding: 6px 6px 22px; }
  .ls-dl .xc-prints .xb-print--0 { top: 8px; right: 50%; width: 176px; transform: translateX(66%) rotate(3deg); }
  .ls-dl .xc-prints .xb-print--0.xb-print--wide { top: 30px; right: 50%; width: 290px; transform: translateX(50%) rotate(-3deg); }
  .ls-dl .xc-prints .xb-print--1 { top: 34px; left: 50%; width: 132px; transform: translateX(-96%) rotate(-7deg); }
  .ls-dl .xc-sticker { top: 178px; right: auto; left: calc(50% - 132px); }
  .ls-dl .xc-prints.xb-n1 .xc-sticker { top: 190px; right: auto; left: calc(50% - 110px); }
  .ls-dl .xc-prints.xb-n1:has(.xb-print--wide) .xc-sticker { top: 176px; right: auto; left: calc(50% - 160px); }
  .ls-dl .xc-sticker .tud-logo.brand-identity-logo { --logo-size: 56px; }
  .ls-dl .xc-prints.xb-fallback .xb-fallback-model, .ls-dl .xc-prints .xb-none-art { width: 168px; }
  .ls-dl .xc-title { gap: 16px; margin-top: 4px; }
  .ls-dl .xc-name { font-size: clamp(56px, 16vw, 80px); }
  .ls-dl .xc-sub { font-size: 28px; }
  .ls-dl .xc-hero .dl-answer { font-size: 17px; }
  .ls-dl .xc-rail { height: auto; margin-top: -56px; padding-top: 0; }
  .ls-dl .xc-flow .dl-steps, .ls-dl .xc-flow .dl-steps--4 { grid-template-columns: minmax(0, 1fr); }
  .ls-dl .xc-flow .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ls-dl .xc-flow .dl-slots { grid-template-columns: minmax(0, 1fr); }
  .ls-dl .xc-flow .dl-band-paper { padding: 28px 20px; }
}

/* =========================================================
   D. The best of both: A's hand of prints tucked behind B's ticket, which lies
   across the page on a desktop. The stub, torn along the perforation, carries
   the action and, for a bookings brand, the open times with the student price
   beside each. On a phone the ticket stands upright, the stub at its foot.
   ========================================================= */
.ls-dl .xd-hero { padding: clamp(14px, 2vw, 24px) 0 clamp(48px, 5vw, 72px); background: var(--xt); }
.ls-dl .xd-in { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-areas: "crumbs crumbs" "copy art" "deal deal"; column-gap: clamp(40px, 6vw, 96px); }
.ls-dl .xd-copy { padding: 0; }
.ls-dl .xd-art { align-self: end; height: 272px; margin: 0 0 -60px; }
.ls-dl .xd-deal { justify-self: stretch; max-width: none; margin-top: 24px; }
.ls-dl .xb .xd-deal .dl-offer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); padding: 0; border-radius: 24px; }
.ls-dl .xb .xd-has-slots .xd-deal .dl-offer { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
.ls-dl .xd-body { align-self: center; padding: 30px clamp(28px, 3vw, 44px) 28px; }
.ls-dl .xd-deal .dl-offer-saving { font-size: clamp(56px, 5.6vw, 80px); }
.ls-dl .xd-deal .dl-offer-saving--long { font-size: clamp(48px, 4.6vw, 68px); }
.ls-dl .xd-deal .dl-offer-title { margin-top: 14px; }
.ls-dl .xd-deal .dl-offer-line { max-width: 52ch; }
.ls-dl .xd-stub { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 30px 32px 28px; border-left: 2px dashed color-mix(in srgb, var(--xai) 32%, transparent); }
.ls-dl .xd-stub::before, .ls-dl .xd-stub::after { content: ""; position: absolute; left: -14px; width: 26px; height: 26px; border-radius: 50%; background: var(--xt); }
.ls-dl .xd-stub::before { top: -13px; }
.ls-dl .xd-stub::after { bottom: -13px; }
.ls-dl .xd-stub > .brand-offer-action { margin-top: 0; }
.ls-dl .xd-has-slots .xd-stub > .brand-offer-action { margin-top: 16px; }
.ls-dl .xd-stub .xd-slots { margin-top: 0; }
.ls-dl .xd-stub .dl-offer-note { margin-top: 12px; }
.ls-dl .xd-slots ul { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); }
/* With nothing live: the words and the one action left, the art beside them. */
.ls-dl .xd-hero.xb-is-none .xd-in { grid-template-areas: "crumbs crumbs" "copy art" "deal art"; }
.ls-dl .xd-hero.xb-is-none .xd-art { grid-row: 2 / 4; align-self: center; margin: 0; }
.ls-dl .xd-hero.xb-is-none .xd-deal { margin-top: 32px; }
@media (max-width: 960px) {
  .ls-dl .xd-in, .ls-dl .xd-hero.xb-is-none .xd-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumbs" "art" "copy" "deal"; }
  .ls-dl .xd-art, .ls-dl .xd-hero.xb-is-none .xd-art { grid-row: auto; height: 220px; margin: 12px 0 28px; }
  .ls-dl .xd-deal { margin-top: 28px; }
  .ls-dl .xb .xd-deal .dl-offer, .ls-dl .xb .xd-has-slots .xd-deal .dl-offer { grid-template-columns: minmax(0, 1fr); }
  .ls-dl .xd-art { align-self: auto; }
  .ls-dl .xd-body { padding: 24px 22px 22px; }
  .ls-dl .xd-stub { padding: 20px 22px 22px; border-left: 0; border-top: 2px dashed color-mix(in srgb, var(--xai) 32%, transparent); }
  .ls-dl .xd-stub::before, .ls-dl .xd-stub::after { top: -14px; bottom: auto; }
  .ls-dl .xd-stub::before { left: -13px; }
  .ls-dl .xd-stub::after { left: auto; right: -13px; }
  .ls-dl .xd-slots ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ls-dl .xd-slots li:nth-child(n+4) { display: none; }
}

/* =========================================================
   E. The brand's story: a centred cover with its photos as one strip, the
   deal as a spread, the pieces or times, the steps as one line, and a dock
   that keeps the one action in reach until the story ends.
   ========================================================= */
.ls-dl .xe-cover { padding: clamp(14px, 2vw, 24px) 0 clamp(48px, 5vw, 72px); background: var(--xt); }
.ls-dl .xe-head { display: grid; justify-items: center; max-width: 760px; margin: 24px auto 0; text-align: center; }
.ls-dl .xe-head .dl-bid-plate .tud-logo.brand-identity-logo { --logo-size: 68px; }
.ls-dl .xe-head .dl-h1 { margin-top: 22px; font-size: clamp(42px, 5.2vw, 74px); line-height: 1; }
.ls-dl .xe-head .dl-answer { max-width: 44ch; margin-top: 20px; }
.ls-dl .xe-head .dl-desc { max-width: 52ch; }
.ls-dl .xe-head :is(.dl-bchips, .dl-blinks) { justify-content: center; }
.ls-dl .xe-head .dl-none { width: 100%; max-width: 520px; margin-top: 32px; padding: 28px; border-radius: 20px; background: var(--ls-paper); }
.ls-dl .xe-head .dl-none p { margin-inline: auto; }
.ls-dl .xe-strip { display: flex; justify-content: center; align-items: flex-end; gap: clamp(12px, 1.6vw, 20px); margin-top: 44px; }
.ls-dl .xe-shot { display: block; overflow: hidden; border-radius: 20px; background: var(--ls-line); box-shadow: 0 24px 44px -28px rgba(20, 20, 18, .55); }
.ls-dl .xe-shot img { display: block; width: auto; height: clamp(210px, 22vw, 300px); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; }
.ls-dl .xe-shot--wide img { aspect-ratio: 16 / 10; }
.ls-dl .xe-strip .xe-shot--0 { order: 2; }
.ls-dl .xe-strip .xe-shot--0 img { height: clamp(250px, 26vw, 360px); }
.ls-dl .xe-strip .xe-shot--1 { order: 1; }
.ls-dl .xe-strip .xe-shot--2 { order: 3; }
.ls-dl .xe-strip.xb-fallback .xb-fallback-model { width: 300px; }
.ls-dl .xe-deal { margin-top: var(--ls-section); }
.ls-dl .xb .xe-deal .dl-offer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); column-gap: clamp(32px, 5vw, 72px); align-content: center; width: 100%; padding: clamp(32px, 4vw, 56px); border-radius: 28px; }
.ls-dl .xe-deal .dl-offer > * { grid-column: 2; }
.ls-dl .xe-deal .dl-offer > .dl-offer-saving { grid-column: 1; grid-row: 1 / span 9; align-self: center; font-size: clamp(76px, 9.4vw, 148px); }
.ls-dl .xe-deal .dl-offer > .dl-offer-saving--long { font-size: clamp(60px, 6.2vw, 92px); white-space: nowrap; }
.ls-dl .xe-deal .dl-offer > .dl-offer-title { margin-top: 0; }
.ls-dl .xe-steps .dl-steps { position: relative; }
.ls-dl .xe-steps .dl-steps::before { content: ""; position: absolute; top: 19px; left: 20px; right: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--ls-ink) 0 8px, #0000 8px 14px); opacity: .35; }
.ls-dl .xe-steps .dl-steps li { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
.ls-dl .xe-steps .dl-steps li::before { position: relative; grid-row: auto; box-shadow: 0 0 0 8px var(--ls-paper); }
.ls-dl .xe-steps .dl-steps h3 { min-height: 0; }
.ls-dl .xe-steps .dl-steps p { margin-top: -6px; }
.ls-dl .xe-dock { position: sticky; bottom: 16px; z-index: 20; display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 64px); padding-inline: 16px; pointer-events: none; }
.ls-dl .xe-dock-in { display: flex; align-items: center; gap: 14px; width: min(100%, 680px); padding: 8px 8px 8px 10px; border-radius: 999px; color: #FFF8F0; background: #141412; box-shadow: 0 20px 40px -16px rgba(20, 20, 18, .6); pointer-events: auto; }
.ls-dl .xe-dock-logo.dl-bid-plate { padding: 2px; border-radius: 999px; box-shadow: none; }
.ls-dl .xe-dock-logo .tud-logo.brand-identity-logo { --logo-size: 44px; border-radius: 999px; }
.ls-dl .xe-dock-text { display: grid; flex: 1; min-width: 0; line-height: 1.2; }
.ls-dl .xe-dock-text strong { font-family: var(--tud-font-secondary); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.ls-dl .xe-dock-text span { overflow: hidden; color: #D9D1C4; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ls-dl .xe-dock .brand-offer-action { flex: none; }
.ls-dl .xe-dock .brand-offer-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px; color: #141412; background: #FF5C26; font-size: 16px; font-weight: 700; text-decoration: none; }
.ls-dl .xe-dock .brand-offer-cta:hover { background: #FF7A4D; }
.ls-dl .xe-dock :focus-visible { outline: 2px solid #FFF8F0; outline-offset: 2px; }
.ls-dl .xe-dock .deal-code { display: flex; gap: 8px; align-items: center; }
@media (max-width: 960px) {
  .ls-dl .xe-head { margin-top: 16px; }
  .ls-dl .xe-head .dl-h1 { margin-top: 18px; font-size: 40px; }
  .ls-dl .xe-head .dl-none { padding: 24px 20px; }
  .ls-dl .xe-head .dl-none .ls-btn { width: 100%; }
  .ls-dl .xe-strip { order: -1; margin-top: 12px; }
  .ls-dl .xe-in { display: flex; flex-direction: column; }
  .ls-dl .xe-crumbs { order: -2; }
  .ls-dl .xe-strip { margin: 16px -16px 0; padding-inline: 16px; overflow: hidden; }
  .ls-dl .xe-shot img { height: 150px; }
  .ls-dl .xe-strip .xe-shot--0 img { height: 200px; }
  .ls-dl .xe-strip .xe-shot--0.xe-shot--wide img { height: 190px; }
  .ls-dl .xe-strip.xb-n3 .xe-shot--2, .ls-dl .xe-strip:has(.xe-shot--wide) .xe-shot:not(.xe-shot--wide) { display: none; }
  .ls-dl .xe-strip.xb-fallback .xb-fallback-model { width: 176px; }
  .ls-dl .xb .xe-deal .dl-offer { grid-template-columns: minmax(0, 1fr); padding: 28px 22px 24px; border-radius: 24px; }
  .ls-dl .xe-deal .dl-offer > *, .ls-dl .xe-deal .dl-offer > .dl-offer-saving { grid-column: 1; grid-row: auto; }
  .ls-dl .xe-deal .dl-offer > .dl-offer-saving { font-size: clamp(64px, 19vw, 88px); }
  .ls-dl .xe-deal .dl-offer > .dl-offer-saving--long { font-size: clamp(44px, 13vw, 56px); }
  .ls-dl .xe-deal .dl-offer > .dl-offer-title { margin-top: 16px; }
  .ls-dl .xe-steps .dl-steps::before { top: 20px; bottom: 20px; left: 19px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--ls-ink) 0 8px, #0000 8px 14px); }
  .ls-dl .xe-steps .dl-steps li { grid-template-columns: 40px minmax(0, 1fr); row-gap: 0; }
  .ls-dl .xe-steps .dl-steps li::before { grid-row: 1 / 3; }
  .ls-dl .xe-steps .dl-steps h3 { min-height: 40px; }
  .ls-dl .xe-steps .dl-steps p { margin-top: 4px; }
  .ls-dl .xe-dock { bottom: 0; padding: 0; }
  .ls-dl .xe-dock-in { flex-wrap: wrap; gap: 10px 12px; width: 100%; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; }
  .ls-dl .xe-dock .brand-offer-action { flex: 1 0 100%; }
  .ls-dl .xe-dock .brand-offer-cta { width: 100%; min-height: 50px; }
}

@media (prefers-reduced-motion: no-preference) {
  .ls-dl :is(.xa-hand, .xd-hand, .xbb-prints, .xc-prints) .xb-print, .ls-dl .xe-shot { animation: xb-deal 620ms var(--ls-ease) both; }
  .ls-dl :is(.xa-hand, .xd-hand, .xbb-prints, .xc-prints) .xb-print--1, .ls-dl .xe-shot--1 { animation-delay: 80ms; }
  .ls-dl :is(.xa-hand, .xd-hand, .xbb-prints, .xc-prints) .xb-print--2, .ls-dl .xe-shot--2 { animation-delay: 160ms; }
}
@keyframes xb-deal { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@media (forced-colors: active) { .ls-dl .xb-print, .ls-dl .xe-shot { border: 1px solid CanvasText; } .ls-dl .xbb-tk, .ls-dl .xe-dock-in { border: 1px solid CanvasText; } }

/* =========================================================
   F. C's poster with E's story: the poster in the brand's colour holds its
   name set huge, the prints and the ticket; below it the story runs at full
   width (pieces or times, steps on one line, about and questions), and E's
   dock rises only once the ticket has scrolled away.
   ========================================================= */
.ls-dl .xf-story, .ls-dl .xf-hero { --xa: #FF5C26; --xai: #1A1613; --xt: var(--ls-tint); --xband: var(--ls-ink); }
.ls-dl .dl-brand[data-brand-design="brand"] :is(.xf-story, .xf-hero) { --xa: var(--brand-accent); --xai: var(--brand-accent-ink); --xt: var(--brand-tone); --xband: var(--brand-band); }
.ls-dl .dl-brand.xb .xf-hero.dl-bhero { padding: clamp(14px, 2vw, 24px) 0 clamp(56px, 5.6vw, 84px); color: var(--xai); background: var(--xa); }
.ls-dl .xf-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 236px) minmax(0, 372px); grid-template-rows: auto auto auto auto 1fr; grid-template-areas: "crumbs crumbs crumbs" "title title deal" "lead art deal" "more art deal" ". art deal"; column-gap: clamp(28px, 3vw, 48px); }
.ls-dl .xf-crumbs { grid-area: crumbs; }
/* A brand with no pattern: the band is the poster's own scalloped edge in the poster's colour, never a strip of ink. */
.ls-dl .xf-story > .dl-bband--dots { --dl-band: var(--xa); }
.ls-dl .dl-brand.xb .xf-hero .ls-crumbs :is(li, a, [aria-current="page"]) { color: var(--xai); }
.ls-dl .xf-hero .ls-crumbs a { text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.ls-dl .xf-hero .ls-crumbs li + li::before { border-color: currentColor; opacity: .7; }

/* The name, set huge; the logo rides on the prints as a sticker, or above the name when there is no photo. */
.ls-dl .xf-title { grid-area: title; display: grid; justify-items: start; gap: 18px; margin-top: 18px; }
.ls-dl .xb .xf-title .dl-bid-plate { margin-top: 0; }
.ls-dl .xf-hero .dl-h1 { color: inherit; font-size: inherit; line-height: 1; }
.ls-dl .xf-name { display: block; font-size: clamp(60px, 7.2vw, 104px); font-weight: 800; line-height: .92; letter-spacing: -0.055em; overflow-wrap: anywhere; }
.ls-dl .xf-more { grid-area: more; max-width: 46ch; }
.ls-dl .xf-hero .dl-desc { color: inherit; }
.ls-dl .xf-hero .dl-bhero-links a { color: inherit; text-decoration-color: currentColor; }
.ls-dl .xb .xf-hero .dl-bchips { margin-top: 20px; }

/* The prints beside the words, the logo stuck on their corner. */
.ls-dl .xf-art { grid-area: art; position: relative; align-self: start; height: 290px; margin-top: 24px; }
.ls-dl .xf-prints { position: absolute; inset: 0; }
.ls-dl .xf-prints .xb-print { position: absolute; }
.ls-dl .xf-prints .xb-print--0 { z-index: 2; top: 0; right: 0; width: 196px; transform: rotate(3deg); }
.ls-dl .xf-prints .xb-print--0.xb-print--wide { top: 40px; right: -12px; width: 250px; }
.ls-dl .xf-prints .xb-print--1 { top: 86px; left: -26px; width: 150px; transform: rotate(-7deg); }
.ls-dl .xf-prints.xb-fallback { display: grid; place-items: center; }
.ls-dl .xf-prints .xb-fallback-model, .ls-dl .xf-prints .xb-none-art { width: 236px; }
.ls-dl .xf-sticker { position: absolute; z-index: 3; top: 164px; right: 118px; }
.ls-dl .xf-prints.xb-n1 .xf-sticker { right: 128px; }
.ls-dl .xf-prints.xb-n1:has(.xb-print--wide) .xf-sticker { top: 138px; right: 158px; }
.ls-dl .xf-sticker .dl-bid-plate { box-shadow: 0 2px 4px rgba(20, 20, 18, .2), 0 14px 26px -12px rgba(20, 20, 18, .5); }
.ls-dl .xf-sticker .tud-logo.brand-identity-logo { --logo-size: 128px; }

/* The ticket: paper on the poster, the saving in the brand's colour, our orange on our own action. */
.ls-dl .xf-deal { grid-area: deal; position: relative; z-index: 2; align-self: start; margin-top: 18px; }
.ls-dl .dl-brand.xb .xf-deal .dl-offer, .ls-dl .xf-deal .dl-none { --ticket-surface: var(--ls-paper); width: 100%; max-width: none; padding: 26px 26px 22px; border-radius: 20px; color: var(--ls-ink); background: var(--ls-paper); box-shadow: var(--tud-shadow-card-raised); }
.ls-dl .dl-brand.xb .xf-deal .dl-offer-saving { color: var(--xa); }
.ls-dl .dl-brand.xb .xf-story:not(.xb-own) .xf-deal .dl-offer-saving { color: #C93F12; }
.ls-dl .dl-brand.xb .xf-deal .dl-offer-saving--long { font-size: clamp(40px, 3.6vw, 52px); }
.ls-dl .dl-brand.xb .xf-deal .dl-offer :is(.dl-offer-title, .deal-code-use, .deal-code-note, .deal-code-expiry) { color: var(--ls-ink); }
.ls-dl .dl-brand.xb .xf-deal .dl-offer .brand-offer-cta { color: #141412; background: #FF5C26; border-color: #FF5C26; box-shadow: none; }
.ls-dl .dl-brand.xb .xf-deal .dl-offer .brand-offer-cta:hover { background: #FF7A4D; border-color: #FF7A4D; }
.ls-dl .xf-deal .dl-offer :focus-visible, .ls-dl .xf-deal .dl-none :focus-visible { outline-color: var(--ls-ink); }
.ls-dl .xf-deal .dl-none-title { font-size: clamp(26px, 2.4vw, 32px); }
.ls-dl .xf-deal .dl-none p { color: var(--ls-soft); }
.ls-dl .xf-deal .dl-none .ls-btn { width: 100%; }

/* Below the poster the story keeps the full width; the dock waits until the ticket is gone. */
/* The white pieces or times run straight into the white steps band, one sheet of paper, not two with a cream gap. */
.ls-dl .xf-story .xe-steps { margin-top: 0; }
.ls-dl .xf-story :is(.dl-shop-wrap, .dl-brand-sec) + .xe-steps { padding-top: 8px; }

/* A hero with nothing under the name but its chips (no tagline, no links) takes the tablet's order on a desktop
   too: the photos under the chips in the words' column, so that column is never an empty block beside the ticket. */
@media (min-width: 1181px) {
  .ls-dl .xf-hero.xf-thin .xf-in { grid-template-areas: "crumbs crumbs crumbs" "title title deal" "more more deal" "art art deal" ". . deal"; }
  .ls-dl .xf-hero.xf-thin .xf-art { justify-self: start; width: 290px; height: 280px; margin: 32px 0 0 40px; }
}
@media (max-width: 1180px) and (min-width: 961px) {
  .ls-dl .xf-in { grid-template-columns: minmax(0, 1fr) minmax(0, 352px); grid-template-rows: auto; grid-template-areas: "crumbs crumbs" "title deal" "lead deal" "art deal" "more deal"; }
  .ls-dl .xf-art { justify-self: start; width: 290px; height: 280px; margin: 32px 0 28px 40px; }
}
@media (max-width: 960px) {
  .ls-dl .dl-brand.xb .xf-hero.dl-bhero { padding-bottom: 40px; }
  .ls-dl .xf-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "crumbs" "art" "title" "lead" "deal" "more"; }
  .ls-dl .xf-art { height: 236px; margin-top: 10px; }
  .ls-dl .xf-prints .xb-print { padding: 6px 6px 22px; }
  .ls-dl .xf-prints .xb-print--0 { top: 4px; right: 50%; width: 168px; transform: translateX(66%) rotate(3deg); }
  .ls-dl .xf-prints .xb-print--0.xb-print--wide { top: 24px; right: 50%; width: 286px; transform: translateX(50%) rotate(-3deg); }
  .ls-dl .xf-prints .xb-print--1 { top: 30px; left: 50%; width: 128px; transform: translateX(-96%) rotate(-7deg); }
  .ls-dl .xf-sticker { top: 140px; right: auto; left: calc(50% - 142px); }
  .ls-dl .xf-prints.xb-n1 .xf-sticker { top: 148px; right: auto; left: calc(50% - 122px); }
  .ls-dl .xf-prints.xb-n1:has(.xb-print--wide) .xf-sticker { top: 138px; right: auto; left: calc(50% - 172px); }
  .ls-dl .xf-sticker .tud-logo.brand-identity-logo { --logo-size: 84px; }
  .ls-dl .xf-prints .xb-fallback-model, .ls-dl .xf-prints .xb-none-art { width: 188px; }
  .ls-dl .xf-title { gap: 14px; margin-top: 12px; }
  .ls-dl .xf-nophoto .xf-title { justify-items: start; }
  .ls-dl .xf-name { font-size: clamp(50px, 14.4vw, 76px); }
  .ls-dl .xf-deal { margin-top: 26px; }
  .ls-dl .dl-brand.xb .xf-deal .dl-offer, .ls-dl .xf-deal .dl-none { padding: 24px 22px 20px; }
  .ls-dl .xf-more { margin-top: 26px; max-width: none; }
  .ls-dl .xf-more > :first-child { margin-top: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .ls-dl .xf-prints .xb-print { animation: xb-deal 620ms var(--ls-ease) both; }
  .ls-dl .xf-prints .xb-print--1 { animation-delay: 80ms; }
}
@media (forced-colors: active) { .ls-dl .xf-deal .dl-offer, .ls-dl .xf-deal .dl-none { border: 1px solid CanvasText; } }
/* F: the dotted line stops at the last step instead of running on past it. */
.ls-dl .xf-story .xe-steps .dl-steps li:last-child { position: relative; background: var(--ls-paper); }
/* F: focus rings on the poster take its ink, so they show on a dark or a light brand colour alike. */
.ls-dl .xf-hero :is(.xf-crumbs, .xf-more) :focus-visible { outline: 2px solid var(--xai); outline-offset: 3px; }

/* =========================================================
   F in dark (the site's switch: data-theme="dark" on html, set by tud_theme or the device).
   The poster deepens instead of inverting: its ground is the brand's dark band let down
   towards the canvas, lifted by a little of the brand's light accent, and the name takes
   that accent. The ticket is cut from the page itself, edged in the accent, so it still
   stands off the ground; the dock is a raised piece of the page with the saving in the
   accent. Every rule sits under :root[data-theme="dark"], so light is untouched.
   ========================================================= */
:root[data-theme="dark"] .ls-dl :is(.xf-story, .xf-hero) { --xfd-a: #FF8A5C; --xfd-deep: #8C3210; }
:root[data-theme="dark"] .ls-dl .dl-brand[data-brand-design="brand"] :is(.xf-story, .xf-hero) { --xfd-a: var(--brand-accent); --xfd-deep: var(--brand-band); }
:root[data-theme="dark"] .ls-dl :is(.xf-story, .xf-hero)[style*="--xad"] { --xfd-a: var(--xad); --xfd-deep: var(--xbandd); }
:root[data-theme="dark"] .ls-dl :is(.xf-story, .xf-hero) { --xfd-ground: color-mix(in oklab, var(--xfd-a) 12%, color-mix(in oklab, var(--xfd-deep) 80%, #1A1613)); }
:root[data-theme="dark"] .ls-dl .xf-story > .dl-bband--dots { --dl-band-dark: var(--xfd-ground); }

/* The poster: deep brand ground, cream words, the name in the brand's light accent. */
:root[data-theme="dark"] .ls-dl .dl-brand.xb .xf-hero.dl-bhero { color: var(--ls-ink); background: var(--xfd-ground); }
:root[data-theme="dark"] .ls-dl .dl-brand.xb .xf-hero .ls-crumbs :is(li, a, [aria-current="page"]) { color: var(--ls-ink); }
:root[data-theme="dark"] .ls-dl .xf-hero .dl-h1 { color: var(--xfd-a); }
:root[data-theme="dark"] .ls-dl .xf-hero :is(.xf-crumbs, .xf-more) :focus-visible { outline-color: var(--ls-ink); }

/* The prints stay paper, an object on the poster, toned down from white so they do not glare; the shadows go black. */
:root[data-theme="dark"] .ls-dl .xf-prints .xb-print { background: #ECE5DA; box-shadow: var(--tud-shadow-paper); }
:root[data-theme="dark"] .ls-dl .xf-prints .xb-print img { background: #D9D0C2; }
:root[data-theme="dark"] .ls-dl .xf-sticker .dl-bid-plate { box-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 14px 26px -12px rgba(0, 0, 0, .8); }

/* The ticket: cut from the page, edged in the accent, the saving in the accent. */
:root[data-theme="dark"] .ls-dl .dl-brand.xb .xf-deal .dl-offer, :root[data-theme="dark"] .ls-dl .xf-deal .dl-none { --ticket-surface: var(--ls-canvas); background: var(--ls-canvas); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--xfd-a) 72%, var(--ls-canvas)), var(--tud-shadow-card-raised); }
:root[data-theme="dark"] .ls-dl .dl-brand.xb .xf-story .xf-deal .dl-offer-saving { color: var(--xfd-a); }
/* The notches are masked out of the ticket, which takes the inset edge with them; a ring on each notch carries the edge round the cut. */
:root[data-theme="dark"] .ls-dl .dl-brand.xb[data-brand-card="ticket"] .xf-deal .dl-offer {
  --xfd-edge: color-mix(in oklab, var(--xfd-a) 72%, var(--ls-canvas));
  background-image: radial-gradient(circle at 0 62%, #0000 14.75px, var(--xfd-edge) 15.25px, var(--xfd-edge) 16.5px, #0000 17px), radial-gradient(circle at 100% 62%, #0000 14.75px, var(--xfd-edge) 15.25px, var(--xfd-edge) 16.5px, #0000 17px);
  background-repeat: no-repeat; }
/* With an action the card is two pieces cut at the seam (deals-pages.css), so the edge is each piece's own border and
   the ring round a notch is drawn on the piece that owns that half of it; nothing is drawn along the seam itself. */
:root[data-theme="dark"] .ls-dl .dl-brand.xb[data-brand-card="ticket"] .xf-deal .dl-offer:has(> .brand-offer-action)::before {
  background: radial-gradient(circle at 0 100%, #0000 calc(var(--ticket-notch) - .25px), var(--xfd-edge) calc(var(--ticket-notch) + .25px) calc(var(--ticket-notch) + 1.5px), #0000 calc(var(--ticket-notch) + 2px)), radial-gradient(circle at 100% 100%, #0000 calc(var(--ticket-notch) - .25px), var(--xfd-edge) calc(var(--ticket-notch) + .25px) calc(var(--ticket-notch) + 1.5px), #0000 calc(var(--ticket-notch) + 2px)), var(--ticket-surface);
  background-origin: border-box; }
:root[data-theme="dark"] .ls-dl .dl-brand.xb[data-brand-card="ticket"] .xf-deal .dl-offer:has(> .brand-offer-action)::after {
  background: radial-gradient(circle at 0 0, #0000 calc(var(--ticket-notch) - .25px), var(--xfd-edge) calc(var(--ticket-notch) + .25px) calc(var(--ticket-notch) + 1.5px), #0000 calc(var(--ticket-notch) + 2px)), radial-gradient(circle at 100% 0, #0000 calc(var(--ticket-notch) - .25px), var(--xfd-edge) calc(var(--ticket-notch) + .25px) calc(var(--ticket-notch) + 1.5px), #0000 calc(var(--ticket-notch) + 2px)), var(--ticket-surface);
  background-origin: border-box; }
:root[data-theme="dark"] .ls-dl .dl-brand.xb .xf-story .xf-deal :is(.dl-offer, .dl-none) :focus-visible { outline-color: var(--ls-ink); }
/* Offer card "Outlined" (page_settings.card, chosen on the portal's Brand page): F's white card edged in the brand's
   colour, so the choice shows on F as it did on the earlier page (brand-page.css's own rule is outranked by the card above). */
.ls-dl .dl-brand.xb[data-brand-card="outlined"] .xf-deal .dl-offer { box-shadow: inset 0 0 0 3px var(--xa), var(--tud-shadow-card-raised); }
:root[data-theme="dark"] .ls-dl .dl-brand.xb[data-brand-card="outlined"] .xf-deal .dl-offer { box-shadow: inset 0 0 0 3px var(--xfd-a), var(--tud-shadow-card-raised); }


/* =========================================================
   F: the brand's own logo plates (page_settings.logo_plate). The sticker on the prints, the plate by the
   name, the dock's logo and the shop's logo tile all follow one choice of border, width and shape, set as
   data attributes on .xf-story. The ring colours come from the page (--lp-ring light, --lp-ring-d dark),
   already checked for 3:1 on the poster. A brand that keeps Auto gets none of these attributes.
   ========================================================= */
.ls-dl .xf-story { --lp-w: 3px; }
.ls-dl .xf-story[data-lp-width="thick"] { --lp-w: 6px; }
@media (max-width: 600px) { .ls-dl .xf-story { --lp-w: 2px; } .ls-dl .xf-story[data-lp-width="thick"] { --lp-w: 4px; } }
.ls-dl .dl-brand .xf-story[data-lp-width="thick"] .dl-bid-plate { padding: var(--lp-w); }
.ls-dl .dl-brand .xf-story[data-lp-width="thick"] .dl-bid-plate.xe-dock-logo { padding: calc(var(--lp-w) * .67); }
.ls-dl .dl-brand .xf-story[data-lp-width="thick"]:not([data-lp-border]) .dl-bid-plate .tud-logo.brand-identity-logo.tud-logo--round { box-shadow: 0 0 0 calc(var(--lp-w) - 1px) var(--brand-accent, #8E2A1F); }

/* Border: a solid ring in the chosen colour, round logos included; None drops the ring and keeps the lift. */
.ls-dl .dl-brand .xf-story[data-lp-border] .dl-bid-plate { padding: var(--lp-w); background: var(--lp-ring); }
.ls-dl .dl-brand .xf-story[data-lp-border] .dl-bid-plate.xe-dock-logo { padding: calc(var(--lp-w) * .67); }
.ls-dl .dl-brand .xf-story[data-lp-border] .dl-bid-plate .tud-logo.brand-identity-logo { box-shadow: none; }
.ls-dl .dl-brand .xf-story[data-lp-border="none"] .dl-bid-plate { padding: 0; background: transparent; }
.ls-dl .dl-brand .xf-story[data-lp-border="none"] .dl-bid-plate.xe-dock-logo { padding: 0; }
.ls-dl .dl-brand .xf-story[data-lp-border]:not([data-lp-border="none"]) .shop-stall-logo { box-shadow: 0 0 0 var(--lp-w) var(--lp-ring); }
:root[data-theme="dark"] .ls-dl .dl-brand .xf-story[data-lp-border] .dl-bid-plate { background: var(--lp-ring-d); }
:root[data-theme="dark"] .ls-dl .dl-brand .xf-story[data-lp-border="none"] .dl-bid-plate { background: transparent; }
:root[data-theme="dark"] .ls-dl .dl-brand .xf-story[data-lp-border]:not([data-lp-border="none"]) .shop-stall-logo { box-shadow: 0 0 0 var(--lp-w) var(--lp-ring-d); }

/* Shape: the ring follows it. A circle insets a square or wide logo on its own background so no wordmark is cut. */
.ls-dl .dl-brand .xf-story[data-lp-shape="circle"] :is(.dl-bid-plate, .dl-bid-plate .tud-logo.brand-identity-logo, .shop-stall-logo) { border-radius: 50%; }
.ls-dl .dl-brand .xf-story[data-lp-shape="circle"] :is(.dl-bid-plate .tud-logo.brand-identity-logo, .shop-stall-logo):not(.tud-logo--round) > img { inset: 14.6%; width: 70.8%; height: 70.8%; object-fit: contain; border-radius: 0; }
.ls-dl .dl-brand .xf-story[data-lp-shape="rounded"] :is(.dl-bid-plate, .dl-bid-plate .tud-logo.brand-identity-logo, .shop-stall-logo) { border-radius: 20%; }
.ls-dl .dl-brand .xf-story[data-lp-shape="square"] :is(.dl-bid-plate, .dl-bid-plate .tud-logo.brand-identity-logo, .shop-stall-logo) { border-radius: 2px; }
.ls-dl .dl-brand .xf-story:is([data-lp-shape="rounded"], [data-lp-shape="square"]) .tud-logo--round > img { border-radius: inherit; }
@media (forced-colors: active) { .ls-dl .xf-story[data-lp-border]:not([data-lp-border="none"]) .dl-bid-plate { border: 1px solid CanvasText; } }

/* F with the sticker off: the logo plate sits above the name, as on a page with no photos. */
.ls-dl .xf-nosticker .xf-title { justify-items: start; }
/* F, one upright print on a phone: centred, the sticker on its lower left corner. */
@media (max-width: 960px) {
  .ls-dl .xf-prints.xb-n1 .xb-print--0:not(.xb-print--wide) { width: 176px; transform: translateX(50%) rotate(3deg); }
  .ls-dl .xf-prints.xb-n1:not(:has(.xb-print--wide)) .xf-sticker { top: 150px; left: calc(50% - 128px); }
}

/* F, Logo centred (hero_art layout centre, founder 24 Oct 2026): the two prints side by side, tilted apart,
   the logo sticker centred on the seam where they overlap, in their lower half. Sticker off: the same pair, a
   little closer, so the seam is not left empty. */
.ls-dl .xf-prints.xf-centre .xb-print { width: 150px; }
.ls-dl .xf-prints.xf-centre .xb-print--0 { top: 14px; right: auto; left: 50%; transform: translateX(-94%) rotate(-6deg); }
.ls-dl .xf-prints.xf-centre .xb-print--1 { top: 30px; left: 50%; transform: translateX(-6%) rotate(5deg); }
.ls-dl .xf-nosticker .xf-prints.xf-centre .xb-print--0 { transform: translateX(-88%) rotate(-6deg); }
.ls-dl .xf-nosticker .xf-prints.xf-centre .xb-print--1 { transform: translateX(-12%) rotate(5deg); }
.ls-dl .xf-prints.xf-centre .xf-sticker { top: 120px; right: auto; left: 50%; translate: -50% 0; }
.ls-dl .xf-prints.xf-centre .xf-sticker .tud-logo.brand-identity-logo { --logo-size: 112px; }
@media (max-width: 960px) {
  .ls-dl .xf-prints.xf-centre .xb-print { width: 132px; }
  .ls-dl .xf-prints.xf-centre .xb-print--0 { top: 6px; }
  .ls-dl .xf-prints.xf-centre .xb-print--1 { top: 20px; }
  .ls-dl .xf-prints.xf-centre .xf-sticker { top: 104px; }
  .ls-dl .xf-prints.xf-centre .xf-sticker .tud-logo.brand-identity-logo { --logo-size: 84px; }
}

/* =========================================================
   F with no photos: the logo is the art. The big sticker sits centred where the prints would be, in the
   brand's own border and shape (the logo plate rules above), and the category's line doodle is drawn under
   it in the poster's ink, upright and centred. No model, no stand-in photo; the name carries no logo.
   ========================================================= */
.ls-dl .xf-prints.xf-solo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.ls-dl .xf-sticker.xf-sticker--solo { position: relative; inset: auto; z-index: 1; }
.ls-dl .xf-sticker--solo .tud-logo.brand-identity-logo { --logo-size: 176px; }
.ls-dl .xf-solo-doodle { display: block; flex: none; width: 92px; height: 92px; background: var(--xai); -webkit-mask: var(--xf-doodle) center / contain no-repeat; mask: var(--xf-doodle) center / contain no-repeat; }
.ls-dl .xf-solo-doodle--sports-fitness { width: 124px; height: 84px; }
.ls-dl .xf-solo--doodle .xf-solo-doodle { width: 200px; height: 200px; }
.ls-dl .xf-solo--doodle .xf-solo-doodle--sports-fitness { width: 236px; height: 160px; }
.ls-dl .xf-hero.xf-noart .xf-in { grid-template-areas: "crumbs crumbs crumbs" "title title deal" "lead lead deal" "more more deal" ". . deal"; }
@media (max-width: 960px) {
  .ls-dl .xf-nophoto .xf-art { height: auto; margin-top: 18px; }
  .ls-dl .xf-prints.xf-solo { position: relative; gap: 12px; }
  .ls-dl .xf-sticker--solo .tud-logo.brand-identity-logo { --logo-size: 132px; }
  .ls-dl .xf-solo-doodle { width: 68px; height: 68px; }
  .ls-dl .xf-solo-doodle--sports-fitness { width: 92px; height: 62px; }
  .ls-dl .xf-solo--doodle .xf-solo-doodle { width: 150px; height: 150px; }
  .ls-dl .xf-solo--doodle .xf-solo-doodle--sports-fitness { width: 190px; height: 128px; }
  .ls-dl .xf-hero.xf-noart .xf-in { grid-template-areas: "crumbs" "title" "lead" "deal" "more"; }
}
@media (prefers-reduced-motion: no-preference) {
  .ls-dl .xf-solo > * { animation: xb-deal 620ms var(--ls-ease) both; }
  .ls-dl .xf-solo > .xf-solo-doodle { animation-delay: 90ms; }
}
@media (forced-colors: active) { .ls-dl .xf-solo-doodle { background: CanvasText; } }
:root[data-theme="dark"] .ls-dl .xf-solo-doodle { background: var(--ls-ink); }

/* =========================================================
   F's dock (founder, 23 Oct 2026): the ticket's stub, not a black pill pasted on the page. A strip of the
   poster's own colour holds the logo, a perforation parts it from the saving, which is set in the accent on
   the brand's tone, as on the ticket; our orange stays on our one action. With script it is fixed to the
   bottom of the screen and rises only while the ticket and the footer are both out of sight
   (explore-brand.js); without script it keeps its place at the end of the story.
   ========================================================= */
.ls-dl .xf-dock { --xfk-h: 64px; --xfk-stub: 76px; --xfk-r: 18px; --xfk-ground: var(--xt); --xfk-save: var(--xa); --xfk-stubbg: var(--xa); --xfk-edge: color-mix(in oklab, var(--xa) 22%, transparent); }
.ls-dl .xf-story:not(.xb-own) .xf-dock { --xfk-save: #C93F12; }
/* the notches mask the ticket, so its lift is a drop shadow on the dock around it, which follows the cut */
.ls-dl .xf-dock { filter: drop-shadow(0 1px 1px rgba(20, 20, 18, .12)) drop-shadow(0 10px 16px rgba(20, 20, 18, .2)); }
.ls-dl .xf-dock .xe-dock-in { position: relative; gap: 16px; width: min(100%, 620px); min-height: var(--xfk-h); padding: 8px 8px 8px calc(var(--xfk-stub) + 16px); overflow: hidden; border-radius: var(--xfk-r); color: var(--ls-ink); background: var(--xfk-ground);
  /* the perforation's two notches, bitten from the top and bottom edge where the stub meets the ticket */
  -webkit-mask: radial-gradient(circle 6px at var(--xfk-stub) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 6px at var(--xfk-stub) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 6px at var(--xfk-stub) 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 6px at var(--xfk-stub) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; }
/* the stub: the poster's colour, the logo on it as on the hero's sticker, the dotted tear line on its edge */
/* The edge (founder, 24 Oct 2026, 3 am): one hairline over the stub and the ticket alike, and a ring round each
   notch, so the outline runs into the cut-outs instead of stopping at them. The rings sit just outside the mask's
   6px bite, inside the paper, so the hole itself stays clear. */
.ls-dl .xf-dock .xe-dock-in::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--xfk-edge);
  background: radial-gradient(circle at var(--xfk-stub) 0, #0000 5.8px, var(--xfk-edge) 5.8px 6.8px, #0000 6.8px), radial-gradient(circle at var(--xfk-stub) 100%, #0000 5.8px, var(--xfk-edge) 5.8px 6.8px, #0000 6.8px); }
.ls-dl .xf-dock-stub { position: absolute; inset: 0 auto 0 0; display: grid; place-items: center; width: var(--xfk-stub); background: var(--xfk-stubbg); }
.ls-dl .xf-dock-stub::after { content: ""; position: absolute; top: 10px; right: -1px; bottom: 10px; width: 2px; background: repeating-linear-gradient(180deg, var(--xfk-ground) 0 4px, #0000 4px 8px); }
.ls-dl .xf-dock .xe-dock-logo.dl-bid-plate { padding: 2px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(20, 20, 18, .25); }
.ls-dl .xf-dock .xe-dock-logo .tud-logo.brand-identity-logo { --logo-size: 42px; }
.ls-dl .xf-dock .xe-dock-text { gap: 2px; }
.ls-dl .xf-dock .xe-dock-text strong { color: var(--xfk-save); font-family: var(--tud-font-secondary); font-size: 22px; font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; white-space: nowrap; }
.ls-dl .xf-dock .xe-dock-text span { color: var(--ls-soft); font-size: 14px; font-weight: 600; }
.ls-dl .xf-dock .brand-offer-cta { min-height: 48px; padding: 0 24px; font-size: 16px; }
.ls-dl .xf-dock :focus-visible { outline: 2px solid var(--ls-ink); outline-offset: 2px; }
/* With script: fixed above the bottom edge and the home indicator. In and out are one motion played both ways
   (founder, 24 Oct 2026, 3 am: it came in as a snap): the ticket rises 24px and fades in, and falls 24px and fades
   out, on the same soft ease and the same durations, transform and opacity only. Transitions start only once the
   script has parked it (is-ready), so the page load never plays a fade; the first rise on scroll always does.
   will-change rides the script's is-rising class, just around the motion. */
.ls-dl .xf-dock { --xdock-ease: cubic-bezier(.4, 0, .2, 1); --xdock-rise: 24px; --xdock-move: 280ms; --xdock-fade: 220ms; }
.ls-dl .xf-dock.xf-dock--js { position: fixed; right: 0; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); left: 0; margin: 0; }
.ls-dl .xf-dock--js .xe-dock-in { opacity: 1; transform: translate3d(0, 0, 0); visibility: visible; }
.ls-dl .xf-dock--js:not(.is-on) .xe-dock-in { opacity: 0; transform: translate3d(0, var(--xdock-rise), 0); visibility: hidden; pointer-events: none; }
.ls-dl .xf-dock--js.is-ready .xe-dock-in { transition: opacity var(--xdock-fade) var(--xdock-ease), transform var(--xdock-move) var(--xdock-ease), visibility 0s linear 0s; }
.ls-dl .xf-dock--js.is-ready:not(.is-on) .xe-dock-in { transition: opacity var(--xdock-fade) var(--xdock-ease), transform var(--xdock-move) var(--xdock-ease), visibility 0s linear var(--xdock-move); }
.ls-dl .xf-dock.xf-dock--js.is-rising .xe-dock-in { will-change: transform, opacity; }
/* E's phone dock (a full width sheet with the action under the words) does not apply: F stays one row at every width. */
@media (max-width: 960px) {
  .ls-dl .xf-dock { bottom: 16px; padding-inline: 16px; }
  .ls-dl .xf-dock .xe-dock-in { flex-wrap: nowrap; width: min(100%, 620px); border-radius: var(--xfk-r); }
  .ls-dl .xf-dock .brand-offer-action { flex: none; }
  .ls-dl .xf-dock .brand-offer-cta { width: auto; }
}
@media (max-width: 600px) {
  .ls-dl .xf-dock { --xfk-h: 60px; --xfk-stub: 58px; --xfk-r: 16px; }
  .ls-dl .xf-dock.xf-dock--js { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .ls-dl .xf-dock .xe-dock-in { gap: 10px; padding: 7px 7px 7px calc(var(--xfk-stub) + 12px); }
  .ls-dl .xf-dock .xe-dock-logo .tud-logo.brand-identity-logo { --logo-size: 34px; }
  .ls-dl .xf-dock .xe-dock-text strong { font-size: 19px; }
  .ls-dl .xf-dock .xe-dock-text span { font-size: 13px; }
  .ls-dl .xf-dock .brand-offer-cta { min-height: 46px; padding: 0 16px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  /* no rise, the same short plain fade both ways */
  .ls-dl .xf-dock--js .xe-dock-in, .ls-dl .xf-dock--js:not(.is-on) .xe-dock-in { transform: none; }
  .ls-dl .xf-dock--js.is-ready .xe-dock-in { transition: opacity 160ms linear, visibility 0s linear 0s; }
  .ls-dl .xf-dock--js.is-ready:not(.is-on) .xe-dock-in { transition: opacity 160ms linear, visibility 0s linear 160ms; }
  .ls-dl .xf-dock.xf-dock--js.is-rising .xe-dock-in { will-change: opacity; }
}
@media (forced-colors: active) { .ls-dl .xf-dock .xe-dock-in { -webkit-mask: none; mask: none; border: 1px solid CanvasText; } .ls-dl .xf-dock .xe-dock-in::after { display: none; } .ls-dl .xf-dock-stub { border-right: 1px solid CanvasText; } }
/* Dark: the strip is the poster's deep ground, the ticket a tinted piece of the page edged in the accent; a short, close shadow only. */
:root[data-theme="dark"] .ls-dl .xf-dock { --xfk-ground: color-mix(in oklab, var(--xfd-a) 9%, var(--ls-paper)); --xfk-save: var(--xfd-a); --xfk-stubbg: var(--xfd-ground); --xfk-edge: color-mix(in oklab, var(--xfd-a) 34%, transparent); }
:root[data-theme="dark"] .ls-dl .xf-dock { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); }
:root[data-theme="dark"] .ls-dl .xf-dock .xe-dock-logo.dl-bid-plate { box-shadow: none; }