/* The homepage, round 1 of the page-by-page redesign.
 *
 * Referenced from Student Beans and UNiDAYS: a student sees real brands and
 * real savings in the first viewport. The hero pairs the headline and the one
 * ask (Get verified) with the lead deal as the orange poster, and a wall of
 * every live brand (logo, name, saving) runs under both, as UNiDAYS lays its
 * logo wall across the bottom of its hero. Deal cards take the references'
 * anatomy: panel on top, the logo badge sitting on its edge, the saving as
 * the title, the brand and where it is used under it.
 *
 * Round 2: brand imagery leads. Every card, the poster and the wall show the
 * brand's own photo when the API has one (cover, centred a little above the
 * middle so faces and products stay whole); otherwise the brand's logo, large,
 * on its tone panel; a doodle only when there is no logo either.
 *
 * Round 10 (the combined page): the 30 September homepage's running rows,
 * its list with search and categories and its ink band for brands, rebuilt
 * from the same tickets. The rows only run from home.js, never under reduced
 * motion; nothing here animates.
 *
 * Loaded after site-launch.css on the homepage only, and scoped to .ls-home,
 * so no other page and nothing in the header or footer changes.
 * Light only. One orange lead (the poster). Nothing moves on load.
 */

/* ---------- hero ---------- */
/* h13d, Flanked (the founder's pick, 17 October): the heading, its line and the form centred in a 520px column, the
   walking student drawn large on the left heading into it (never mirrored, never cropped: her figure fills the PNG from
   33.7% to 73.3% across and 9.3% to 89.4% down, so she is placed on her figure, 386px tall at 480px wide), and up to two
   live brands as the shop rows' 3:4 photo cards on the right (launch.js heroCards). No photos: she stands alone. */
.ls-home .hh {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px minmax(0, 1fr);
  grid-template-areas: "walker col cards";
  align-items: center;
  column-gap: 24px;
  padding-top: clamp(28px, 3.4vw, 44px);
}
.ls-home .hh-col { grid-area: col; display: grid; justify-items: center; min-width: 0; text-align: center; }
.ls-home .hh-intro { max-width: 640px; }
.ls-home .hh h1 { font-size: clamp(42px, 4.5vw, 66px); line-height: .98; letter-spacing: -0.045em; }

.ls-home .hh-ask { display: grid; justify-items: stretch; width: 100%; margin-top: 24px; text-align: left; }
.ls-home .hh-walker { grid-area: walker; position: relative; height: 410px; --w: 480px; --ft: 12px; }
.ls-home .hh-walk { position: absolute; left: calc(50% - var(--w) * .535); top: calc(var(--ft) - var(--w) * .093); width: var(--w); line-height: 0; pointer-events: none; }
.ls-home .hh-walk img { display: block; width: 100%; height: auto; }
.ls-home .hh-cards { grid-area: cards; position: relative; height: 420px; min-width: 0; }
.ls-home .hh-cards-list { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.ls-home .hh-card { position: absolute; width: 156px; }
.ls-home .hh-card--0 { left: calc(50% - 138px); top: 12px; transform: rotate(-5deg); }
.ls-home .hh-card--1 { left: calc(50% - 18px); top: 196px; transform: rotate(4deg); }
.ls-home .hh-card:only-child { left: calc(50% - 78px); top: 96px; }
/* The card: the shop rows' 3:4 photo at 12px, their scrim and cream words, and the app stickers' shadow. */
.ls-home .hh-card-link { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px; color: #FAF7F2; text-decoration: none; background: var(--ls-paper); box-shadow: var(--tud-shadow-card); transition: transform 120ms var(--ls-ease); }
.ls-home .hh-card-photo { position: absolute; inset: 0; }
.ls-home .hh-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ls-home .hh-card-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 20, 18, .8) 0, rgba(20, 20, 18, .75) 10%, rgba(20, 20, 18, .66) 20%, rgba(20, 20, 18, .46) 30%, rgba(20, 20, 18, .22) 38%, rgba(20, 20, 18, .06) 43%, rgba(20, 20, 18, 0) 46%); }
.ls-home .hh-card-saving { grid-row: 2; z-index: 1; margin: 0 12px; font-family: var(--tud-font-secondary); font-size: 20px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; text-shadow: 0 1px 2px rgba(20, 20, 18, .35); }
.ls-home .hh-card-brand { grid-row: 3; z-index: 1; margin: 2px 12px 12px; font-size: 14px; font-weight: 700; line-height: 1.3; text-shadow: 0 1px 2px rgba(20, 20, 18, .35); }
@media (hover: hover) { .ls-home .hh-card-link:hover { transform: translateY(-2px); } .ls-home .hh-card-link:hover .hh-card-brand { text-decoration: underline; text-underline-offset: 2px; } }
.ls-home .hh-card-link:focus-visible { outline: 2px solid var(--ls-ink); outline-offset: 3px; }
.ls-home .hh .ls-signup { max-width: none; padding: 22px 24px 20px; }
/* The sign-up card in the poster orange (Addendum 7, mock A, the founder's pick): the same card in light and dark, its
   own ink and cream as a light island (ink on orange 5.8:1, ink on cream 17:1, placeholder 5.4:1, cream on the ink
   button 17:1, the ink focus ring 5.8:1 on the orange). Homepage only: other pages' sign-up cards are untouched. */
.ls-home #ls-signup { --ls-ink: #1A1613; --ls-paper: #FFF8F0; --ls-soft: #1A1613; --ls-control: #1A1613; color: #1A1613; background: var(--tud-color-accent-base); box-shadow: 0 18px 40px -18px rgba(201, 63, 18, .55); }
.ls-home #ls-signup .ls-input { border-width: 1px; border-color: #1A1613; color: #1A1613; background: #FFF8F0; }
.ls-home #ls-signup .ls-input::placeholder { color: #6B6660; }
.ls-home #ls-signup .ls-input:user-invalid { border-width: 2px; }
.ls-home #ls-signup .ls-btn--ink { color: #FFF8F0; background: #1A1613; border-color: #1A1613; }
.ls-home #ls-signup .ls-btn--ink:hover { color: #FFF8F0; background: #33302B; border-color: #33302B; }
.ls-home #ls-signup :focus-visible { outline: 2px solid #1A1613; outline-offset: 2px; }
.ls-home #ls-signup ::selection { color: #FFF8F0; background: #1A1613; }
.ls-home .hh .ls-signup-title { margin-bottom: 14px; font-size: 21px; }
.ls-home .hh-signup-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ls-home .hh-signup-row .ls-input { flex: 1 1 220px; min-width: 0; }
.ls-home .hh-signup-row .ls-btn { flex: 0 0 auto; width: auto; min-height: 52px; margin-top: 0; }
.ls-home .hh .ls-account { max-width: none; }

/* The student's own pass, in the design they chose in the app (home-pass.js, pass-card.js; founder, 20 Oct: "show
   the actual card design we have selected and no need to have this so card can be made bigger"). Only once the
   account says verified, and then it is the hero: the account card goes, title, line and both buttons, and the
   card itself is the way on, a link to the profile. Every other state keeps its account card as it was. From
   1101px the column widens to 560 and the card is 540 wide, 1.69 times the old 320; from 1100 down to the tablet
   layout the column narrows to 500 (the card 500, 1.56 times) and the two deal photos shrink and step in, so card,
   photos and the walking student all clear each other and the page edge. It keeps the old pass's quarter turn; the lean and the foil move inside it. */
.ls-home .hh-own { display: none; }
[data-ls-state="verified"] .ls-home .ls-account { display: none; }
[data-ls-state="verified"] .ls-home .hh-own { display: block; justify-self: center; width: 100%; max-width: 540px; margin: 6px auto 10px; border-radius: 16px; color: inherit; text-decoration: none; transform: rotate(-3deg); -webkit-tap-highlight-color: transparent; }
[data-ls-state="verified"] .ls-home .hh-own:focus-visible { outline: 2px solid var(--ls-ink); outline-offset: 8px; }
@media (min-width: 1101px) { [data-ls-state="verified"] .ls-home .hh { grid-template-columns: minmax(0, 1fr) 560px minmax(0, 1fr); } }
@media (min-width: 961px) and (max-width: 1100px) {
  [data-ls-state="verified"] .ls-home .hh { grid-template-columns: minmax(0, 1fr) 500px minmax(0, 1fr); }
  [data-ls-state="verified"] .ls-home .hh-card { width: 124px; }
  [data-ls-state="verified"] .ls-home .hh-card--0 { left: calc(50% - 112px); }
  [data-ls-state="verified"] .ls-home .hh-card--1 { left: calc(50% - 22px); top: 172px; }
  [data-ls-state="verified"] .ls-home .hh-card:only-child { left: calc(50% - 62px); }
}
/* Phones (founder, 20 Oct: "should be below the student life student prices title"): the title first, then the
   card, full width inside the 16px gutters and untilted, then the walking student and the deal photos as before. */
@media (max-width: 899px) {
  [data-ls-state="verified"] .ls-home .hh-ask { margin: 24px 0 0; }
  [data-ls-state="verified"] .ls-home .hh-own { max-width: none; margin: 0; transform: none; }
}

/* The lead deal: the page's orange lead, as the cards' ticket at its largest.
   The brand's picture is a full-height panel on the right; the orange copy
   rises into it as the apps' scalloped edge (cut from the panel, so the poster
   itself is no longer perforated); the logo badge sits across that edge. */
.ls-home .hh .ls-poster {
  container-type: inline-size;
  grid-template-columns: minmax(0, 1fr) 34%;
  align-content: center;
  height: 100%;
  padding: clamp(26px, 3vw, 40px) clamp(24px, 3vw, 40px);
  -webkit-mask: none;
  mask: none;
}
.ls-home .hh .ls-poster-brand { margin-top: 20px; }
.ls-home .hh .ls-poster-saving { font-size: clamp(60px, 17cqw, 120px); overflow-wrap: normal; }
.ls-home .hh .ls-poster-line { font-size: 17px; }
.ls-home .hh .ls-poster-actions { margin-top: 22px; }
.ls-home .hh .ls-poster-link { display: none; }
.ls-home .hh .ls-poster-art { width: 100%; }
.ls-home .hh .hh-poster--photo, .ls-home .hh .hh-poster--logo { grid-template-columns: minmax(0, 1fr) 44%; align-content: stretch; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.ls-home .hh-poster--photo .ls-poster-copy, .ls-home .hh-poster--logo .ls-poster-copy { position: relative; z-index: 2; align-self: center; padding: clamp(26px, 3vw, 40px) clamp(30px, 3.4vw, 44px) clamp(26px, 3vw, 40px) clamp(24px, 3vw, 40px); }
/* The copy column is narrower beside the picture panel: the saving keeps to one line where it can. */
.ls-home .hh-poster--photo .ls-poster-saving, .ls-home .hh-poster--logo .ls-poster-saving { font-size: clamp(52px, 10.5cqw, 96px); }
.ls-home .hh-poster-visual { position: relative; display: grid; place-items: center; min-height: 100%; overflow: hidden;
  -webkit-mask: radial-gradient(circle at 0 50%, #0000 5.5px, #000 6px) 0 0 / 100% 24px round;
  mask: radial-gradient(circle at 0 50%, #0000 5.5px, #000 6px) 0 0 / 100% 24px round; }
.ls-home .hh-poster-visual--photo { background: var(--ls-paper); }
.ls-home .hh-poster-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.ls-home .hh-poster-tape { position: absolute; top: 10px; right: 18px; z-index: 1; width: 88px; height: auto; transform: rotate(14deg); }
.ls-home .hh-poster-badge { position: absolute; top: 50%; right: -36px; z-index: 3; display: grid; padding: 5px; border-radius: 16px; background: var(--ls-paper); box-shadow: 0 2px 4px rgba(20, 20, 18, .12), 0 10px 20px rgba(20, 20, 18, .16); transform: translateY(-50%); }
.ls-home .hh-poster-badge .tud-logo { --logo-size: 62px; border-radius: 12px; }
/* No photo yet: the logo on the brand's tone, the same panel a photo gets, so nothing moves when a photo arrives. */
.ls-home .hh-poster-visual--logo { background: var(--ls-tone, var(--ls-sand)); }
.ls-home .hh-poster-logo { display: grid; padding: clamp(10px, 2cqw, 16px); border-radius: 30px; background: var(--ls-paper); box-shadow: 0 2px 4px rgba(20, 20, 18, .12), 0 10px 20px rgba(20, 20, 18, .14); }
.ls-home .hh-poster-logo .tud-logo { --logo-size: clamp(104px, 22cqw, 168px); border-radius: 20px; }


/* ---------- the ticket: a picture, the apps' scalloped edge, a white stub ----------
   The brand wall's tiles and the deal cards (Now+A 3, the founder's pick), shared
   with the deals review page. The stub's white rises into the picture as a row
   of half circles, the apps' ScallopEdge (diameter 12 on a 24 pitch), cut from
   the picture with a mask; round keeps every bump whole and the row centred.
   The logo badge sits across that edge, above it, half on each side. */
.ls-home .hh-logo-media:not(.hh-invite-mark), .ls-home .hh-deal-panel {
  -webkit-mask: radial-gradient(circle at 50% 100%, #0000 5.5px, #000 6px) 0 0 / 24px 100% round;
  mask: radial-gradient(circle at 50% 100%, #0000 5.5px, #000 6px) 0 0 / 24px 100% round;
}

/* ---------- the brand wall ---------- */
.ls-home .hh-wall { grid-area: wall; min-width: 0; margin-top: 4px; }
.ls-home .hh-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ls-home .hh-logo {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  aspect-ratio: 4 / 5;
  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: box-shadow 160ms var(--ls-ease);
}
.ls-home .hh-logo:hover { box-shadow: inset 0 0 0 1.5px var(--ls-ink); }
.ls-home .hh-logo:hover .hh-logo-name { text-decoration: underline; text-underline-offset: 3px; }
.ls-home .hh-logo-media { min-height: 0; }
.ls-home .hh-logo-media .tud-logo { --logo-size: 76px; border-radius: 18px; }
.ls-home .hh-logo-text { position: relative; z-index: 2; display: grid; align-content: end; gap: 1px; min-width: 0; min-height: 88px; padding: 12px 14px; }
/* With a badge across the edge, the name starts below it. */
.ls-home .hh-logo--photo .hh-logo-text { padding-top: 32px; }
.ls-home .hh-logo-badge { position: absolute; top: -23px; left: 10px; display: grid; padding: 3px; border-radius: 12px; background: var(--ls-paper); box-shadow: var(--ls-shadow); }
.ls-home .hh-logo-badge .tud-logo { --logo-size: 40px; border-radius: 9px; }
.ls-home .hh-logo-name { font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ls-home .hh-logo-save { font-family: var(--tud-font-secondary); font-size: 21px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; white-space: nowrap; }
.ls-home .hh-logo--invite { background: transparent; box-shadow: none; border: 1.5px dashed var(--ls-control); }
.ls-home .hh-logo--invite:hover { box-shadow: none; border-color: var(--ls-ink); }
.ls-home .hh-invite-mark { display: grid; place-items: center; color: var(--ls-ink); }
.ls-home .hh-logo-go { color: var(--ls-accent-text); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- the picture panel the wall and the cards share ---------- */
.ls-home .hh-media { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--ls-tone, var(--ls-sand)); }
.ls-home .hh-media-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.ls-home .hh-media-logo { display: grid; }
.ls-home .hh-media-logo .tud-logo { box-shadow: 0 1px 2px rgba(20, 20, 18, .08), 0 10px 22px rgba(20, 20, 18, .14); }
.ls-home .hh-media-art { width: min(44%, 150px); }
.ls-home .hh-media-art img { width: 100%; height: auto; }

/* ---------- deal cards: the same ticket, larger ---------- */
.ls-home .hh-deal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 20px; }
/* The picture is about seven tenths of the card (founder, 15 Oct): a tall panel, the text under it kept to the saving, the brand and the meta line. */
.ls-home .hh-deal-panel { aspect-ratio: 10 / 11; }
.ls-home .hh-deal-panel .tud-logo { --logo-size: clamp(120px, 11vw, 150px); border-radius: 30px; }
.ls-home .hh-deal-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 58px 20px 18px; }
.ls-home .hh-deal--logo .hh-deal-body { padding-top: 18px; }
/* The logo badge on the scalloped edge, about one and a half times its old size, the mark filling it (founder, 15 Oct). */
.ls-home .hh-deal-badge { position: absolute; top: -48px; left: 16px; display: grid; padding: 3px; border-radius: 18px; background: var(--ls-paper); box-shadow: var(--ls-shadow); }
.ls-home .hh-deal-badge .tud-logo { --logo-size: 88px; border-radius: 15px; }
.ls-home .hh-deal-status { color: var(--ls-accent-text); font-size: 14px; font-weight: 700; line-height: 1.3; }
.ls-home .hh-deal-saving { font-family: var(--tud-font-secondary); font-size: clamp(34px, 3vw, 42px); font-weight: 700; line-height: 1; letter-spacing: -0.045em; overflow-wrap: anywhere; }
.ls-home .hh-deal-brand { font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ls-home .hh-deal-line { display: none; }
/* Featured cards: the category colour at rest and one fast hover, four takes for review (?card=a to d, home.js swaps
   the class; d is the default). Every take: no zoom, no outline, no badge change, 120ms ease-out, no movement under
   reduced motion, the black focus ring for the keyboard. The card reads its tone from its own picture panel. */
.ls-home .hh-deal:has(> .ls-tone-0) { --ls-tone: var(--ls-chai); }
.ls-home .hh-deal:has(> .ls-tone-1) { --ls-tone: var(--ls-sand); }
.ls-home .hh-deal:has(> .ls-tone-2) { --ls-tone: var(--ls-food); }
.ls-home .hh-deal:has(> .ls-tone-3) { --ls-tone: var(--ls-move); }
.ls-home .hh-deal:has(> .ls-tone-4) { --ls-tone: var(--ls-study); }
.ls-home .hh-deal:has(> .ls-tone-5) { --ls-tone: var(--ls-fashion); }
.ls-home .hh-deal:has(> .ls-tone-6) { --ls-tone: var(--ls-lilac); }
.ls-home .hm-featured .hh-deal { transition: transform 120ms ease-out, box-shadow 120ms ease-out; }
.ls-home .hm-featured .hh-deal:hover { transform: none; box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls-home .hh-deal-cat { display: none; }
/* a. the lower body in the category tint; hover: the brand name underlines, nothing moves */
.ls-home .hm-featured--card-a .hh-deal-body { background: var(--ls-tone, var(--ls-sand)); }
.ls-home .hm-featured--card-a .hh-deal:hover .hh-deal-brand { text-decoration: underline; text-underline-offset: 4px; }
/* b. a category pill under the brand, its line doodle in the tint; hover: a stronger shadow, nothing moves */
.ls-home .hm-featured--card-b .hh-deal-cat { display: inline-flex; align-items: center; gap: 6px; width: max-content; margin-top: 6px; padding: 3px 10px 3px 6px; border-radius: 999px; background: var(--ls-tone, var(--ls-sand)); color: var(--ls-ink); font-size: 13px; font-weight: 700; line-height: 1.3; }
.ls-home .hm-featured--card-b .hh-deal-cat img { width: 22px; height: 22px; object-fit: contain; }
.ls-home .hm-featured--card-b .hh-deal:hover { box-shadow: inset 0 0 0 1px var(--ls-line-2), var(--tud-shadow-card-raised); }
/* c. the logo badge on a solid category-colour frame; hover: a crisp 2px lift with a firmer shadow */
.ls-home .hm-featured--card-c .hh-deal-badge { padding: 5px; background: var(--ls-tone, var(--ls-sand)); }
.ls-home .hm-featured--card-c .hh-deal:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--ls-line-2), var(--tud-shadow-card-raised); }
/* d. the perforation row itself in the category colour: a 14px tinted strip the scallops are cut from; hover: the 2px lift */
.ls-home .hm-featured--card-d .hh-deal-body { position: relative; }
.ls-home .hm-featured--card-d .hh-deal-body::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 26px; background: var(--ls-tone, var(--ls-sand)); -webkit-mask: linear-gradient(#000, #000) 0 12px / 100% calc(100% - 12px) no-repeat, radial-gradient(circle at 50% 100%, #000 6.5px, #0000 7px) 0 0 / 24px 12px round no-repeat; mask: linear-gradient(#000, #000) 0 12px / 100% calc(100% - 12px) no-repeat, radial-gradient(circle at 50% 100%, #000 6.5px, #0000 7px) 0 0 / 24px 12px round no-repeat; z-index: 0; }
.ls-home .hm-featured--card-d .hh-deal-badge { z-index: 1; }
.ls-home .hm-featured--card-d .hh-deal:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--ls-line-2), var(--tud-shadow-card-raised); }

/* ---------- categories: small tickets, the doodle on its tone over a white stub ---------- */
.ls-home .hh-cats .ls-tile { justify-content: flex-start; min-height: 0; padding: 124px 16px 16px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls-home .hh-cats .ls-tile::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 108px; background: var(--ls-tile, var(--ls-sand));
  -webkit-mask: radial-gradient(circle at 50% 100%, #0000 5.5px, #000 6px) 0 0 / 24px 100% round;
  mask: radial-gradient(circle at 50% 100%, #0000 5.5px, #000 6px) 0 0 / 24px 100% round; }
.ls-home .hh-cats .ls-tile-art { top: 12px; left: 50%; right: auto; z-index: 1; width: 84px; transform: translateX(-50%); }
.ls-home .hh-cats .ls-tile-name, .ls-home .hh-cats .ls-tile-state { position: relative; }
.ls-home .hh-cats a.ls-tile:hover { box-shadow: inset 0 0 0 1.5px var(--ls-ink); }
@media (min-width: 961px) { .ls-home .hh-cats .ls-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---------- verify once: the pass and the steps ---------- */
.ls-home .hh-verify { position: relative; padding-block: clamp(56px, 7vw, 96px); background: var(--ls-paper); border-bottom: 1px solid var(--ls-line); }
/* The band's white rises into the page above it: the same scalloped edge, the band as the stub. */
.ls-home .hh-verify::before { content: ""; position: absolute; top: -6px; left: 0; right: 0; height: 6px; background: radial-gradient(circle at 50% 100%, var(--ls-paper) 5.5px, #0000 6px) 0 0 / 24px 100% round; }
.ls-home .hh-verify-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(36px, 6vw, 96px); }
.ls-home .hh-verify-art { display: grid; place-items: center; padding: 16px 8px; }
/* Round 11: the band's one 3D still, the kit's verification reader. */
.ls-home .hh-verify-model { width: min(100%, 400px); height: auto; }
.ls-home .hh-verify-copy .ls-steps { margin-top: 30px; }
.ls-home .hh-verify-copy .ls-trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--ls-line); }
.ls-home .hh-verify-copy .ls-trust li { align-items: center; gap: 10px; font-size: 15px; }
.ls-home .hh-verify-copy .ls-trust-icon { margin-top: 0; }
.ls-home .hh-verify-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 30px; }

/* ---------- the app: one phone on a sand panel, the deals ringed around it ----------
   The headline with its marker swatch, the store badges and the lead on the copy side; on the
   stage the sand panel with the whole iPhone (the real Deals screen, two whole cards) standing
   out past its top and foot, six die-cut offer stickers ringed around it, the QR as a white
   sticker on its lower corner, the kit's paper plane looping out over the panel's top, the
   campus lanyard still on its contact shadow and the student scanning with her phone. The
   layout is the founder's final Figma frame (1428:1296, 16 October): every piece sits where
   that frame has it, in container units of the stage (1cqw = 1/100 of the 585px panel at
   1440), so the whole stage scales as one picture down to 1024. One moment of motion: the
   stickers drift into their ring as the section first scrolls into view (the is-before class
   comes off, home.js). */
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/Caveat-700-latin.woff2') format('woff2'); }
.ls-home .ls-app { --ls-app-yellow: #FFD048; gap: clamp(28px, 4vw, 56px); overflow: visible; }
.ls-home .ls-app-copy { position: relative; }
.ls-home .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-home .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-home .ls-app-stores { flex-direction: column; align-items: stretch; margin-top: 0; }
.ls-home .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-home .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-home .ls-app-phone { position: absolute; left: 21.88cqw; top: -6.5cqw; z-index: 2; width: 56.24cqw; aspect-ratio: 760 / 1556; }
.ls-home .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-home .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-home .ls-app-ring { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.ls-home .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-home .ls-app.is-before .ls-stk { transform: translate(var(--sx), var(--sy)) rotate(calc(var(--r) * 4)) scale(.88); }
.ls-home .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-home .ls-stk .tud-logo { --logo-size: 6.84cqw; border-radius: 1.71cqw; background: var(--stub, #FFFFFF); }
.ls-home .ls-stk-text { display: grid; line-height: 1.1; }
.ls-home .ls-stk-text strong { font-family: var(--tud-font-secondary); font-size: 3.25cqw; font-weight: 700; letter-spacing: -0.03em; }
.ls-home .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-home .ls-stk-link:hover { transform: translateY(-2px); } .ls-home .ls-stk-link:hover .ls-stk-text span { text-decoration: underline; text-underline-offset: 2px; } }
.ls-home .ls-stk--0 { --i: 0; --r: -6deg; --sx: -90px; --sy: -70px; left: 3.38cqw; top: 7.57cqw; }
.ls-home .ls-stk--1 { --i: 1; --r: 5deg; --sx: 100px; --sy: -60px; left: 69.3cqw; top: 3.97cqw; }
.ls-home .ls-stk--2 { --i: 2; --r: -3deg; --sx: -130px; --sy: 10px; left: -.29cqw; top: 41.86cqw; }
.ls-home .ls-stk--3 { --i: 3; --r: 4deg; --sx: 130px; --sy: 0; left: 63.2cqw; top: 29.49cqw; }
.ls-home .ls-stk--4 { --i: 4; --r: 4deg; --sx: -80px; --sy: 100px; left: 3.52cqw; top: 60.58cqw; }
.ls-home .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-home .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-home .ls-app-qr-code { display: block; width: 14.36cqw; }
.ls-home .ls-app-qr-svg { display: block; width: 100%; height: auto; }
.ls-home .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-home .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-home .ls-app-doodle img { display: block; width: 100%; height: auto; }
.ls-home .ls-app.is-before .ls-app-doodle { transform: translate(var(--dx, 0), var(--dy, 12px)) rotate(calc(var(--r, 0deg) - 6deg)) scale(.92); }
.ls-home .ls-app-doodle--plane { --r: -6deg; --dx: -70px; --dy: 36px; left: 52.5cqw; top: -14.31cqw; width: 42.22cqw; }
.ls-home .ls-app-doodle--girl { --r: 0deg; --dy: 18px; left: 71.45cqw; top: 74.53cqw; width: 28.89cqw; }
.ls-home .ls-app-still { position: absolute; z-index: 1; line-height: 0; }
.ls-home .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-home .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-home .ls-app-still--lanyard { left: 5.47cqw; top: 67.18cqw; width: 14.02cqw; }
@media (prefers-reduced-motion: reduce) { .ls-home .ls-stk, .ls-home .ls-stk-link, .ls-home .ls-app-doodle { transition: none; } }

/* ---------- before you get started: the high-five pair over the heading, the questions crafted (Addendum 34) ----------
   The two columns share a bottom line: the heading group sits on the list's last rule, and the high-five pair stands
   on the heading, whole, as one group with it and the link. The questions open with the site-wide accordion (site-launch.css and
   site-launch.js: the grid-row reveal, the answer rising in, the bare orange plus turning into a minus). Rows open independently: four short answers, nothing jumps elsewhere. */
/* The left group (Addendum 38, revised 20 Oct): heading, link, then the high-five pair at 172 wide, centred on the
   column (as on Support) and centred in the space under the link, equal air above and below. The group is at least the
   closed list's height (four 68px rows and their 1px rules over the top rule); the pair is bigger than the 120px that
   leaves, so the group runs a little past the list's last rule rather than shrinking it. Nothing depends on an open row,
   so the pair never moves. */
.ls-home .ls-home-faq { align-items: start; }
.ls-home .hm-faq-side { --faq-rows: 4; display: grid; grid-template-rows: auto auto minmax(0, 1fr); justify-items: start; min-height: calc(1px + var(--faq-rows) * 69px); }
.ls-home .hm-faq-side .ls-link { margin-top: 14px; }
.ls-home .hm-faq-art { display: block; align-self: center; justify-self: center; width: 172px; margin: 10px 0; padding: 0; }
.ls-home .hm-faq-art img { display: block; width: 100%; height: auto; }
@media (min-width: 961px) and (max-width: 1180px) { .ls-home .hm-faq-art { width: 200px; } }
/* From 1380px the heading wraps to two lines about 224px wide; the group is that wide, so the pair centres under the heading and the link, not in the empty rest of the column. Below that the heading is one line and fills the column. */
@media (min-width: 1380px) { .ls-home .hm-faq-side { grid-template-columns: 232px; } }
/* The plus, the grid-row reveal and the closing state are the site-wide accordion in site-launch.css. */

/* The 3D stills settle once as their section comes into view (home.js sets
   this start only on stills below the fold, never under reduced motion). */
.ls-home .hm-model.is-before { transform: translateY(20px) scale(.9); }
/* The stills answer the hand like the apps' kit art (tilt.js): an even press from the foot and a hold-and-drag shift,
   flat moves only, never a tilt. Touch scrolls the page up and down. */
.ls-home .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-home .tud-tilt.is-grabbing { cursor: grabbing; }
.ls-home .tud-tilt .hm-model { transform-origin: 50% 100%; -webkit-user-drag: none; }
.ls-home .hh-verify-art .tud-tilt { width: min(100%, 400px); }
.ls-home .hh-verify-art .tud-tilt .hh-verify-model { width: 100%; }
/* The verify scanner's delight (about 3 s): a scanner beam sweeps down the card, masked to the card's face (traced from
   the still inside its ink outline and above the front lip, clear of the badge), the orange square glows once, the arch
   hops and the base light blinks. tilt.js makes these layers and rests them invisible. */
.ls-home .tud-scan { position: absolute; z-index: 5; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask: url("/assets/img/models/verification-reader-card.png") 0 0 / 100% 100% no-repeat; mask: url("/assets/img/models/verification-reader-card.png") 0 0 / 100% 100% no-repeat; }
/* The beam: a 3px line (a warm-white edge over brand orange, a soft orange glow) with a faint lit trail above it,
   turned to the card's slant; tilt.js moves it down the card by translate. */
.ls-home .tud-scan-beam { position: absolute; left: -15%; width: 130%; top: 10%; height: 14%; rotate: 13deg; background: linear-gradient(rgba(255, 92, 38, 0) 0, rgba(255, 92, 38, .05) 45%, rgba(255, 92, 38, .16) calc(100% - 3px), rgba(255, 248, 240, 1) calc(100% - 3px), rgba(255, 248, 240, 1) calc(100% - 2px), rgba(255, 92, 38, 1) calc(100% - 2px)); }
.ls-home .tud-scan-beam::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: linear-gradient(rgba(255, 92, 38, .35), rgba(255, 92, 38, 0)); }
.ls-home .tud-scan-glow { position: absolute; inset: 0; background: radial-gradient(circle at 39.8% 38.2%, rgba(255, 92, 38, .30) 0, rgba(255, 92, 38, .16) 7%, rgba(255, 92, 38, 0) 13%); }
.ls-home .tud-scan-lamp { position: absolute; z-index: 5; left: 11.6%; top: 79%; width: 13.5%; height: 1.7%; border-radius: 999px; pointer-events: none; background: rgba(255, 248, 240, .9); box-shadow: 0 0 10px 3px rgba(255, 92, 38, .85), 0 0 26px 8px rgba(255, 92, 38, .35); transform: rotate(10.7deg); }


/* ---------- running rows: Featured offers and Brands on board ----------
   Plain, the row scrolls sideways, its first card on the page's left edge.
   Looped (home.js), copies sit before and after the list and the list keeps
   its place; running, the track moves by exactly one list per loop; held, the
   same looped row scrolls sideways from where it stopped. */
.ls-home .hm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 20px; }
.ls-home .hm-head h2 { margin: 0; }
.ls-home .hm-head-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; min-width: 0; }
.ls-home .hm-head-title .ls-sticker { transform: rotate(-3deg); }
/* The scroller keeps room for a hovered card's lift and shadow (4px up, 32px of blur below) and takes it back with margins, so nothing moves. */
.ls-home .hm-reel { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; padding-block: 18px 48px; margin-block: -12px -36px; scrollbar-width: none; }
.ls-home .hm-reel::-webkit-scrollbar { display: none; }
.ls-home .hm-track { display: flex; width: max-content; padding-inline: max(var(--ls-gutter), calc((100% - var(--ls-max)) / 2)); }
.ls-home .hm-set { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; }
.ls-home .hm-reel.is-running { overflow-x: clip; }
.ls-home .hm-reel.is-looped .hm-track { padding-inline: 0; }
.ls-home .hm-reel.is-running .hm-track { will-change: transform; }
.ls-home .hm-reel.is-looped .hm-set { padding-right: 20px; }
/* Brands on board runs as a ticker: the track fades into the ink at both edges while it loops. */
/* The band's edge fades are overlays on the ticker's wrapper, not a mask on the scroller: WebKit tiles a mask across a
   scroll container's whole content width, which painted fades inside the chips on iPhone. Shown only while it loops. */
.ls-home .hm-ticker { position: relative; }
.ls-home .hm-fade { position: absolute; top: 0; bottom: 0; width: 110px; display: none; pointer-events: none; z-index: 2; }
.ls-home .hm-fade--l { left: 0; background: linear-gradient(90deg, var(--ls-ink), rgba(20, 20, 18, 0)); }
.ls-home .hm-fade--r { right: 0; background: linear-gradient(270deg, var(--ls-ink), rgba(20, 20, 18, 0)); }
.ls-home .hm-ticker:has(.is-looped) .hm-fade { display: block; }
.ls-home .hm-reel--deals .hm-set > li { display: flex; flex: none; width: clamp(272px, 76vw, 348px); }
.ls-home .hm-reel--deals .hh-deal { flex: 1; }

.ls-home .hm-pause { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 1.5px solid var(--ls-line-2); border-radius: 999px; color: var(--ls-ink); background: var(--ls-paper); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.ls-home .hm-pause[hidden] { display: none; }
.ls-home .hm-pause:hover { border-color: var(--ls-ink); }
.ls-home .hm-pause-icon { fill: currentColor; }
.ls-home .hm-pause .hm-icon-play, .ls-home .hm-pause.is-paused .hm-icon-pause { display: none; }
.ls-home .hm-pause.is-paused .hm-icon-play { display: inline; }

/* ---------- what's on your list: the old homepage's row of categories, each on its tint ----------
   The heading with its line and the search beside it; the tab row on a hairline
   rule, every category a big doodle on a tinted tile above its name and its
   count, the chosen one washed in its own tint with the orange underline; the
   result line; then the rows, or the empty state for a category with none. */
.ls-home .hm-list-head { align-items: flex-end; margin-bottom: 22px; }
.ls-home .hm-search { position: relative; width: 320px; max-width: 100%; flex: none; }
.ls-home .hm-search[hidden] { display: none; }
.ls-home .hm-search-icon { position: absolute; top: 50%; left: 16px; color: var(--ls-soft); transform: translateY(-50%); pointer-events: none; }
.ls-home .hm-search-input { padding-left: 46px; }
.ls-home .hm-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; border-bottom: 1px solid var(--ls-line-2); }
.ls-home .hm-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 8px 18px; border-radius: 14px 14px 0 0; color: var(--ls-ink); text-align: center; text-decoration: none; }
/* Each category's deep shade: the doodle's lines and the selected underline (3:1 and more on the canvas and on the wash); orange stays for links and buttons. */
.ls-home .ls-tile--sand { --ls-tile: var(--ls-sand); --hm-under: #A8622B; }
.ls-home .ls-tile--fashion { --hm-under: #2F6DB3; }
.ls-home .ls-tile--food { --hm-under: #1F7A5C; }
.ls-home .ls-tile--chai { --hm-under: #B9770E; }
.ls-home .ls-tile--move { --hm-under: #C4406E; }
.ls-home .ls-tile--study { --hm-under: #4E7A22; }
.ls-home .ls-tile--lilac { --hm-under: #6B4FA8; }
.ls-home .hm-tab::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; }
/* No tile: the doodle's own lines carry the category colour. */
.ls-home .hm-tab-art { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 8px; }
.ls-home .hm-tab-art img { display: block; width: 76px; height: 76px; object-fit: contain; }
.ls-home .hm-tab-name { font-size: 16px; font-weight: 700; line-height: 1.25; }
.ls-home .hm-tab--soon .hm-tab-art img { opacity: .55; }
/* Hover and keyboard focus: the category's own tint at about half the selected wash, no underline; hover only where a pointer can hover, so touch never sticks. */
.ls-home .hm-tab { transition: background-color 140ms var(--ls-ease); }
@media (hover: hover) { .ls-home .hm-tab:not([aria-selected="true"]):hover { background: color-mix(in srgb, var(--ls-tile, var(--ls-sand)) 22%, var(--ls-paper)); } }
.ls-home .hm-tab:not([aria-selected="true"]):focus-visible { background: color-mix(in srgb, var(--ls-tile, var(--ls-sand)) 22%, var(--ls-paper)); }
.ls-home .hm-tab[aria-selected="true"] { background: var(--ls-tile, var(--ls-sand)); background: color-mix(in srgb, var(--ls-tile, var(--ls-sand)) 45%, var(--ls-paper)); }
.ls-home .hm-tab[aria-selected="true"]::after { background: var(--hm-under, var(--ls-orange)); }
.ls-home .hm-tab:focus-visible { outline: 2px solid var(--ls-ink); outline-offset: -4px; }
.ls-home .hm-panel:focus-visible { outline: 2px solid var(--ls-ink); outline-offset: 6px; }
.ls-home .hm-results { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin: 22px 0 18px; }

.ls-home .hm-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ls-home .hm-rows[hidden] { display: none; }
.ls-home .hm-row { display: grid; grid-template-columns: 104px minmax(0, 1fr) 112px; align-items: center; height: 100%; min-height: 120px; 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: box-shadow 160ms var(--ls-ease); }
/* On hover the body's line is the category's darker shade, continuous with the right stub's outline (Addendum 9); the button is the only black on a hovered ticket. */
.ls-home .hm-row { --row-line: color-mix(in srgb, var(--ls-tone, var(--ls-sand)) 70%, #141412); }
.ls-home .hm-row:hover { box-shadow: inset 0 0 0 1.5px var(--row-line); }
/* On hover and keyboard focus only, one unbroken 1.5px outline runs round the whole ticket (founder, 20 Oct: the old
   per-panel overlays left gaps where the panels and the perforation met). It is a single unmasked ring on the row,
   above every panel: a slightly darker shade of the logo stub's fill along the stub (--row-stub wide), the category's
   darker shade everywhere else. The perforations sit inside the ticket, so the outer edge never breaks. Nothing at rest. */
.ls-home .hm-row { position: relative; --row-stub: 104px; }
.ls-home .hm-row::before { position: absolute; inset: 0; z-index: 2; padding: 1.5px; border-radius: inherit; pointer-events: none;
  --line: var(--stub-line, color-mix(in srgb, var(--ls-tone, var(--ls-sand)) 80%, #141412));
  background: linear-gradient(to right, var(--line) 0 var(--row-stub), var(--row-line) var(--row-stub)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.ls-home .hm-row::after { content: none; }
.ls-home .hm-row:hover::before, .ls-home .hm-row:focus-visible::before { content: ""; }
.ls-home .hm-row:hover .hm-row-brand { text-decoration: underline; text-underline-offset: 3px; }
/* The stub: the logo on the brand's tone, its right edge the apps' scallop. */
.ls-home .hm-row-stub { display: grid; place-items: center; align-self: stretch; background: var(--ls-tone, var(--ls-sand));
  -webkit-mask: radial-gradient(circle at 100% 50%, #0000 5.5px, #000 6px) 0 0 / 100% 24px round;
  mask: radial-gradient(circle at 100% 50%, #0000 5.5px, #000 6px) 0 0 / 100% 24px round; }
.ls-home .hm-row-stub .tud-logo { --logo-size: 56px; border-radius: 14px; box-shadow: 0 1px 2px rgba(20, 20, 18, .08), 0 6px 14px rgba(20, 20, 18, .12); }
/* The logo fills the whole stub on its own background colour, right up to the perforation. */
.ls-home .hm-row-stub--fill { background: var(--stub); }
.ls-home .hm-row-stub--fill .tud-logo { --logo-size: 78px; border-radius: 0; background: var(--stub); box-shadow: none; }
.ls-home .hm-row-body { display: grid; gap: 2px; min-width: 0; padding: 16px 20px; }
.ls-home .hm-row-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.ls-home .hm-row-saving { font-family: var(--tud-font-secondary); font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -0.035em; }
.ls-home .hm-row-status { color: var(--ls-accent-text); font-size: 13px; font-weight: 700; }
.ls-home .hm-row-brand { font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.ls-home .hm-row-meta { color: var(--ls-muted); font-size: 13px; font-weight: 600; line-height: 1.35; }
/* The tear-off stub (the founder's pick): the category tint on the right behind its own perforation, holding the action. */
.ls-home .hm-row-foil { position: relative; display: grid; place-items: center; align-self: stretch; padding: 12px 8px; background: var(--ls-tone, var(--ls-sand)); }
/* The tinted stub's scallops bulge into the white body (the founder, Addendum 7), the same 24px pitch as the left edge. */
.ls-home .hm-row-foil::before { content: ""; position: absolute; top: 0; bottom: 0; left: -6px; width: 6px; background: var(--ls-tone, var(--ls-sand));
  -webkit-mask: var(--tud-scallop-bulge); mask: var(--tud-scallop-bulge); }
/* One pill size for every action, sized to the longest word (Get code), the text centred. */
.ls-home .hm-row-foil-act { display: inline-grid; place-items: center; width: 84px; min-height: 36px; padding: 0 8px; border: 1.5px solid var(--ls-ink); border-radius: 999px; color: var(--ls-ink); font-size: 13px; font-weight: 700; text-align: center; white-space: nowrap; }
.ls-home .hm-row:hover .hm-row-foil-act { background: var(--ls-ink); color: var(--ls-paper); }

.ls-home .hm-empty { display: grid; justify-items: center; gap: 0; padding: 30px 20px 26px; text-align: center; }
.ls-home .hm-empty[hidden] { display: none; }
.ls-home .hm-empty-art { display: block; width: 100px; margin-bottom: 16px; }
.ls-home .hm-empty-art img { display: block; width: 100%; height: auto; }
.ls-home .hm-empty h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.ls-home .hm-empty p { margin: 8px 0 20px; color: var(--ls-soft); font-size: 16px; }
.ls-home .hm-reset { gap: 10px; }

/* ---------- shop on The Uni Deals: each shop's items as an edge-to-edge running row (Addendum 42) ----------
   The header stays in the page wrap; the row is the page's reel (the same loop, pauses and Pause button as
   Featured deals), drifting slowly, the two shops opposite ways; its edges fade into the cream as overlays. When
   it cannot run (reduced motion, no script) it is a plain row that scrolls by hand and snaps to each card. */
.ls-home .ls-shop-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.ls-home .ls-shop-row .ls-shop-head { margin-bottom: 0; }
/* Small portrait cards (the founder, Addendum 45): about seven across at 1440, the photo 3:4 on the product. */
.ls-home .hm-reel--shop .hm-set > li { width: 200px; scroll-snap-align: start; }
.ls-home .hm-reel--shop .ls-product { gap: 6px; }
.ls-home .hm-reel--shop .ls-product-photo { aspect-ratio: 3 / 4; border-radius: 12px; }
.ls-home .hm-reel--shop .ls-product-name { font-size: 14px; line-height: 1.3; }
.ls-home .hm-reel--shop .ls-product-price { gap: 6px; }
.ls-home .hm-reel--shop .ls-product-price strong { font-size: 16px; }
.ls-home .hm-reel--shop .ls-product-price s { font-size: 12px; }
.ls-home .hm-reel--shop .ls-product { width: 100%; }
.ls-home .hm-reel--shop:not(.is-running) { scroll-snap-type: x proximity; scroll-padding-inline: max(var(--ls-gutter), calc((100% - var(--ls-max)) / 2)); }
/* The icon-only Pause: a quiet 40px ring at the header's right, its words for assistive tech and the tooltip. */
.ls-home .ls-shop-row .hm-pause--icon { justify-content: center; width: 40px; min-height: 40px; padding: 0; flex: none; }
.ls-home .ls-shop-row .hm-pause--icon > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Narrow fades to the page's own cream, so the photos keep their colour up to the edge. */
.ls-home .ls-shops .hm-fade { width: 48px; }
.ls-home .ls-shops .hm-fade--l { background: linear-gradient(90deg, var(--ls-canvas), rgba(250, 247, 242, 0)); }
.ls-home .ls-shops .hm-fade--r { background: linear-gradient(270deg, var(--ls-canvas), rgba(250, 247, 242, 0)); }

/* The shop cards carry their name and price on the photo (the founder's pick, Addenda 46 and 47): the photo and the
   two lines share one grid cell, the lines bottom-aligned 12px in, the card keeping its 3:4 height. A short, soft,
   eased scrim rises from the foot to about 45% of the card (the top 55% stays as shot), the words in cream with a
   whisper of shadow, the struck full price cream at 80%. */
.ls-home .ls-shops .ls-product { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; gap: 0; }
.ls-home .ls-shops .ls-product-photo { position: relative; grid-row: 1 / 4; grid-column: 1; }
.ls-home .ls-shops .ls-product-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 20, 18, .8) 0, rgba(20, 20, 18, .75) 10%, rgba(20, 20, 18, .66) 20%, rgba(20, 20, 18, .46) 30%, rgba(20, 20, 18, .22) 38%, rgba(20, 20, 18, .06) 43%, rgba(20, 20, 18, 0) 46%); }
.ls-home .ls-shops .ls-product-name { grid-row: 2; grid-column: 1; z-index: 1; margin: 0 12px 2px; color: var(--ls-canvas); font-size: 14px; text-shadow: 0 1px 2px rgba(20, 20, 18, .35); }
.ls-home .ls-shops .ls-product-price { grid-row: 3; grid-column: 1; z-index: 1; margin: 0 12px 12px; color: var(--ls-canvas); text-shadow: 0 1px 2px rgba(20, 20, 18, .35); }
.ls-home .ls-shops .ls-product-price s { color: rgba(250, 247, 242, .8); }

/* ---------- brands on board: the ink band ----------
   It rises into the white band above it as the same scalloped edge. */
.ls-home .hm-brands { position: relative; margin-top: var(--ls-section); padding-block: clamp(52px, 6.5vw, 88px); color: var(--ls-paper); background: var(--ls-ink); }
.ls-home .hm-brands::before { content: ""; position: absolute; top: -6px; left: 0; right: 0; height: 6px; background: radial-gradient(circle at 50% 100%, var(--ls-ink) 5.5px, #0000 6px) 0 0 / 24px 100% round; }
.ls-home .hm-brands-head h2 { color: var(--ls-paper); font-size: clamp(30px, 3.1vw, 44px); font-weight: 800; line-height: 1.12; letter-spacing: -0.035em; }
.ls-home .hm-pause--ink { color: var(--ls-paper); background: transparent; border-color: rgba(255, 255, 255, .42); }
.ls-home .hm-pause--ink:hover { border-color: var(--ls-paper); }
.ls-home .hm-pause--ink:focus-visible, .ls-home .hm-brand:focus-visible, .ls-home .hm-brands-link:focus-visible { outline: 2px solid var(--ls-paper); outline-offset: 3px; }
.ls-home .hm-set > li { flex: none; }
.ls-home .hm-brand { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 10px 22px 10px 10px; border-radius: 18px; color: var(--ls-ink); text-decoration: none; background: var(--ls-paper); }
.ls-home .hm-brand .tud-logo { --logo-size: 56px; border-radius: 12px; }
.ls-home .hm-brand-name { font-size: 17px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
.ls-home .hm-brand--still { padding-left: 22px; }
.ls-home .hm-brand--still .tud-logo + .hm-brand-name { margin-left: 0; }
.ls-home .hm-brand--still:has(.tud-logo) { padding-left: 10px; }
.ls-home .hm-brand:hover .hm-brand-name { text-decoration: underline; text-underline-offset: 3px; }
.ls-home .hm-brands-foot { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px clamp(28px, 4vw, 56px); margin-top: clamp(28px, 4vw, 44px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid rgba(255, 255, 255, .16); }
.ls-home .hm-brands-pitch { font-family: var(--tud-font-secondary); font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; line-height: 1.1; letter-spacing: -0.035em; }
.ls-home .hm-brands-copy { display: grid; justify-items: start; }
.ls-home .hm-brands-copy .hm-brands-link { margin-top: 22px; }
/* The storefront on a cream ticket stub, its left edge the apps' scallop. */
/* The storefront stands on the ink band (the founder's pick): a tight contact shadow under its base, black at low
   opacity with a short blur, skewed to the base's isometric angle, plus one supporting element. The supporting element is a warm
   orange backlight behind the shop's body (the founder's pick, Addendum 19). Static under reduced motion (nothing moves). */
/* The stage is the image's own box (the still is 840 x 810 with the base's underside running from 89.6% of the height at
   the left to 98.1% at the right), so the shadow and the pool are placed against the base itself. */
.ls-home .hm-brands-stub { order: -1; position: relative; display: block; width: 208px; margin: 24px 0; }
/* The shop is lit from inside (the still carries the glowing glass and its bloom); the spill is its light on the band. */
.ls-home .hm-brands-stub .hm-model { position: relative; z-index: 3; display: block; width: 100%; height: auto; }
.ls-home .hm-brands-spill { position: absolute; left: 50%; top: 95%; z-index: 1; width: 124%; height: 38%; border-radius: 50%; transform-origin: 50% 0; background: radial-gradient(ellipse at 44% 8%, rgba(255, 176, 112, .46) 0, rgba(255, 124, 64, .24) 30%, rgba(255, 92, 38, .09) 56%, rgba(255, 92, 38, 0) 74%); filter: blur(5px); transform: translateX(-46%) rotate(7deg) skewX(-24deg); }
/* The lights come on once, as the band first comes into view (home.js adds is-off, then removes it); static when reduced. */
.ls-home .hm-brands-spill, .ls-home .hm-brands-stub::before { opacity: var(--lit, 1); transition: opacity 800ms cubic-bezier(.2, .7, .2, 1); }
.ls-home .hm-brands-stub.is-off { --lit: 0; }
/* The contact shadow: darkest at the centre, a short blur, skewed to the base's isometric angle. */
/* The contact shadow follows the base's own underside: a polygon traced from the still's lowest opaque pixel per column
   (the chevron of the isometric slab), tucked 0.6% up under the base so no ink shows, fading out 6.5% below it. */
.ls-home .hm-brands-stub::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(rgba(0, 0, 0, .92), rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0)); clip-path: polygon(1.4% 82.0%, 11.1% 84.7%, 20.8% 86.7%, 30.5% 88.7%, 40.2% 90.5%, 49.9% 92.5%, 59.6% 94.30000000000001%, 64.4% 95.30000000000001%, 69.3% 96.30000000000001%, 79.0% 96.4%, 88.7% 90.30000000000001%, 98.5% 83.80000000000001%, 98.5% 90.9%, 88.7% 97.4%, 79.0% 100%, 69.3% 100%, 64.4% 100%, 59.6% 100%, 49.9% 99.6%, 40.2% 97.6%, 30.5% 95.8%, 20.8% 93.8%, 11.1% 91.8%, 1.4% 89.1%); }
/* The backlight: a warm brand-orange glow behind the shop's body, a long smooth falloff with no edge (multi-stop, blurred),
   kept inside the band with room at every width. */
.ls-home .hm-brands-stub::before { content: ""; position: absolute; left: 50%; top: 48%; width: 150%; height: 130%; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(255, 92, 38, .20) 0, rgba(255, 92, 38, .13) 22%, rgba(255, 92, 38, .06) 42%, rgba(255, 92, 38, .02) 58%, rgba(255, 92, 38, 0) 72%); filter: blur(10px); transform: translate(-50%, -50%); }
.ls-home .hm-brands-link { color: var(--ls-ink); background: var(--ls-orange); border-color: var(--ls-orange); }
.ls-home .hm-brands-link:hover { background: #FF7F50; border-color: #FF7F50; }

/* ---------- smaller screens ---------- */
@media (max-width: 960px) {
  .ls-home .hh {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "col col" "walker cards";
    row-gap: 28px;
  }
  .ls-home .hh-walker { height: 268px; --w: 304px; --ft: 10px; }
  .ls-home .hh-cards { height: 268px; }
  .ls-home .hh-card { width: 122px; }
  .ls-home .hh-card--0 { left: calc(50% - 100px); top: 4px; }
  .ls-home .hh-card--1 { left: calc(50% - 30px); top: 96px; }
  .ls-home .hh-card:only-child { left: calc(50% - 61px); top: 40px; }
  .ls-home .hh-card-saving { font-size: 17px; }
  .ls-home .hh-card-brand { font-size: 13px; }
  /* No photo cards: she walks alone, centred under the form. */
  .ls-home .hh:not(:has(.hh-card)) { grid-template-areas: "col col" "walker walker"; }
  .ls-home .hh:not(:has(.hh-card)) .hh-cards { display: none; }
  .ls-home .hh .ls-poster { height: auto; }
  .ls-home .hh-verify-inner { grid-template-columns: minmax(0, 1fr); }
  .ls-home .hh-verify-model { width: min(60%, 220px); }
  .ls-home .ls-app { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ls-home .hm-faq-side { min-height: 0; grid-template-rows: auto auto auto; }
  .ls-home .hm-faq-art { width: 180px; margin: 22px 0 8px; }
  .ls-home .ls-app-stage { width: min(100%, 600px); margin: 0 auto; }
}
@media (max-width: 720px) {
  .ls-home .hh .ls-poster { grid-template-columns: minmax(0, 1fr); padding: 22px 20px 26px; }
  .ls-home .hh-cards { height: 304px; }
  .ls-home .hh-card { width: 112px; }
  .ls-home .hh-card--0 { left: 0; top: 6px; }
  .ls-home .hh-card--1 { left: auto; right: 0; top: 150px; }
  .ls-home .hh-deal-badge { top: -40px; }
  .ls-home .hh-deal-badge .tud-logo { --logo-size: 72px; border-radius: 13px; }
  .ls-home .hh-deal-body { padding-top: 48px; }
  .ls-home .hh .ls-poster-art { width: 104px; }
  /* On a phone the picture leads, full width above the copy, the orange rising into its foot. */
  .ls-home .hh .hh-poster--photo, .ls-home .hh .hh-poster--logo { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .ls-home .hh-poster-visual { order: -1; min-height: 0; aspect-ratio: 16 / 10;
    -webkit-mask: radial-gradient(circle at 50% 100%, #0000 5.5px, #000 6px) 0 0 / 24px 100% round;
    mask: radial-gradient(circle at 50% 100%, #0000 5.5px, #000 6px) 0 0 / 24px 100% round; }
  .ls-home .hh-poster--photo .ls-poster-copy { padding: 44px 20px 24px; }
  .ls-home .hh-poster--logo .ls-poster-copy { padding: 20px 20px 24px; }
  .ls-home .hh-poster-badge { top: -36px; right: auto; left: 18px; transform: none; }
  .ls-home .hh-poster-badge .tud-logo { --logo-size: 56px; }
  .ls-home .hh-poster-tape { width: 72px; }
  .ls-home .hh-poster-logo { padding: 7px; border-radius: 20px; }
  .ls-home .hh-poster-logo .tud-logo { --logo-size: 76px; border-radius: 14px; }
  .ls-home .hh .ls-poster-saving { font-size: clamp(56px, 20cqw, 84px); }
  .ls-home .hh .ls-poster-line { font-size: 16px; }
  /* The wall and the categories scroll sideways, as both references do. */
  .ls-home .hh-logos, .ls-home .hh-cats .ls-tiles, .ls-home .hh-deal-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--ls-gutter);
    margin-inline: calc(var(--ls-gutter) * -1);
    padding: 5px var(--ls-gutter) 6px;
    scrollbar-width: none;
  }
  .ls-home .hh-logos::-webkit-scrollbar, .ls-home .hh-cats .ls-tiles::-webkit-scrollbar, .ls-home .hh-deal-grid::-webkit-scrollbar { display: none; }
  .ls-home .hh-deal-grid { grid-auto-columns: minmax(260px, 80%); gap: 14px; padding-bottom: 6px; }
  .ls-home .hh-logos { grid-auto-columns: 172px; }
  .ls-home .hh-cats .ls-tiles { grid-auto-columns: 152px; gap: 12px; }
  .ls-home .hh-logos > li, .ls-home .hh-cats .ls-tiles > li, .ls-home .hh-deal-grid > .hh-deal { scroll-snap-align: start; }
  .ls-home .hh-cats .ls-tile { padding: 108px 14px 14px; }
  .ls-home .hh-cats .ls-tile::before { height: 94px; }
  .ls-home .hh-cats .ls-tile-art { width: 72px; }
  .ls-home .ls-door { grid-template-columns: minmax(0, 1fr) 104px; }
  .ls-home .hm-rows { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ls-home .hm-row { grid-template-columns: 84px minmax(0, 1fr) 96px; min-height: 100px; --row-stub: 84px; }
  .ls-home .hm-row-stub .tud-logo { --logo-size: 48px; }
  .ls-home .hm-row-stub--fill .tud-logo { --logo-size: 64px; }
  .ls-home .hm-row-body { padding: 14px 16px; }
  .ls-home .hm-row-saving { font-size: 24px; }
  /* The tab row scrolls sideways on a phone, edge to edge, snapping tab by tab; the fade shows there is more. */
  .ls-home .hm-list-head { margin-bottom: 16px; }
  .ls-home .hm-search { width: 100%; }
  .ls-home .hm-tabs { display: flex; gap: 6px; margin-inline: calc(var(--ls-gutter) * -1); padding: 0 var(--ls-gutter); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--ls-gutter); scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 40px), #0000); mask: linear-gradient(90deg, #000 calc(100% - 40px), #0000); }
  .ls-home .hm-tabs::-webkit-scrollbar { display: none; }
  .ls-home .hm-tab { flex: 0 0 118px; padding: 12px 4px 14px; scroll-snap-align: start; }
  .ls-home .hm-tab-art { width: 64px; height: 64px; margin-bottom: 6px; }
  .ls-home .hm-tab-art img { width: 60px; height: 60px; }
  .ls-home .hm-tab-name { font-size: 14px; }
  .ls-home .hm-results { margin: 18px 0 14px; }
  .ls-home .hm-set { gap: 14px; }
  .ls-home .hm-reel.is-looped .hm-set { padding-right: 14px; }
  .ls-home .hm-brand { min-height: 68px; }
  .ls-home .hm-fade { width: 28px; }
  .ls-home .hm-brand .tud-logo { --logo-size: 48px; }
  .ls-home .hm-empty { padding: 24px 12px 20px; }
  .ls-home .hm-empty-art { width: 84px; }
  .ls-home .hm-empty h3 { font-size: 21px; }
  .ls-home .ls-door-art img { width: 72px; }
}
@media (max-width: 600px) {
  .ls-home .hh { padding-top: 24px; }
  /* The heading and the Pause button share a line: the button keeps its name, shows its icon. */
  .ls-home .hm-head { flex-wrap: nowrap; align-items: flex-start; }
  .ls-home .hm-pause { justify-content: center; width: 44px; padding: 0; flex: none; }
  .ls-home .hm-pause > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ls-home .hm-brands { padding-block: 44px 40px; }
  .ls-home .hm-brands-foot { grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 16px; }
  .ls-home .hm-brands-stub { width: 112px; margin: 12px 0; }

  /* Room above the panel for the phone and the plane that stand out past its top. */
  .ls-home .ls-app { gap: 56px; }
  .ls-home .ls-app-stage { margin-top: 0; }
  .ls-home .ls-app-get { margin-top: 22px; }
  .ls-home .ls-app-stores { width: 100%; }
  .ls-home .ls-app-stores .ls-store { width: 100%; grid-template-columns: 28px auto; }
  /* The shop rows: a card about seven tenths of the screen, so the next one shows at the edge. */
  .ls-home .hm-reel--shop .hm-set > li { width: 44vw; }
  .ls-home .hm-reel--shop .ls-product-name { font-size: 13px; }
  .ls-home .hm-reel--shop .ls-product-price strong { font-size: 15px; }
  .ls-home .hm-reel--shop .ls-product-price s { font-size: 11px; }
  .ls-home .ls-shops .hm-fade { width: 24px; }
  .ls-home .ls-shop-row { margin-bottom: 8px; }
  /* The QR is for a desktop screen: a phone is already the phone. */
  .ls-home .ls-app-qr { display: none; }
  /* On a phone: the same picture built from the final desktop frame in fixed pixels, the phone standing out past the
     panel's top and foot, the stickers in the margins and the bottom band, never over the screen's card text; one
     doodle (the plane) and one still (the lanyard). */
  .ls-home .ls-app-stage { aspect-ratio: auto; height: 500px; border-radius: 22px; }
  .ls-home .ls-app-phone { left: 74px; top: -20px; width: 210px; }
  .ls-home .ls-stk-link { gap: 8px; padding: 5px 12px 5px 5px; border-width: 3px; border-radius: 14px; }
  .ls-home .ls-stk .tud-logo { --logo-size: 32px; border-radius: 8px; }
  .ls-home .ls-stk-text strong { font-size: 15px; }
  .ls-home .ls-stk-text span { font-size: 11px; }
  .ls-home .ls-stk--0 { left: 0; top: 6px; }
  .ls-home .ls-stk--1 { left: auto; right: 0; top: 8px; }
  .ls-home .ls-stk--2 { left: 0; top: auto; bottom: 10px; }
  .ls-home .ls-stk--3 { left: auto; right: 0; top: auto; bottom: 36px; }
  .ls-home .ls-stk--4 { left: 0; top: 62px; }
  .ls-home .ls-stk--5 { left: auto; right: 0; top: 64px; }
  .ls-home .ls-stk { transform-origin: 50% 50%; }
  .ls-home .ls-app-doodle--girl { display: none; }
  .ls-home .ls-app-doodle--plane { left: 30%; top: -40px; width: 70px; }
  .ls-home .ls-app-still--lanyard { left: 3%; top: 46%; width: 48px; }
  .ls-home .ls-app-still::after { left: 3px; right: 3px; bottom: -4px; height: 12px; }
  /* On a phone the doodle would only push the questions down. */
  /* On a phone: heading, link, then the pair below them at a moderate size, left-aligned, never between the questions. */
  .ls-home .hm-faq-side { min-height: 0; grid-template-rows: auto auto auto; }
  .ls-home .hm-faq-art { width: 150px; margin: 20px 0 8px; }
  .ls-home .hm-brands-foot { margin-top: 22px; padding-top: 22px; }
  .ls-home .hh h1 { font-size: clamp(40px, 11.6vw, 54px); }
  .ls-home .hh .ls-signup { padding: 20px 18px 18px; }
  .ls-home .hh-signup-row .ls-btn { flex: 1 1 100%; }
  .ls-home .hh-verify-copy .ls-trust { display: grid; }
}
/* Phones, the card-led stage (founder's pick B, 20 Oct 2026: "improve this mobile home screen design"). Under 900px
   the hero is one column on an even rhythm: the title, then the state's own piece (the student's card when verified,
   else the sign-up form or the account card with its two buttons full width and stacked), all on a soft sand stage that
   runs edge to edge and rounds off at its foot. A verified card has a warm orange light pooled under it. Below the
   stage the two live deals are a compact strip, a small photo and the words on paper (no type on a photo), leading
   straight into Featured deals. The walking student rests on phones; she is whole on the desktop hero. Desktop and the
   900 to 960 tablet layout are untouched. */
@media (max-width: 899px) {
  .ls-home .hh { --hh-stage: #F3EBE1; grid-template-columns: minmax(0, 1fr); grid-template-areas: "col" "cards"; row-gap: 28px; padding-top: 32px; }
  .ls-home .hh:not(:has(.hh-card)) { grid-template-areas: "col"; }
  .ls-home .hh .hh-walker { display: none; }
  .ls-home .hh .hh-col { position: relative; isolation: isolate; padding-bottom: 32px; }
  .ls-home .hh .hh-col::before { content: ""; position: absolute; z-index: -1; top: -32px; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); border-radius: 0 0 32px 32px; background: var(--hh-stage); }
  .ls-home .hh .hh-ask { margin-top: 24px; }
  .ls-home .hh .ls-account-actions { display: grid; gap: 10px; }
  .ls-home .hh .ls-account-actions .ls-btn { width: 100%; }
  [data-ls-state="verified"] .ls-home .hh .hh-own { position: relative; }
  [data-ls-state="verified"] .ls-home .hh .hh-own::before { content: ""; position: absolute; z-index: -1; left: -4%; right: -4%; top: 50%; bottom: -26%; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(255, 92, 38, .42) 0, rgba(255, 92, 38, .24) 32%, rgba(255, 92, 38, .08) 56%, rgba(255, 92, 38, 0) 74%); filter: blur(12px); pointer-events: none; }
  .ls-home .hh .hh-cards { height: auto; }
  .ls-home .hh .hh-cards-list { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ls-home .hh .hh-card { position: static; width: auto; transform: none; }
  .ls-home .hh .hh-card:only-child { grid-column: 1 / -1; }
  .ls-home .hh .hh-cards .hh-card .hh-card-link { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-content: center; aspect-ratio: auto; min-height: 76px; padding: 10px 12px 10px 10px; border-radius: 16px; color: var(--ls-ink); background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
  .ls-home .hh .hh-card-photo { position: relative; inset: auto; grid-column: 1; grid-row: 1 / 3; width: 56px; height: 56px; overflow: hidden; border-radius: 10px; }
  .ls-home .hh .hh-card-photo::after { display: none; }
  .ls-home .hh .hh-card-saving { grid-column: 2; grid-row: 1; align-self: end; margin: 0; color: var(--ls-ink); font-size: 19px; text-shadow: none; }
  .ls-home .hh .hh-card-brand { grid-column: 2; grid-row: 2; align-self: start; margin: 2px 0 0; overflow: hidden; color: var(--ls-soft); font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; text-shadow: none; }
  .ls-home .hh + #student-deals { margin-top: 40px; }
}
@media (max-width: 379px) {
  .ls-home .hh .hh-cards .hh-card .hh-card-link { grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; padding: 10px 10px 10px 8px; }
  .ls-home .hh .hh-card-photo { width: 44px; height: 44px; }
  .ls-home .hh .hh-card-saving { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .ls-home .hh-card-link { transition: none; } .ls-home .hh-card-link:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ls-home .hm-brands-spill, .ls-home .hm-brands-stub::before { transition: none; } .ls-home .hm-brands-stub.is-off { --lit: 1; } .ls-home .hh-logo, .ls-home .hh-deal, .ls-home .hm-tab, .ls-home .hm-row, .ls-home .hm-row::before, .ls-home .hm-row::after { transition: none; } .ls-home .hm-featured .hh-deal:hover { transform: none; } .ls-home .hh-deal:hover { transform: none; }
  /* Brands on board stands still as a wrapped row. */
  .ls-home .hm-reel--brands .hm-track { width: auto; }
  .ls-home .hm-reel--brands .hm-set { flex-wrap: wrap; gap: 14px; } }

/* ---------- Safari's edges on iPhone (Addendum 15) ----------
   Safari tints its status bar and toolbar from fixed elements at the screen edges, so two thin strips sit there,
   outside any transformed ancestor: a solid sliver at the very edge for Safari to sample, fading into the page
   above it. --edge-top-background and --edge-bottom-background are set by home.js from the section under each
   edge (cream by default, the ink band's own colour while it is there); html takes the top colour and body the
   bottom one so overscroll matches. Everything stays inside the safe areas. */
:root { --edge-top-background: #FAF7F2; --edge-bottom-background: #FAF7F2; }
/* The document backgrounds never change (Addendum 22: a body colour switch showed through the cream sections on
   desktop). html and body stay cream, and the page's main paints its cream itself, so no edge colour can show through;
   only the fixed strips carry the edge colours, and only on touch devices, where Safari samples them. */
html:has(body.ls-home), body.ls-home { background: var(--ls-canvas); }
.ls-home main#main-content { background: var(--ls-canvas); }
body.ls-home .edge-top, body.ls-home .edge-bottom { display: none; position: fixed; left: 0; right: 0; height: 0; z-index: 80; pointer-events: none; }
@media (hover: none) and (pointer: coarse) { body.ls-home .edge-top, body.ls-home .edge-bottom { display: block; } }
body.ls-home .edge-top::after, body.ls-home .edge-bottom::after { content: ""; position: fixed; left: 0; right: 0; height: max(12px, env(safe-area-inset-top)); pointer-events: none; }
body.ls-home .edge-top::after { top: -7px; background: var(--edge-top-background); }
body.ls-home .edge-bottom::after { bottom: -7px; height: max(12px, env(safe-area-inset-bottom)); background: var(--edge-bottom-background); }
/* The bottom fade only while the edge is ink (the band under the toolbar); over cream it would wash real content. */
html[data-edge-bottom-ink] body.ls-home .edge-bottom::before { content: ""; position: fixed; left: 0; right: 0; bottom: 5px; height: 40px; pointer-events: none; background: linear-gradient(to top, var(--edge-bottom-background), transparent); }
body.ls-home .site-header { padding-top: env(safe-area-inset-top); }
/* Room under the footer so the wordmark sits above the toolbar's strip and inset at the end of the page. */
body.ls-home .footer { padding-bottom: calc(max(12px, env(safe-area-inset-bottom)) + 44px); }
body.ls-home .ls-wrap, body.ls-home .footer-utility { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
@media (min-width: 1024px) { body.ls-home .edge-top, body.ls-home .edge-bottom { display: none; } }

/* ---------- the ambassador band: one slim row on a full-bleed mint band, straight-edged ----------
   The waving student stands on the band's floor line, the headline beside him, the one button at the end,
   all on one centred row; on a phone he sits beside the headline and the button runs full width. */
.ls-home .hm-am { position: relative; margin-top: var(--ls-section); margin-bottom: clamp(32px, 4vw, 48px); background: var(--ls-food); }
.ls-home .hm-am-in { display: grid; grid-template-columns: auto auto auto; grid-template-areas: "art title btn"; justify-content: center; align-items: center; column-gap: clamp(20px, 3vw, 40px); row-gap: 4px; min-height: 176px; padding-block: 0; }
.ls-home .hm-am-art { grid-area: art; align-self: center; width: 200px; line-height: 0; margin-block: -12px; transform: translateY(2px); }
.ls-home .hm-am-art img { display: block; width: 100%; height: auto; }
.ls-home .hm-am-title { grid-area: title; align-self: center; margin: 0; font-family: var(--tud-font-secondary); font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; line-height: 1.1; letter-spacing: -0.04em; }
.ls-home .hm-am-btn { grid-area: btn; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 11px 24px; border-radius: 999px; background: var(--ls-ink); color: var(--ls-paper); font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; transition: background-color 140ms var(--ls-ease); }
@media (hover: hover) { .ls-home .hm-am-btn:hover { background: #33302B; } }
.ls-home .hm-am-btn:focus-visible { outline: 2px solid var(--ls-ink); outline-offset: 3px; }
@media (max-width: 760px) {
  .ls-home .hm-am-in { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "art title" "btn btn"; justify-content: stretch; column-gap: 16px; row-gap: 10px; min-height: 0; padding-block: 26px 28px; }
  .ls-home .hm-am-art { width: 124px; align-self: center; margin: -12px 0; transform: translateY(1px); }
  .ls-home .hm-am-title { align-self: center; font-size: 26px; }
  .ls-home .hm-am-btn { width: 100%; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) { .ls-home .hm-am-btn { transition: none; } }

/* The wide doodle by height in the homepage's category tabs and tiles. */
.ls-home .hm-tab-art--wide { width: auto; min-width: 84px; }
.ls-home .hm-tab-art--wide img { width: auto; max-width: 100%; height: 76px; }
.ls-home .hh-cats .ls-tile-art.theme-art--wide img { height: 84px; }
@media (max-width: 600px) { .ls-home .hm-tab-art--wide { min-width: 64px; } .ls-home .hm-tab-art--wide img { height: 60px; } .ls-home .hh-cats .ls-tile-art.theme-art--wide img { height: 72px; } }