/* Caveat (SIL Open Font License), self-hosted: the hand-lettered voice for
   the annotations on the app previews, and nothing else. */
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('/assets/fonts/Caveat-var.woff2') format('woff2'); }
/* Variant E: everyday value, then a clear route to redeem it.
 * Inherits the brand's ink, paper, orange, Outfit and Space Grotesk.
 * Illustrations identify categories or explain actions; annotations point to useful features.
 */
.he-home { --site-content: 1240px; }
.he-home [hidden] { display: none !important; }
.he-home :is(h1, h2, h3) { text-wrap: balance; }
.he-home :is(a, button, summary):focus-visible { outline: 3px solid var(--site-accent-text); outline-offset: 5px; }
.he-home .theme-art { display: block; pointer-events: none; }
.he-home .theme-art img { width: 100%; height: 100%; min-height: 0; min-width: 0; object-fit: contain; }
.he-home .footer { margin-top: 88px; }
.he-home .footer-landmark-stage { opacity: 1 !important; transform: none !important; transition: none !important; }
.he-home .footer-wordmark { margin-top: 24px; }
.he-home .nav { max-width: 1240px; }
.he-home .nav-logo { width: 158px; }
.he-home .site-header { background: var(--tud-color-bg-canvas); }
.he-home main { overflow: clip; }
.he-home section[id] { scroll-margin-top: 100px; }

/* Section accents retain their subject: shops for brands, graduation for eligibility. */
.he-brands, .he-how > .container { position: relative; }
.he-home .he-section-doodle { position: absolute; pointer-events: none; user-select: none; }
.he-brand-doodle { width: 88px; height: 80px; right: 18px; top: 62px; transform: rotate(6deg); }
.he-brands .he-section-heading { padding-right: 124px; }
/* The heading row mirrors the layout under it: h2 over the verification
   column, then a two-column side matching the two ways, with the cap centred
   in the first of those columns and the intro in the second. */
.he-how .he-section-heading { display: grid; grid-template-columns: 1fr 1.18fr; gap: 64px; align-items: end; }
.he-how-heading-side { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: end; align-self: stretch; }
.he-home .he-graduation-doodle { position: static; align-self: end; justify-self: center; display: flex; justify-content: center; margin-bottom: -44px; }
.he-home .he-graduation-doodle img { width: 96px; height: 122px; max-width: none; object-fit: contain; transform: rotate(10deg); }
@media (max-width: 1100px) { .he-home .he-graduation-doodle { display: none; } }
@media (max-width: 800px) { .he-brand-doodle { top: 44px; width: 74px; height: 68px; } }
@media (max-width: 600px) {
  .he-brand-doodle { top: 36px; right: 0; width: 52px; height: 50px; }
  .he-brands .he-section-heading { padding-right: 0; }
  .he-brands .he-section-heading h2 { padding-right: 64px; }
}

.he-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 52px;
  padding: 13px 22px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease;
}
.he-button svg, .he-inline-link svg { flex: none; }
.he-button--primary { background: var(--tud-color-accent-base); color: var(--tud-color-text-on-accent); }
.he-button--primary:hover { background: var(--tud-color-accent-pressed); }
.he-button--secondary { color: var(--tud-color-text-primary); border-color: var(--site-control-border); background: transparent; }
.he-button--secondary:hover { background: var(--tud-color-bg-sunken); }
.he-inline-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 700; text-decoration: none; }
.he-inline-link:hover { text-decoration: underline; text-underline-offset: 5px; }

/* The first screen proves the value with one actual, clickable offer. */
.he-hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; padding-block: 66px 80px; }
.he-hero h1 { font-size: clamp(52px, 5.8vw, 84px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 800; }
.he-hero-lede { max-width: 40ch; margin-top: 26px; font-size: 20px; line-height: 1.6; color: var(--tud-color-text-secondary); }
.he-location { margin-top: 16px; font-size: 15px; color: var(--tud-color-text-secondary); }
.he-hero-actions { margin-top: 28px; }
.he-hero-actions > div { min-width: 0; }
/* Transparent ink and orange pair, like every other doodle on the site, so no
   blend mode is needed and the arch shows through cleanly on every browser. */
.he-hero-student { position: relative; display: block; overflow: hidden; pointer-events: none; }
.he-hero-student img { position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; box-sizing: border-box; padding: 7% 6% 0; object-fit: contain; object-position: 50% 100%; }
.he-hero-actions .he-free { align-items: start; }
.he-free { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 13px; color: var(--tud-color-text-secondary); }
.he-free svg { flex: none; color: var(--site-accent-text); }
.he-hero-feature { min-width: 0; }
.he-feature { position: relative; display: block; padding: 28px 30px 0; color: var(--tud-color-text-primary); border-radius: 16px; text-decoration: none; }
.he-feature:hover { outline: 2px solid var(--site-accent-text); outline-offset: 4px; }
.he-feature-top { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.he-feature-top h2 { font-size: 24px; line-height: 1.15; letter-spacing: -0.025em; }
.he-channel { font-size: 13px; text-align: right; flex-shrink: 0; }
.he-feature-middle { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; padding-block: 20px 12px; min-height: 230px; }
.he-feature .he-feature-art { grid-column: 2; grid-row: 1; width: 100%; height: 260px; }
.he-feature-saving { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.he-saving-number { font-family: var(--tud-font-secondary); font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.he-feature-saving .he-saving-number { font-size: clamp(54px, 5.3vw, 78px); }
.he-feature-saving .he-saving-rest { margin-top: 8px; font-size: 25px; max-width: 10ch; }
.he-saving-rest { font-weight: 600; line-height: 1.15; text-transform: lowercase; }
.he-saving-label { font-size: 32px; font-weight: 700; line-height: 1.05; }
.he-feature-title { max-width: 28ch; font-size: 19px; line-height: 1.45; margin-bottom: 25px; }
.he-feature-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; border-top: 1.5px dashed currentColor; font-size: 15px; font-weight: 700; }
.he-feature::before, .he-feature::after { content: ''; position: absolute; bottom: 52px; width: 18px; height: 18px; border-radius: 50%; background: var(--tud-color-bg-canvas); }
.he-feature::before { left: -9px; }
.he-feature::after { right: -9px; }
.he-feature--fallback { background: var(--tud-color-deal-panel-1); padding-bottom: 20px; }
.he-feature--fallback .he-feature-art { width: 180px; height: 180px; margin-inline: auto; }
.he-feature--fallback h2 { font-size: 30px; margin-bottom: 10px; }
.he-feature--fallback::before, .he-feature--fallback::after { display: none; }
.he-color-0 { background: var(--tud-color-deal-panel-0); }
.he-color-1 { background: var(--tud-color-deal-panel-1); }
.he-color-2 { background: var(--tud-color-deal-panel-2); }
.he-color-3 { background: var(--tud-color-deal-panel-3); }
.he-color-4 { background: var(--tud-color-deal-panel-4); }
.he-color-5 { background: var(--tud-color-deal-panel-5); }

/* Curated discovery stays separate from the filterable catalogue. */
.he-highlights { padding-block: 0 72px; }
.he-highlight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.he-highlight { --he-highlight-radius: 12px; display: grid; grid-template-columns: 0.9fr 1.1fr; min-width: 0; border: 1px solid var(--tud-color-border-strong); border-radius: var(--he-highlight-radius); color: var(--tud-color-text-primary); text-decoration: none; background: var(--tud-color-bg-surface); }
.he-highlight:hover { border-color: var(--site-accent-text); }
.he-highlight:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.he-highlight-visual { display: flex; flex-direction: column; justify-content: space-between; padding: 24px 22px 8px; overflow: clip; border-radius: calc(var(--he-highlight-radius) - 1px) 0 0 calc(var(--he-highlight-radius) - 1px); }
.he-highlight-saving { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; }
.he-highlight-saving .he-saving-number { font-size: 48px; }
.he-highlight-saving .he-saving-rest { font-size: 18px; }
.he-highlight-saving .he-saving-label { font-size: 30px; overflow-wrap: anywhere; }
.he-highlight .he-highlight-art { width: 100%; height: 122px; margin-top: 12px; }
.he-highlight-body { display: flex; flex-direction: column; min-width: 0; padding: 26px 24px 22px; }
.he-highlight-label { color: var(--site-accent-text); font-size: 12px; font-weight: 700; }
.he-highlight h3 { margin-top: 10px; font-size: 26px; line-height: 1.15; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.he-highlight-body > p { margin-top: 9px; color: var(--tud-color-text-secondary); font-size: 16px; line-height: 1.45; }
.he-highlight-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 24px; font-size: 13px; color: var(--tud-color-text-secondary); }
.he-highlight-bottom svg { flex: none; color: var(--site-accent-text); }
.he-brands { padding-block: 64px; border-bottom: 1px solid var(--tud-color-border-strong); }
.he-brand-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; padding: 0; margin: 0; list-style: none; }
.he-brand { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 92px; padding-block: 20px; border-top: 1px solid var(--tud-color-border-strong); color: var(--tud-color-text-primary); text-decoration: none; }
.he-brand-name { display: block; font-size: 21px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.he-brand-category { display: block; margin-top: 6px; color: var(--tud-color-text-secondary); font-size: 13px; }
.he-brand svg { flex: none; color: var(--site-accent-text); }
.he-brand:hover .he-brand-name { text-decoration: underline; text-underline-offset: 4px; }
.he-ticker-copy { display: none; }
.he-ticker-toggle { min-height: 44px; padding: 8px 0; margin: -12px 0 12px; color: var(--site-accent-text); background: transparent; border: 0; font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.is-ticker .he-brand-window { overflow: hidden; padding: 6px; margin: -6px; }
.is-ticker .he-brand-track { display: flex; width: max-content; animation: he-brands-scroll 38s linear infinite; }
.is-ticker .he-brand-list { display: flex; flex: none; gap: 32px; padding-right: 32px; }
.is-ticker .he-brand-list > li { width: 210px; flex: none; }
.is-ticker .he-brand { min-height: 100px; }
.is-ticker-paused .he-brand-track, .is-ticker .he-brand-window:hover .he-brand-track { animation-play-state: paused; }
/* Keyboard focus shows the original links in a stable, fully visible list. */
.is-ticker .he-brand-window:focus-within .he-brand-track { animation: none; width: auto; }
.is-ticker .he-brand-window:focus-within .he-brand-list { flex-wrap: wrap; width: 100%; padding-right: 0; }
.is-ticker .he-brand-window:focus-within .he-ticker-copy { display: none; }
@keyframes he-brands-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .he-brand-track { animation: none !important; }
  .he-ticker-copy { display: none !important; }
}

/* One catalogue. The illustrated category choices are working filters. */
.he-browse { background: var(--tud-color-bg-surface); padding-block: 60px 72px; }
.he-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
.he-section-heading h2, .he-faq h2 { font-size: clamp(32px, 3.35vw, 48px); line-height: 1.08; letter-spacing: -0.035em; }
.he-section-heading p { margin-top: 10px; color: var(--tud-color-text-secondary); font-size: 17px; line-height: 1.55; }
.he-section-heading > p { max-width: 34ch; margin: 0; }
.he-section-heading > .he-inline-link { flex: none; }
.he-categories { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; border-bottom: 1px solid var(--tud-color-border-strong); }
.he-category { position: relative; display: flex; flex-direction: column; align-items: center; padding: 17px 8px 21px; color: var(--tud-color-text-primary); text-align: center; text-decoration: none; border-radius: 10px 10px 0 0; }
.he-category::after { content: ''; position: absolute; height: 3px; bottom: -1px; left: 12px; right: 12px; background: transparent; }
.he-category.is-active { background: var(--tud-color-accent-tint); }
.he-category.is-active::after { background: var(--tud-color-accent-base); }
.he-category:hover { background: var(--tud-color-bg-canvas); }
.he-category.is-active:hover { background: var(--tud-color-accent-tint); }
.he-category .theme-art, .he-all-art { display: grid; place-items: center; width: 68px; height: 60px; margin-bottom: 10px; }
.he-category .theme-art { display: block; }
.he-all-art { color: var(--site-accent-text); }
.he-category-name { font-weight: 700; font-size: 16px; white-space: nowrap; }
.he-category-count { font-size: 13px; margin-top: 3px; color: var(--tud-color-text-secondary); }
.he-results-line { display: flex; justify-content: space-between; gap: 24px; margin-block: 25px 18px; color: var(--tud-color-text-secondary); font-size: 13px; }
.he-results-line p { font-weight: 600; color: var(--tud-color-text-primary); }
.he-deals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.he-deal { position: relative; display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 14px 20px 14px 14px; border: 1px solid var(--tud-color-border-strong); border-radius: 12px; color: var(--tud-color-text-primary); text-decoration: none; }
.he-deal:hover { border-color: var(--site-accent-text); }
.he-deal:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.he-deal .he-deal-art { width: 108px; height: 118px; padding: 14px; border-radius: 8px; }
.he-deal h3 { font-size: 21px; line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.he-deal-title { font-size: 14px; line-height: 1.4; margin-top: 6px; color: var(--tud-color-text-secondary); }
.he-deal-channel { display: block; color: var(--tud-color-text-secondary); font-size: 12px; margin-top: 12px; }
.he-deal-saving { display: flex; flex-direction: column; gap: 6px; align-items: end; text-align: right; align-self: start; padding-top: 6px; max-width: 110px; }
.he-deal-saving .he-saving-number { font-size: 35px; }
.he-deal-saving .he-saving-rest { font-size: 13px; max-width: 9ch; }
.he-deal-saving .he-saving-label { font-size: 20px; max-width: 8ch; }
.he-deal-arrow { position: absolute; right: 20px; bottom: 20px; color: var(--site-accent-text); }
.he-filter-empty { padding: 30px 20px 24px; text-align: center; }
.he-filter-empty .theme-art { width: 100px; height: 100px; margin: 0 auto 16px; }
.he-filter-empty h3 { font-size: 24px; }
.he-filter-empty p { color: var(--tud-color-text-secondary); margin: 8px 0 20px; }
.he-unavailable { display: flex; align-items: center; gap: 32px; padding: 40px 0; }
.he-unavailable .theme-art { flex: 0 0 120px; height: 120px; }
.he-unavailable h3 { font-size: 24px; }
.he-unavailable p { margin-top: 8px; color: var(--tud-color-text-secondary); }

/* Verify once, then choose online OR in store. These are not three steps. */
.he-how { padding-block: 80px; }
.he-how .he-section-heading { margin-bottom: 42px; }
.he-how-layout { display: grid; grid-template-columns: 1fr 1.18fr; gap: 64px; }
.he-verification { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: start; gap: 25px; padding-top: 22px; }
.he-verification .he-verification-art { width: 128px; height: 160px; }
.he-verification h3 { font-size: 25px; line-height: 1.15; }
.he-verification p { margin-top: 12px; font-size: 16px; line-height: 1.65; color: var(--tud-color-text-secondary); }
.he-verification .he-button { margin-top: 24px; }
.he-use-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.he-use { border-top: 2px solid var(--tud-color-border-strong); padding-top: 19px; }
.he-use-heading { display: flex; flex-direction: column-reverse; align-items: start; gap: 14px; }
.he-use h3 { font-size: 23px; line-height: 1.2; }
.he-use-heading .theme-art { width: 100%; height: 122px; }
.he-use p { margin-top: 12px; font-size: 16px; line-height: 1.65; color: var(--tud-color-text-secondary); }
.he-use-note { display: block; margin-top: 20px; font-size: 13px; font-weight: 600; color: var(--site-accent-text); }

/* Real device hardware and annotations explain the two app previews. */
.he-app { display: grid; grid-template-columns: 1fr 1.08fr; align-items: center; gap: 48px; padding: 48px; margin-bottom: 56px; border-radius: 16px; background: var(--tud-color-deal-panel-1); }
.he-app-copy, .he-app-showcase { min-width: 0; }
.he-app h2 { font-size: clamp(36px, 3.8vw, 54px); line-height: 1.12; letter-spacing: -0.035em; }
.he-annotated { position: relative; display: inline-block; }
.he-annotated svg { position: absolute; width: 100%; height: 12px; bottom: -7px; left: 0; fill: none; stroke: var(--site-accent-text); stroke-width: 2.5; stroke-linecap: round; pointer-events: none; }
.he-app-lede { max-width: 38ch; margin-top: 28px; font-size: 18px; line-height: 1.6; color: var(--tud-color-text-primary); }
.he-app-benefits { padding-left: 20px; margin-block: 24px 30px; font-size: 16px; line-height: 1.5; }
.he-app-benefits li { padding-left: 4px; }
.he-app-benefits li + li { margin-top: 10px; }
.he-app-benefits li::marker { color: var(--site-accent-text); }
/* Compact store badges; availability is supporting copy outside the action. */
.he-app-stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 400px; }
.he-store-option { min-width: 0; }
.he-store { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-content: center; align-items: center; min-height: 64px; padding: 10px 14px; border: 1px solid #625b54; border-radius: 9px; background: #141412; color: #FAF7F2; text-decoration: none; }
.he-store-logo { grid-column: 1; grid-row: 1 / 3; width: 28px; height: 30px; object-fit: contain; align-self: center; }
.he-store > span { grid-column: 2; grid-row: 1; font-size: 10px; line-height: 1.4; }
.he-store strong { grid-column: 2; grid-row: 2; font-size: 21px; font-weight: 500; line-height: 1.15; white-space: nowrap; }
.he-store-status { display: block; margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--tud-color-text-secondary); }
a.he-store:hover { background: #292621; }
.he-app-copy > .he-inline-link { margin-top: 20px; font-size: 14px; }
.he-app-phones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; max-width: 600px; margin-inline: auto; padding-inline: 8px; }
.he-app-phone { margin: 0; min-width: 0; }
.he-app-phone figcaption { position: relative; min-height: 116px; text-align: center; }
.he-app-phone figcaption strong { display: block; font-family: 'Caveat', 'Outfit', sans-serif; font-size: 40px; line-height: 1.05; font-weight: 700; letter-spacing: 0; color: var(--site-accent-text); transform: rotate(-2deg); }
.he-app-phone figcaption span { display: block; margin-top: 4px; font-family: 'Caveat', 'Outfit', sans-serif; font-size: 27px; font-weight: 500; color: var(--tud-color-text-secondary); }
.he-app-phone figcaption svg { display: block; width: 65px; height: 38px; margin: 5px auto 0; fill: none; stroke: var(--site-accent-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Normalize the visible hardware bounds, rather than transparent image canvases. */
.he-iphone-device { position: relative; width: 100%; aspect-ratio: 736 / 1528; transform: rotate(-3deg); }
.he-iphone-image { position: absolute; width: 103.26087%; max-width: none; height: auto; left: -1.63043%; top: -0.91623%; }
.he-pixel-device { position: relative; width: 98.31877%; margin-inline: auto; aspect-ratio: 645 / 1362; transform: rotate(3deg); }
.he-pixel-screen { position: absolute; left: 4.1546%; top: 1.927%; width: 91.223%; height: 96.12%; object-fit: contain; background: #141412; border-radius: 8.5% / 3.85%; }
.he-pixel-frame { position: absolute; display: block; width: 117.82946%; max-width: none; height: auto; left: -9.14729%; top: -3.89134%; pointer-events: none; }
.he-app-preview-note { margin-top: 28px; font-size: 12px; line-height: 1.5; text-align: center; }
@media (max-width: 1100px) {
  .he-app { gap: 32px; padding: 40px 32px; }
  .he-app-phones { gap: 12px; }
  .he-app-phone figcaption strong { font-size: 34px; }
}
@media (max-width: 800px) {
  .he-app { grid-template-columns: 1fr; gap: 36px; padding: 40px; margin-bottom: 48px; }
  .he-app-copy { max-width: 520px; }

  .he-app-phones { max-width: 530px; gap: 24px; }
}
@media (max-width: 600px) {
  .he-app { padding: 30px 22px; gap: 32px; margin-bottom: 40px; }
  .he-app h2 { font-size: 36px; }
  .he-app-lede { margin-top: 24px; font-size: 16px; }
  .he-app-benefits { margin-block: 20px 24px; font-size: 15px; }
  .he-app-stores { gap: 10px; }
  .he-app-phones { gap: 12px; padding-inline: 4px; }
  .he-iphone-device { transform: rotate(-2deg); }
  .he-pixel-device { transform: rotate(2deg); }
  .he-app-phone figcaption { min-height: 112px; }
  .he-app-phone figcaption strong { font-size: 14px; }
  .he-app-phone figcaption span { font-size: 11px; }
  .he-app-preview-note { margin-top: 16px; font-size: 11px; }
}

.he-faq { display: grid; grid-template-columns: 0.85fr 1.4fr; gap: 96px; padding-block: 64px 80px; border-top: 1px solid var(--tud-color-border-strong); }
.he-faq-intro { align-self: start; }
/* Follow the questions within their section, matching the live homepage. */
@media (min-width: 601px) and (min-height: 500px) {
  .he-faq-intro { position: sticky; top: 112px; }
}
.he-faq-intro p { margin-top: 16px; font-size: 17px; color: var(--tud-color-text-secondary); }
.he-faq-intro .he-inline-link { margin-top: 22px; font-size: 15px; }
.he-questions details { border-bottom: 1px solid var(--tud-color-border-strong); }
.he-questions summary { display: flex; justify-content: space-between; align-items: center; gap: 22px; min-height: 74px; padding-block: 19px; cursor: pointer; list-style: none; font-size: 18px; line-height: 1.35; font-weight: 600; }
.he-questions summary::-webkit-details-marker { display: none; }
.he-questions summary > span { position: relative; flex: 0 0 18px; width: 18px; height: 18px; }
.he-questions summary > span::before, .he-questions summary > span::after { content: ''; position: absolute; top: 8px; left: 2px; width: 14px; height: 2px; background: var(--site-accent-text); border-radius: 1px; }
.he-questions summary > span::after { transform: rotate(90deg); }
.he-questions details[open] summary > span::after { transform: none; }
.he-questions summary:hover { color: var(--site-accent-text); }
.he-questions details > p { padding: 0 35px 24px 0; color: var(--tud-color-text-secondary); font-size: 16px; line-height: 1.65; }

.he-merchant { display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; align-items: center; gap: 36px; padding: 32px 40px; border-radius: 16px; background: var(--tud-color-ramp-neutral-950); color: var(--tud-color-ramp-neutral-50); }
.he-merchant .he-merchant-art { width: 108px; height: 112px; }
.he-home .he-merchant .he-merchant-art > .theme-art-light { display: none; }
.he-home .he-merchant .he-merchant-art > .theme-art-dark { display: block; }
.he-merchant h2 { font-size: 29px; line-height: 1.15; max-width: 30ch; }
.he-merchant p { max-width: 57ch; margin-top: 10px; color: var(--tud-color-ramp-neutral-300); font-size: 15px; line-height: 1.55; }
.he-merchant .he-button { flex: none; }

@media (max-width: 1100px) {
  .he-hero { grid-template-columns: 1.12fr 1fr; gap: 32px; }
  .he-hero h1 { font-size: clamp(48px, 6.1vw, 66px); }
  .he-hero-lede { font-size: 18px; }
  .he-feature { padding: 22px 24px 0; }
  .he-feature-top { gap: 12px; }
  .he-feature-top h2 { font-size: 21px; }
  .he-feature .he-feature-art { height: 230px; }
  .he-feature-middle { min-height: 190px; }
  .he-feature-saving .he-saving-number { font-size: 64px; }
  .he-feature-saving .he-saving-rest { font-size: 22px; }
  .he-deal { grid-template-columns: 80px minmax(0, 1fr) auto; gap: 14px; padding-right: 16px; }
  .he-deal .he-deal-art { width: 80px; height: 108px; padding: 9px; }
  .he-deal h3 { font-size: 19px; }
  .he-deal-saving .he-saving-number { font-size: 29px; }
  .he-how-layout { gap: 36px; grid-template-columns: 1fr 1.1fr; }
  .he-verification { display: block; padding-top: 0; }
  .he-verification .he-verification-art { width: 104px; height: 115px; margin-bottom: 20px; }
  .he-use-options { gap: 24px; }
  .he-merchant { grid-template-columns: 88px minmax(0, 1fr); gap: 24px; }
  .he-merchant .he-merchant-art { width: 88px; }
  .he-merchant > .he-button { grid-column: 2; justify-self: start; }
}
@media (max-width: 800px) {
  .he-highlights { padding-bottom: 56px; }
  .he-highlight-grid { gap: 16px; }
  .he-highlight { grid-template-columns: 1fr; }
  .he-highlight-visual { flex-direction: row; align-items: center; gap: 10px; padding: 20px; border-radius: calc(var(--he-highlight-radius) - 1px) calc(var(--he-highlight-radius) - 1px) 0 0; }
  .he-highlight .he-highlight-art { width: 110px; height: 110px; flex: 0 0 110px; margin: 0; }
  .he-highlight-saving { flex-direction: column; align-items: flex-start; }
  .he-highlight-saving .he-saving-number { font-size: 42px; }
  .he-highlight-body { padding: 20px; }
  .he-brand-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
  .he-brands { padding-block: 48px; }
  .he-hero { padding-block: 48px 56px; }
  .he-hero h1 { font-size: 48px; }
  .he-hero-lede { font-size: 17px; }
  .he-feature-top { align-items: start; flex-direction: column; gap: 5px; }
  .he-feature-middle { min-height: 168px; }
  .he-feature .he-feature-art { height: 200px; }
  .he-feature-saving .he-saving-number { font-size: 54px; }
  .he-feature-title { font-size: 16px; }
  .he-feature-saving .he-saving-rest { font-size: 19px; }
  .he-browse { padding-block: 48px 56px; }
  .he-categories { gap: 4px; }
  .he-category-name { font-size: 13px; }
  .he-deals { gap: 12px; }
  .he-deal { grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 0 12px; padding: 14px; }
  .he-deal .he-deal-art { width: 64px; height: 74px; grid-row: 1 / 3; }
  .he-deal-body { grid-column: 2; grid-row: 1; }
  .he-deal-saving { grid-column: 2; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-self: start; max-width: none; text-align: left; padding-top: 14px; padding-right: 25px; }
  .he-deal-saving .he-saving-rest { max-width: none; }
  .he-deal-arrow { bottom: 17px; right: 14px; }
  .he-how { padding-block: 56px; }
  .he-how-layout { grid-template-columns: 1fr; gap: 36px; }
  .he-verification { display: grid; grid-template-columns: 135px 1fr; padding: 0 0 32px; border-bottom: 1px solid var(--tud-color-border-strong); }
  .he-verification .he-verification-art { width: 135px; height: 160px; }
  .he-use-options { gap: 48px; }
  .he-use { padding-top: 0; border: 0; }
  .he-use-heading { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; }
  .he-use-heading .theme-art { width: 95px; height: 110px; flex: 0 0 95px; }
  .he-faq { grid-template-columns: 0.85fr 1.4fr; gap: 40px; padding-block: 48px 56px; }
  .he-faq h2 { font-size: 34px; }
  .he-questions summary { font-size: 17px; }
  .he-merchant { padding: 30px; }
}
@media (max-width: 600px) {
  .he-highlights { padding-bottom: 40px; }
  .he-highlights .he-section-heading { display: block; }
  .he-highlights .he-section-heading > .he-inline-link { margin-top: 6px; font-size: 15px; }
  .he-highlight-grid { grid-template-columns: 1fr; }
  .he-highlight { grid-template-columns: 0.85fr 1.15fr; }
  .he-highlight-visual { flex-direction: column; align-items: stretch; justify-content: space-between; padding: 20px 14px 10px; border-radius: calc(var(--he-highlight-radius) - 1px) 0 0 calc(var(--he-highlight-radius) - 1px); }
  .he-highlight .he-highlight-art { width: 100%; height: 100px; flex: 0 0 100px; }
  .he-highlight-saving .he-saving-number { font-size: 40px; }
  .he-highlight-saving .he-saving-rest { font-size: 16px; }
  .he-highlight-body { padding: 20px 16px; }
  .he-highlight h3 { font-size: 23px; }
  .he-highlight-body > p { font-size: 14px; }
  .he-brands { padding-block: 40px; }
  .he-brand-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .he-brand-name { font-size: 19px; }
  .he-home .container { width: calc(100% - 40px); }
  .he-home .nav-logo { width: 124px; }
  .he-home .nav { padding-inline: 20px; }
  .he-home .nav-right { gap: 10px; }
  .he-home .nav-cta { padding-inline: 13px; font-size: 12px; }
  .he-home .nav-signin { display: none; }
  .he-hero { grid-template-columns: 1fr; gap: 34px; padding-block: 38px 40px; }
  .he-hero h1 { font-size: clamp(40px, 11.6vw, 64px); }
  .he-hero-lede { max-width: 40ch; margin-top: 19px; font-size: 17px; line-height: 1.55; }
  .he-location { margin-top: 13px; font-size: 13px; }
  .he-hero-actions { margin-top: 24px; }
  .he-hero-actions .he-button { font-size: 14px; padding: 12px 14px; gap: 10px; max-width: 100%; }
  .he-free { font-size: 12px; }
  .he-feature { padding: 20px 22px 0; }
  .he-feature-top { flex-direction: row; align-items: center; }
  .he-feature-top h2 { font-size: 22px; }
  .he-feature-middle { grid-template-columns: 1fr 1.1fr; min-height: 146px; padding-block: 8px 0; }
  .he-feature .he-feature-art { height: 200px; }
  .he-feature-saving .he-saving-number { font-size: 68px; }
  .he-feature-saving .he-saving-rest { font-size: 22px; margin-top: 3px; }
  .he-feature-title { margin-bottom: 17px; max-width: 30ch; font-size: 17px; }
  .he-feature-bottom { padding-block: 16px; }
  .he-feature::before, .he-feature::after { bottom: 44px; }
  .he-feature--fallback { padding-bottom: 18px; }
  .he-browse { padding-block: 36px 42px; }
  .he-section-heading { gap: 16px; margin-bottom: 22px; }
  .he-section-heading h2, .he-faq h2 { font-size: 32px; }
  .he-section-heading p { font-size: 15px; }
  .he-section-heading > .he-inline-link { font-size: 13px; gap: 6px; }
  .he-section-heading > .he-inline-link svg { width: 16px; }
  .he-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border-bottom: 0; }
  .he-category { border-radius: 9px; padding: 12px 5px 14px; }
  .he-category::after { left: 20px; right: 20px; bottom: 0; border-radius: 3px; }
  .he-category .theme-art, .he-all-art { width: 50px; height: 44px; margin-bottom: 7px; }
  .he-all-art svg { width: 34px; height: 34px; }
  .he-category-count { font-size: 12px; }
  .he-results-line { display: block; margin-block: 23px 15px; }
  .he-results-line > span { display: block; margin-top: 3px; font-size: 12px; }
  .he-deals { grid-template-columns: 1fr; gap: 12px; }
  .he-deal { grid-template-columns: 72px minmax(0, 1fr); padding: 14px; gap: 0 15px; }
  .he-deal .he-deal-art { width: 72px; height: 88px; }
  .he-deal h3 { font-size: 21px; }
  .he-deal-title { font-size: 14px; }
  .he-deal-channel { margin-top: 8px; }
  .he-deal-saving { padding-top: 12px; }
  .he-deal-saving .he-saving-number { font-size: 30px; }
  .he-unavailable { flex-direction: column; text-align: center; gap: 16px; padding-block: 20px; }
  .he-unavailable .theme-art { flex-basis: auto; width: 90px; height: 90px; }
  .he-how { padding-block: 42px; }
  .he-how .he-section-heading { display: block; margin-bottom: 30px; }
  .he-how-heading-side { display: block; }
  .he-how .he-section-heading > p { margin-top: 15px; font-size: 16px; }
  .he-verification { grid-template-columns: 84px minmax(0, 1fr); gap: 20px; padding-bottom: 28px; }
  .he-verification .he-verification-art { width: 84px; height: 118px; }
  .he-verification h3 { font-size: 23px; }
  .he-verification p, .he-use p { font-size: 15px; }
  .he-verification .he-button { min-height: 48px; font-size: 14px; gap: 14px; padding-inline: 16px; margin-top: 19px; }
  .he-how-layout { gap: 28px; }
  .he-use-options { grid-template-columns: 1fr; gap: 28px; }
  .he-use-heading { min-height: 80px; }
  .he-use-heading .theme-art { width: 88px; height: 88px; flex-basis: 88px; }
  .he-use h3 { font-size: 24px; }
  .he-use p { margin-top: 6px; }
  .he-use-note { margin-top: 12px; }
  .he-faq { grid-template-columns: 1fr; gap: 20px; padding-block: 38px 42px; }
  .he-faq h2 br { display: none; }
  .he-faq-intro p { margin-top: 10px; font-size: 16px; }
  .he-faq-intro .he-inline-link { margin-top: 9px; font-size: 14px; }
  .he-questions summary { min-height: 72px; font-size: 17px; }
  .he-questions details > p { padding-right: 20px; font-size: 15px; }
  .he-merchant { grid-template-columns: 1fr; gap: 18px; padding: 26px; }
  .he-merchant .he-merchant-art { width: 82px; height: 76px; }
  .he-merchant h2 { font-size: 29px; max-width: 18ch; }
  .he-merchant > .he-button { grid-column: 1; justify-self: start; margin-top: 4px; }
  .he-home .footer { margin-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .he-button { transition: none; }
}

/* Brand discovery and the narrow-screen navigation are real controls. */
.he-search { position: relative; width: 310px; max-width: 100%; flex: none; }
.he-search > svg { position: absolute; left: 15px; top: 15px; color: var(--tud-color-text-secondary); pointer-events: none; }
.he-search input { display: block; width: 100%; height: 50px; padding: 12px 16px 12px 44px; border: 1px solid var(--site-control-border); border-radius: 9px; background: var(--tud-color-bg-surface); color: var(--tud-color-text-primary); font-size: 15px; caret-color: var(--site-accent-text); }
.he-search input::placeholder { color: var(--tud-color-text-secondary); }
.he-results-line > a { color: var(--site-accent-text); text-underline-offset: 3px; }
.he-mobile-nav { display: none; position: relative; }
.he-mobile-nav summary { display: grid; place-items: center; width: 40px; height: 40px; cursor: pointer; list-style: none; border-radius: 8px; }
.he-mobile-nav summary::-webkit-details-marker { display: none; }
.he-mobile-nav[open] summary { background: var(--tud-color-accent-tint); }
.he-mobile-menu { position: absolute; top: calc(100% + 12px); right: 0; width: 260px; padding: 10px; border: 1px solid var(--tud-color-border-strong); border-radius: 12px; background: var(--tud-color-bg-surface); box-shadow: var(--tud-elevation-e3); z-index: 60; }
.he-mobile-menu a { display: block; padding: 13px 14px; border-radius: 6px; font-size: 15px; font-weight: 600; color: var(--tud-color-text-primary); text-decoration: none; }
.he-mobile-menu a:hover { background: var(--tud-color-accent-tint); }
@media (max-width: 980px) { .he-mobile-nav { display: block; } }
@media (max-width: 600px) {
  .he-browse .he-section-heading { flex-wrap: wrap; gap: 18px; }
  .he-search { width: 100%; }
  .he-results-line > a { display: inline-block; margin-top: 6px; min-height: 28px; }
  .he-home .nav { gap: 12px; padding-inline: 20px; }
  .he-home .nav-logo { width: 112px; }
  .he-home .nav-right { gap: 7px; }
  .he-home .theme-toggle { width: 36px; height: 36px; }
  .he-mobile-nav summary { width: 36px; height: 36px; }
  .he-home .nav-cta { font-size: 11px; padding-inline: 11px; }
}
@media (max-width: 360px) { .he-home .nav-right > .nav-cta { display: none; } }

/* Partner-selected imagery occupies the same space as its doodle fallback. */
.he-offer-art { position: relative; display: block; overflow: hidden; border-radius: 10px; }
.he-offer-art .he-photo-fallback { width: 100%; height: 100%; }
.he-offer-art > .he-offer-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Opaque backing overlaps the screen cutout so rotated subpixels cannot reveal a light seam. */
.he-pixel-device::before { content: ''; position: absolute; left: 3.65%; top: 1.5%; width: 92.3%; height: 97%; background: #141412; border-radius: 9% / 4%; }
.he-pixel-screen { left: 3.9%; top: 1.7%; width: 91.8%; height: 96.6%; object-fit: cover; }
.he-brand { justify-content: flex-start; gap: 14px; }
.he-brand-logo { position: relative; flex: 0 0 52px; width: 52px; height: 52px; display: grid; place-items: center; background: var(--tud-color-bg-surface); border: 1px solid var(--tud-color-border-default); border-radius: 10px; color: var(--tud-color-text-secondary); font-size: 18px; font-weight: 700; overflow: hidden; }
.he-brand-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--tud-color-bg-surface); padding: 5px; }
.he-brand > span:last-child { min-width: 0; }
.he-brand-name { font-size: 19px; }
.he-ticker-copy { display: none; }
.is-ticker .he-featured-window { overflow: hidden; padding: 6px; margin: -6px; }
.is-ticker .he-featured-track { display: flex; width: max-content; animation: he-brands-scroll 48s linear infinite; }
.is-ticker .he-highlight-grid { display: flex; gap: 24px; padding-right: 24px; flex: none; }
.is-ticker .he-highlight { width: var(--he-featured-width); flex: none; }
.is-ticker-paused .he-featured-track, .is-ticker .he-featured-window:hover .he-featured-track { animation-play-state: paused; }
.is-ticker .he-featured-window:focus-within .he-featured-track { width: auto; animation: none; }
.is-ticker .he-featured-window:focus-within .he-highlight-grid { display: grid; width: 100%; padding-right: 0; }
.is-ticker .he-featured-window:focus-within .he-highlight { width: auto; }
.is-ticker .he-featured-window:focus-within .he-ticker-copy { display: none; }
@media (prefers-reduced-motion: reduce) { .he-featured-track { animation: none !important; } .he-ticker-copy { display: none !important; } }

@media (max-width: 600px) {
  .he-store { grid-template-columns: 23px minmax(0, 1fr); column-gap: 8px; padding-inline: 10px; min-height: 60px; }
  .he-store-logo { width: 23px; height: 26px; }
  .he-store strong { font-size: 18px; }
}
@media (max-width: 360px) { .he-app-stores { grid-template-columns: 1fr; max-width: 194px; gap: 16px; } }

/* Ticker windows reach both viewport edges; headings retain the reading column. */
.he-highlights > .he-section-heading, .he-brands > .he-section-heading { margin-bottom: 24px; }
.he-brand-window, .he-featured-window { max-width: 1240px; width: calc(100% - 40px); margin-inline: auto; }
.is-ticker .he-brand-window, .is-ticker .he-featured-window { width: 100%; max-width: none; margin: 0; padding: 10px 0; overflow: hidden; }
/* Crop the moving row only horizontally; card elevation can paint above and below. */
.is-ticker .he-featured-window { overflow-x: clip; overflow-y: visible; }
.he-brands .he-brand-doodle { right: max(20px, calc((100% - 1240px) / 2)); }
.is-ticker .he-featured-track { animation-duration: var(--he-featured-duration, 60s); }
.he-highlight { min-height: 310px; }
.he-highlight-visual { padding: 28px 24px 16px; }
.he-highlight-saving .he-saving-number { font-size: 62px; }
.he-highlight .he-highlight-art { height: 184px; }
.he-highlight-body { padding: 30px; }
.he-highlight h3 { font-size: 30px; }
.he-highlight-body > p { font-size: 18px; }
.is-ticker .he-featured-window:focus-within, .is-ticker .he-brand-window:focus-within { width: calc(100% - 40px); max-width: 1240px; margin-inline: auto; padding-inline: 6px; }
@media (max-width: 800px) {
  .is-ticker .he-highlight { grid-template-columns: .9fr 1.1fr; }
  .is-ticker .he-highlight-visual { flex-direction: column; align-items: stretch; border-radius: calc(var(--he-highlight-radius) - 1px) 0 0 calc(var(--he-highlight-radius) - 1px); }
  .is-ticker .he-highlight .he-highlight-art { width: 100%; flex-basis: auto; }
}
@media (max-width: 600px) {
  .he-highlight { min-height: 270px; }
  .he-highlight-visual { padding: 22px 16px 12px; }
  .he-highlight-saving .he-saving-number { font-size: 48px; }
  .he-highlight .he-highlight-art { height: 136px; flex-basis: 136px; }
  .he-highlight-body { padding: 24px 18px; }
  .he-highlight h3 { font-size: 25px; }
  .he-highlight-body > p { font-size: 15px; }
}
/* Interaction motion is brief and responds to intent; touch keeps a stable layout. */
@media (prefers-reduced-motion: no-preference) {
  .he-button, .he-store, .he-feature, .he-highlight, .he-deal, .he-category, .he-brand-logo { transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms ease, background-color 160ms ease, border-color 160ms ease; }
  .he-inline-link svg, .he-button svg, .he-highlight-bottom svg, .he-deal-arrow, .he-feature-bottom svg { transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
  .he-highlight-art, .he-deal-art, .he-category .theme-art { transition: transform 320ms cubic-bezier(.2,.7,.2,1); }
  .he-button:active, a.he-store:active { transform: translateY(1px) scale(.985); }
  @media (hover: hover) and (pointer: fine) {
    .he-button:hover, a.he-store:hover { transform: translateY(-2px); }
    .he-feature:hover, .he-highlight:hover, .he-deal:hover { transform: translateY(-4px); box-shadow: 0 10px 24px #14141212; }
    .he-category:hover { transform: translateY(-3px); }
    .he-brand:hover .he-brand-logo { transform: translateY(-3px) rotate(-3deg); }
    .he-highlight:hover .he-highlight-art, .he-deal:hover .he-deal-art, .he-category:hover .theme-art { transform: rotate(-2deg) scale(1.035); }
    .he-inline-link:hover svg, .he-button:hover svg, .he-highlight:hover .he-highlight-bottom svg, .he-deal:hover .he-deal-arrow, .he-feature:hover .he-feature-bottom svg { transform: translateX(4px); }
  }
}


/* A single illustration-led scene, with the live offer as its caption. */
.he-hero { grid-template-columns: 1.15fr 1fr; gap: 72px; }
.he-hero-feature { position: relative; display: flex; flex-direction: column; align-items: stretch; padding: 0; min-height: 0; }
.he-hero-feature > .he-hero-lead-art { position: relative; width: 100%; height: 400px; background: #f8e1c5; border-radius: 48% 48% 0 0; }
.he-hero-feature > .he-hero-lead-art img { width: 100%; max-width: none; height: 130%; left: 0; top: -15%; }
[data-theme="dark"] .he-hero-feature > .he-hero-lead-art { background: #342b22; }
.he-hero-feature > .he-feature { display: grid; grid-template-columns: 1fr 110px; gap: 8px 20px; width: 100%; padding: 24px; border-radius: 0 0 16px 16px; background: var(--tud-color-bg-surface, #fff); border: 1px solid var(--tud-color-border, #e8ded3); }
.he-hero-feature .he-feature::before, .he-hero-feature .he-feature::after { display: none; }
.he-hero-feature .he-feature-top { display: block; grid-column: 1; }
.he-hero-feature .he-feature-top h2 { font-size: 23px; }
.he-hero-feature .he-channel { display: none; }
.he-hero-feature .he-feature-middle { grid-column: 2; grid-row: 1 / 4; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0; border-left: 1px dashed #b8a895; }
.he-hero-feature .he-feature .he-feature-art { display: none; }
.he-hero-feature .he-feature-saving .he-saving-number { font-size: 42px; }
.he-hero-feature .he-feature-saving .he-saving-rest { font-size: 16px; margin-top: 0; }
.he-hero-feature .he-feature-title { grid-column: 1; font-size: 15px; line-height: 1.4; margin: 0; }
.he-hero-feature .he-feature-bottom { grid-column: 1; border: 0; padding: 4px 0 0; font-size: 13px; justify-content: flex-start; gap: 12px; }
.he-app-stores { display: flex; flex-wrap: wrap; gap: 14px; }
.he-store-option { flex: 1 1 180px; max-width: 220px; }
.he-store { grid-template-columns: 28px minmax(0,1fr); column-gap: 12px; padding-inline: 14px; }
.he-store strong { font-size: 20px; }
.he-store-logo { width: 28px; height: 30px; }
@media (max-width: 1100px) {
  .he-hero { gap: 36px; grid-template-columns: 1.1fr 1fr; }
  .he-hero-feature > .he-hero-lead-art { height: 360px; }
  .he-hero-feature > .he-feature { grid-template-columns: 1fr 86px; padding: 20px; gap: 8px 12px; }
  .he-hero-feature .he-feature-top h2 { font-size: 21px; }
  .he-hero-feature .he-feature-saving .he-saving-number { font-size: 34px; }
}
@media (max-width: 700px) {
  .he-hero { grid-template-columns: 1fr; gap: 32px; }
  .he-hero-feature { width: min(100%, 440px); margin-inline: auto; }
  .he-hero-feature > .he-hero-lead-art { height: 330px; }
  .he-hero-feature .he-feature-title { font-size: 14px; }
}
.he-hero-feature > .he-hero-lead-art { mix-blend-mode: normal; isolation: isolate; }
.he-hero-feature > .he-hero-lead-art img { mix-blend-mode: multiply; }
[data-theme="dark"] .he-hero-feature > .he-hero-lead-art img { mix-blend-mode: screen; }
.he-hero-feature > .he-feature { border-color: var(--tud-color-border-strong); }

/* Compact captions sit close to the device they describe. */
.he-app-phone figcaption { min-height: 90px; padding: 0 4px 14px; }
.he-app-phone figcaption strong { font-size: 16px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.he-app-phone figcaption span { font-size: 12px; line-height: 1.4; margin-top: 3px; color: var(--tud-color-text-secondary); }
.he-app-phone figcaption svg { width: 44px; height: 27px; margin-top: 8px; stroke-width: 1.8; }
@media (max-width: 600px) {
  .he-app-phone figcaption { min-height: 88px; padding-inline: 0; }
  .he-app-phone figcaption strong { font-size: 13px; }
  .he-app-phone figcaption span { font-size: 11px; }
  .he-app-phone figcaption svg { width: 36px; height: 23px; margin-top: 6px; }
}

/* Direct pointers connect each caption to its device without decorative curls. */
.he-app-phone figcaption svg { width: 20px; height: 28px; margin: 8px auto 0; stroke-width: 2.5; }
@media (max-width: 600px) {
  .he-app-phone figcaption { min-height: 104px; }
  .he-app-phone figcaption svg { width: 18px; height: 24px; margin-top: 6px; }
}
/* Caption, pointer and hardware share one rotation and centerline. */
.he-app-phone--ios { --device-tilt: -3deg; }
.he-app-phone--android { --device-tilt: 3deg; }
.he-app-phone { transform: rotate(var(--device-tilt)); }
.he-app-phone .he-iphone-device, .he-app-phone .he-pixel-device { transform: none; }
.he-app-phone figcaption svg { position: static; transform: none; }
@media (max-width: 600px) {
  .he-app-phone--ios { --device-tilt: -2deg; }
  .he-app-phone--android { --device-tilt: 2deg; }
}