/* Get the app (/downloads/), Figma web 2026-10 Students, option A (1632:139990 at 1440, 1632:140069 at 390).
 *
 * The homepage's app section on a page of its own: the copy at the redo's bigger type, the title starting 148px from
 * the top, and the phone stage on the right, built from the same frame as the homepage (one container, every piece in
 * cqw, so 390 is the 1440 picture scaled). The stickers are the live offers, written in at the edge
 * (functions/downloads/index.js); the lanyard answers the hand (tilt.js, data-tilt) and settles in (data-hm-settle).
 * Dark mode comes from company-theme.css plus the rules at the end of this file.
 */

/* The "Scan me" note's hand, declared in home.css on the homepage, so declared here too. */
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/Caveat-700-latin.woff2') format('woff2'); }

/* ---------- the stage (the homepage's, measured from the same frame) ---------- */
.ls-dlpage .ls-app { --ls-app-yellow: #FFD048; gap: clamp(28px, 4vw, 56px); overflow: visible; }
.ls-dlpage .ls-app-copy { position: relative; }
.ls-dlpage .ls-app-mark { display: inline-block; padding: .02em .22em .06em; border-radius: 10px 6px 12px 8px / 6px 12px 8px 10px; background: var(--ls-app-yellow); color: inherit; transform: rotate(-1.2deg); }
.ls-dlpage .ls-app-get { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px 22px; margin-top: 30px; }
/* The two badges are one size: the column hugs the wider one and both stretch to it, marks and words on the same inset (the founder, Addendum 31). */
.ls-dlpage .ls-app-stores { flex-direction: column; align-items: stretch; margin-top: 0; }
.ls-dlpage .ls-app-stores .ls-store { display: grid; grid-template-columns: 28px auto; justify-content: start; }
/* The stage: the sand panel is the container every piece measures from; its pieces may stand out past it. */
/* Room above the panel for the phone and the plane that stand out past its top, so they never reach the section before. */
.ls-dlpage .ls-app-stage { position: relative; aspect-ratio: 585 / 600; margin-top: clamp(40px, 18.8%, 112px); border-radius: 28px; background: var(--ls-sand); container-type: inline-size; }
/* No filter on the phone (Addendum 33): in Safari a filtered layer is composited apart from the page and its bounds
   showed as a pale box over the paper grain. The shadow is a rounded box behind the frame instead, painted in flow. */
.ls-dlpage .ls-app-phone { position: absolute; left: 21.88cqw; top: -6.5cqw; z-index: 2; width: 56.24cqw; aspect-ratio: 760 / 1556; }
.ls-dlpage .ls-app-phone::before { content: ""; position: absolute; inset: 1.2% 4% 1.2% 4%; z-index: -1; border-radius: 8.5cqw; box-shadow: 0 18px 22px rgba(20, 20, 18, .26); }
.ls-dlpage .ls-app-phone img { position: relative; display: block; width: 100%; height: auto; }
/* The ring: six die-cut stickers, the offer and its logo on the category tint inside a white cut edge, each at the frame's
   own corner and tilt (the tilt turns about the sticker's top-left corner, as Figma does). */
.ls-dlpage .ls-app-ring { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.ls-dlpage .ls-stk { position: absolute; pointer-events: auto; transform-origin: 0 0; transform: rotate(var(--r)); transition: transform 760ms var(--ls-ease); transition-delay: calc(var(--i) * 70ms); }
.ls-dlpage .ls-stk-link { display: flex; align-items: center; gap: 1.71cqw; padding: 1.2cqw 2.74cqw 1.2cqw 1.2cqw; border: .68cqw solid #FFFFFF; border-radius: 3.08cqw; background: var(--ls-tone, var(--ls-sand)); color: var(--ls-ink); text-decoration: none; box-shadow: 0 1px 2px rgba(20, 20, 18, .14), 0 12px 24px -12px rgba(20, 20, 18, .5); transition: transform 120ms var(--ls-ease); }
.ls-dlpage .ls-stk .tud-logo { --logo-size: 6.84cqw; border-radius: 1.71cqw; background: var(--stub, #FFFFFF); }
.ls-dlpage .ls-stk-text { display: grid; line-height: 1.1; }
.ls-dlpage .ls-stk-text strong { font-family: var(--tud-font-secondary); font-size: 3.25cqw; font-weight: 700; letter-spacing: -0.03em; }
.ls-dlpage .ls-stk-text span { font-size: 2.05cqw; font-weight: 700; color: color-mix(in srgb, var(--ls-ink) 76%, var(--ls-tone, var(--ls-sand))); white-space: nowrap; }
@media (hover: hover) { .ls-dlpage .ls-stk-link:hover { transform: translateY(-2px); } .ls-dlpage .ls-stk-link:hover .ls-stk-text span { text-decoration: underline; text-underline-offset: 2px; } }
.ls-dlpage .ls-stk--0 { --i: 0; --r: -6deg; --sx: -90px; --sy: -70px; left: 3.38cqw; top: 7.57cqw; }
.ls-dlpage .ls-stk--1 { --i: 1; --r: 5deg; --sx: 100px; --sy: -60px; left: 69.3cqw; top: 3.97cqw; }
.ls-dlpage .ls-stk--2 { --i: 2; --r: -3deg; --sx: -130px; --sy: 10px; left: -.29cqw; top: 41.86cqw; }
.ls-dlpage .ls-stk--3 { --i: 3; --r: 4deg; --sx: 130px; --sy: 0; left: 63.2cqw; top: 29.49cqw; }
.ls-dlpage .ls-stk--4 { --i: 4; --r: 4deg; --sx: -80px; --sy: 100px; left: 3.52cqw; top: 60.58cqw; }
.ls-dlpage .ls-stk--5 { --i: 5; --r: -5deg; --sx: 90px; --sy: 100px; left: 63.64cqw; top: 54.79cqw; }
/* The QR: a white sticker slapped on the phone's lower corner. */
.ls-dlpage .ls-app-qr { position: absolute; left: 59.81cqw; top: 76.85cqw; z-index: 4; display: grid; justify-items: center; gap: .34cqw; margin: 0; padding: 1.03cqw 1.03cqw .68cqw; border-radius: 2.39cqw; background: #FFFFFF; box-shadow: 0 1px 2px rgba(20, 20, 18, .14), 0 12px 24px -12px rgba(20, 20, 18, .5); transform-origin: 0 0; transform: rotate(7deg); }
.ls-dlpage .ls-app-qr-code { display: block; width: 14.36cqw; }
.ls-dlpage .ls-app-qr-svg { display: block; width: 100%; height: auto; }
.ls-dlpage .ls-app-qr-note { color: var(--ls-ink); font-family: 'Caveat', cursive; font-size: 3.25cqw; font-weight: 700; line-height: 1; }
/* Around the phone, on the paper: the kit's paper plane looping out past the panel's top, the student scanning with her
   phone by its foot, and the campus lanyard still (its badge left off) standing on a contact shadow. Each drifts in once. */
.ls-dlpage .ls-app-doodle { position: absolute; z-index: 1; line-height: 0; pointer-events: none; transform-origin: 0 0; transform: rotate(var(--r, 0deg)); transition: transform 900ms var(--ls-ease) 300ms; }
.ls-dlpage .ls-app-doodle img { display: block; width: 100%; height: auto; }
.ls-dlpage .ls-app-doodle--plane { --r: -6deg; --dx: -70px; --dy: 36px; left: 52.5cqw; top: -14.31cqw; width: 42.22cqw; }
.ls-dlpage .ls-app-doodle--girl { --r: 0deg; --dy: 18px; left: 71.45cqw; top: 74.53cqw; width: 28.89cqw; }
.ls-dlpage .ls-app-still { position: absolute; z-index: 1; line-height: 0; }
.ls-dlpage .ls-app-still .hm-model { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
/* The contact shadow under the still's base: darkest in the middle, a short soft edge, so it sits on the paper. */
.ls-dlpage .ls-app-still::after { content: ""; position: absolute; left: .85cqw; right: .85cqw; bottom: -.85cqw; height: 2.74cqw; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(20, 20, 18, .40) 0, rgba(20, 20, 18, .16) 42%, rgba(20, 20, 18, 0) 70%); }
.ls-dlpage .ls-app-still--lanyard { left: 5.47cqw; top: 67.18cqw; width: 14.02cqw; }
/* Here the stage starts 40px under the title's top line, as in the frame. */
.ls-dlpage .ls-app-stage { margin-top: 40px; }
/* ---------- the section: copy left, stage right (after the stage rules, which carry the homepage copy styles) ---------- */
.ls-dlpage .dl-app { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 585px); justify-content: space-between; align-items: start; gap: 32px; padding-top: 72px; padding-bottom: 80px; }
.ls-dlpage .ls-app-copy { display: flex; flex-direction: column; gap: 18px; }
.ls-dlpage .dl-title { max-width: none; margin: 0; text-wrap: wrap; font-size: 66px; font-weight: 800; line-height: .98; letter-spacing: -0.045em; }
.ls-dlpage .dl-title .ls-app-mark { margin-top: 15px; line-height: 1; }
.ls-dlpage .ls-app-copy .ls-lead { max-width: none; margin: 0; font-size: 19px; line-height: 1.5; }
.ls-dlpage .ls-app-get { margin-top: 0; }
.ls-dlpage .ls-app-stores { flex-direction: row; margin-top: 0; }
.ls-dlpage .ls-app-stores .ls-store { min-width: 176px; grid-template-columns: 26px auto; }
.ls-dlpage .ls-store img { width: 26px; height: 26px; }

/* The lanyard: light and dark renders in one tilt wrapper. */
.ls-dlpage .dl-model { display: block; line-height: 0; transform-origin: 50% 100%; }
.ls-dlpage .dl-model img { aspect-ratio: 300 / 680; object-fit: contain; -webkit-user-drag: none; }
:root:not([data-theme="dark"]) .ls-dlpage .dl-model-dark, :root[data-theme="dark"] .ls-dlpage .dl-model-light { display: none; }
.ls-dlpage .tud-tilt { position: relative; z-index: 3; display: block; line-height: 0; transform-origin: 50% 100%; touch-action: pan-y; cursor: grab; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.ls-dlpage .tud-tilt.is-grabbing { cursor: grabbing; }
.ls-dlpage .dl-model.is-before { transform: translateY(20px) scale(.9); }
.ls-dlpage .ls-stk-link:focus-visible { outline: 2px solid var(--ls-ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ls-dlpage .ls-stk, .ls-dlpage .ls-stk-link, .ls-dlpage .ls-app-doodle { transition: none; } }

/* ---------- narrower screens ---------- */
@media (max-width: 1100px) {
  .ls-dlpage .dl-title { font-size: 56px; }
}
@media (max-width: 900px) {
  .ls-dlpage .dl-app { grid-template-columns: minmax(0, 1fr); gap: 84px; }
  .ls-dlpage .ls-app-stage { width: min(100%, 585px); margin: 0 auto; }
}
/* The QR is for a desktop screen: a phone is already the phone. */
@media (max-width: 759px) {
  .ls-dlpage .ls-app-qr { display: none; }
}
@media (max-width: 600px) {
  .ls-dlpage .dl-app { padding-top: 32px; padding-bottom: 64px; }
  .ls-dlpage .dl-title { font-size: 42px; }
  .ls-dlpage .dl-title .ls-app-mark { margin-top: 10px; }
  .ls-dlpage .ls-app-copy .ls-lead { font-size: 16px; }
  .ls-dlpage .ls-app-stores { gap: 12px; }
  .ls-dlpage .ls-app-stores .ls-store { min-width: 0; min-height: 49px; padding: 8px 16px; column-gap: 12px; grid-template-columns: 22px auto; }
  .ls-dlpage .ls-store img { width: 22px; height: 22px; }
  .ls-dlpage .ls-store span { font-size: 11px; }
  .ls-dlpage .ls-store strong { font-size: 16px; }
  /* The stickers scale with the stage; their words keep a floor so they stay readable. */
  .ls-dlpage .ls-stk-text strong { font-size: max(3.25cqw, 12px); }
  .ls-dlpage .ls-stk-text span { font-size: max(2.05cqw, 9px); }
  /* With the floor the longest name runs wider than the frame's sticker: that sticker keeps to the stage's right edge. */
  .ls-dlpage .ls-stk--3 { left: auto; right: 0; }
}
@media (max-width: 374px) {
  .ls-dlpage .dl-title { font-size: 36px; }
}

/* ---------- dark ---------- */
/* The stickers and the QR are objects on the page: they keep their light tokens. */
:root[data-theme="dark"] .ls-dlpage :is(.ls-stk, .ls-app-qr) {
  --ls-ink: #141412;
  --ls-ink-2: #2B2722;
  --ls-soft: #55504A;
  --ls-paper: #FFFFFF;
  --ls-line-2: #E2D6CA;
  --ls-chai: #FFE6A8;
  --ls-sand: #F7E1C8;
  --ls-food: #C9E4DC;
  --ls-move: #F9D8DE;
  --ls-study: #DCE8C0;
  --ls-fashion: #D3E2F2;
  --tud-color-bg-surface: #FFFFFF;
  color: #141412;
}
:root[data-theme="dark"] .ls-dlpage .ls-stk .tud-logo:not(:has(> img)) { color: #F6EFE4; }
:root[data-theme="dark"] .ls-dlpage .ls-app-mark { color: #141412; }
/* The store badges as the stores draw them for dark grounds: black, with the stores' grey keyline. */
:root[data-theme="dark"] .ls-dlpage .ls-store { color: #FFFFFF; background: #000000; box-shadow: inset 0 0 0 1px #A6A6A6; }
:root[data-theme="dark"] .ls-dlpage .ls-app-phone::before { box-shadow: 0 18px 26px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .ls-dlpage .ls-app-still::after { background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, .24) 42%, rgba(0, 0, 0, 0) 70%); }
:root[data-theme="dark"] .ls-dlpage :is(.ls-stk-link, .ls-app-qr) { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 24px -12px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] .ls-dlpage .ls-stk-link:focus-visible { outline-color: #F6EFE4; }