/* === pattern-tokens:font-import:start (generated) === */
/*
   Geologica, the face the source site uses. A stack NAMES a family; it never
   fetches one - so without this the headings below render in
   the metric-matched fallback and look deliberate.

   A <link rel="stylesheet"> in the document head is faster:
   the browser finds it while parsing the head, where this is
   not discovered until global.css has itself arrived and been
   parsed - an extra round trip on the critical path. Write the
   <link> as well; this is the backstop that makes a forgotten
   one slow rather than wrong.

   Quoted, not a bare url() token: these URLs carry a semicolon
   inside the weight axis, and only a string ends where the URL
   ends.

   At the top of the file because @import is valid only before
   any other rule. Regenerated in place; edits here are lost. */
@import url("https://fonts.googleapis.com/css2?family=Geologica:wght@400;700&display=swap");
/* === pattern-tokens:font-import:end === */

/* Lovoo -- site stylesheet. Seeded by page_brief.py --seed; the palette
   below was derived from the logo's inks and is a starting point to correct,
   never a decision already made. Everything else on this site builds on it. */

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, picture, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

/* ---- tokens ---- */
:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-soft: #f3f3f3;
  --color-text: #212121;
  --color-text-soft: #5f6368;
  --color-heading: #1565C0;
  --color-primary: #1565C0;
  --color-primary-dark: #0d47a1;
  --color-scrim: #0b1f33;
  --color-rule: #e0e0e0;
  --color-focus: #871d1d;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;
  --container-max: 75rem;

  /* The dials are the brand's character: decide them, do not keep them. */
  --btn-radius: 8px;
  --card-radius: 14px;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 28px -12px rgba(0, 0, 0, .18);
  --card-border: 1px solid var(--color-rule);
  --chip-radius: 999px;
  --logo-height: 62px;

  --transition-fast: 120ms ease;
  --transition-slow: 320ms ease;

  --type-scale: 1;
}

/* ---- base type ---- */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--weight-display, 700);
  color: var(--color-heading);
  line-height: calc(1.15 * var(--heading-leading, 1));
  letter-spacing: calc(-0.02em + var(--heading-tracking, 0) * 1em);
}

a { color: var(--color-primary); }

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === pattern-tokens:start (generated - edit outside these markers) === */
/*
   Role tokens the design patterns require. A var() this
   sheet does not define is discarded at compute time, so
   the rule is lost rather than falling back to anything.
   Regenerated in place; anything you add here is replaced.
*/
:root {
  /* Inks. The ratios are measured, not intended. */
  /* on this brand's own --color-scrim: 14.27:1 */
  --color-on-scrim: #ffffff;
  /* white 4.77:1, the brand's own text 2.99:1 on --color-primary */
  --color-on-primary: #ffffff;
}
/* === pattern-tokens:end === */

@font-face {
  font-family: 'GeologicaFallback';
  src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'),
       local('Helvetica'), local('Roboto');
  font-weight: 400;
  size-adjust: 97.2%;
  ascent-override: 101.5%;
  descent-override: 21.9%;
  line-gap-override: 0%;
}

:root {
  /* Inks. The ratios are measured, not intended. */
  /* on this brand's own --color-scrim: 13.07:1 */
  --color-on-scrim: #ffffff;

  /* Type: Lato, taken from the site being migrated (its theme sets
     font-family: var(--wp--custom--font-family, lato), sans-serif). Hand-set,
     NOT from a pairing id -- do not re-run brand_tokens.py --pairing here. */
  --font-heading: 'Geologica', 'GeologicaFallback', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Geologica', 'GeologicaFallback', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --heading-leading: 1.05;
  --heading-tracking: -0.015;
  --weight-display: 700;
}

:root {
  /* Lato, the face the source theme uses. Hand-set, NOT from a pairing id:
     do not re-run brand_tokens.py --pairing here. */
  --font-heading: 'Geologica', 'GeologicaFallback', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Geologica', 'GeologicaFallback', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --heading-leading: 1.05;
  --heading-tracking: -0.015;
  --weight-display: 700;
  --color-on-scrim: #ffffff;
}
/* === page /: its own styles (page_assemble.py; rewritten on every assemble of this page) === */
:root {
  --tg-grad-a: #00B8D4;
  --tg-grad-b: #1E88E5;
  --tg-grad-c: #7C4DFF;
}
/* ===== mast ===== */
/* The source site puts its nav in the page's content column, not across the
   full width: `.main-grid > * { grid-column: content }` with
   `--wp--style--global--content-size: 64rem`. That is why its logo and login
   sit close together rather than at the screen edges. Left and right at 0 with
   auto inline margins centres an absolutely positioned row. */
/* The shell exists so the page has one <header> landmark; it is not laid out
   and takes no space. The two rows inside it do the positioning. */
.tg-mast-shell { display: contents; }

/* Two rows, exactly as the source site has it: it ships TWO navs, one
   `position: absolute` holding the logo and the login control, and one
   `position: fixed` (`nav.navigation.main-navigation`) holding the menu. So
   the logo and login scroll away and only the menu stays. Both rows sit in
   the same 64rem centred column so they line up, and both are
   click-through with only their contents clickable, so the empty space
   either side does not swallow clicks on the page beneath. */
.tg-top { position: absolute; top: 0; left: 0; right: 0; z-index: 19;
  max-width: 64rem; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); padding: var(--space-6) var(--space-5);
  pointer-events: none; }
.tg-mast { position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  max-width: 64rem; margin-inline: auto;
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-5); padding: var(--space-6) var(--space-5);
  pointer-events: none; }
.tg-top > *, .tg-mast > * { pointer-events: auto; }
.tg-mast-mark { display: inline-flex; flex: 0 0 auto; }
.tg-mast-mark img { display: block; height: 34px; width: auto;
  filter: brightness(0) invert(1); }
/* also set inline on the element, so a stale or missing stylesheet never
   leaves a raw checkbox sitting in the header -- it did, once, during the
   six-minute stylesheet cache window after a push. */
.tg-mast-switch { position: absolute; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; }
.tg-mast-sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

.tg-mast-nav { flex: 0 1 auto; background: var(--color-surface);
  border-radius: .5rem; padding: var(--space-3) var(--space-6);
  box-shadow: 0 2px 10px rgba(16, 38, 42, .14); }
.tg-mast .tg-mast-list { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.tg-mast-list > li { position: relative; }
.tg-mast-nav a, .tg-lang-trigger { color: var(--color-text); text-decoration: none;
  font-family: var(--font-heading); font-size: .9375rem; font-weight: 600;
  white-space: nowrap; }
.tg-mast-nav a:hover, .tg-lang-trigger:hover { color: var(--color-primary); }
.tg-mast-nav a:focus-visible, .tg-lang-trigger:focus-visible {
  outline: 3px solid var(--color-primary); outline-offset: 4px; border-radius: 4px; }

/* The language switcher is a <details>: it opens on click and stays open,
   with no JavaScript and no reflow after load, because the markup is final
   when the page arrives. */
.tg-lang { position: relative; }
.tg-lang-trigger { display: inline-flex; align-items: center; gap: .4rem;
  padding-block: var(--space-3); margin-block: calc(-1 * var(--space-3));
  cursor: pointer; list-style: none; }
.tg-lang-trigger::-webkit-details-marker { display: none; }
.tg-lang-caret { width: .45rem; height: .45rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition-fast); }
.tg-lang[open] .tg-lang-caret { transform: translateY(2px) rotate(225deg); }

.tg-mast .tg-lang-panel { position: absolute; top: calc(100% + var(--space-5));
  left: 0; z-index: 30; display: flex; flex-direction: column; min-width: 13rem;
  margin: 0; padding: var(--space-3); list-style: none;
  background: var(--color-surface); border-radius: .5rem;
  box-shadow: 0 14px 34px rgba(16, 38, 42, .24); }
.tg-mast .tg-lang-panel li { width: 100%; }
.tg-mast .tg-lang-panel a { display: block; border-radius: .375rem;
  padding: var(--space-3) var(--space-5); font-weight: 500; }
.tg-mast .tg-lang-panel a:hover { background: var(--color-surface-soft); }
.tg-mast .tg-lang-current > a,
.tg-mast .tg-lang-current > a:hover { color: #ffffff; background: var(--color-primary); }

.tg-mast-login, .tg-mast-nav-login { flex: 0 0 auto; display: inline-block;
  padding: var(--space-3) var(--space-6); border-radius: var(--btn-radius);
  background: var(--color-surface); color: var(--color-text); text-decoration: none;
  font-family: var(--font-heading); font-size: .9375rem; font-weight: 700;
  box-shadow: 0 2px 10px rgba(16, 38, 42, .14);
  transition: background var(--transition-fast); }
.tg-mast-login:hover { background: var(--color-surface-soft); }
.tg-mast-login:focus-visible, .tg-mast-mark:focus-visible {
  outline: 3px solid #ffffff; outline-offset: 3px; }
.tg-mast-close, .tg-mast-login-row, .tg-lang-flat { display: none; }

/* the menu button, phones and small tablets only */
.tg-mast-button { display: none; }
/* The three bars are drawn INSIDE a 14px-tall box. Drawn as one bar plus two
   offset shadows, the box has the height of what it shows -- the earlier
   version made the element the middle bar and hung the other two outside it,
   so the button measured 2px tall and came out a squat 52x26 pill. */
.tg-mast-bars { position: relative; display: block; width: 20px; height: 14px;
  color: var(--color-text); }
.tg-mast-bars::before { content: ""; position: absolute; inset-inline: 0; top: 0;
  height: 2px; background: currentColor; border-radius: 2px;
  box-shadow: 0 6px 0 0 currentColor, 0 12px 0 0 currentColor; }

@media (max-width: 900px) {
  .tg-top, .tg-mast { padding: var(--space-5); }
  .tg-mast { justify-content: flex-end; }
  .tg-mast-mark img { height: 26px; }
  .tg-mast-login { display: none; }

  /* square, like the source site's, not a pill */
  .tg-mast-button { display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; padding: 0; border-radius: var(--btn-radius);
    background: var(--color-surface); color: var(--color-text); cursor: pointer;
    box-shadow: 0 2px 10px rgba(16, 38, 42, .14); }
  .tg-mast-switch:focus-visible ~ .tg-mast-button {
    outline: 3px solid #ffffff; outline-offset: 3px; }
  /* the panel takes the button's place, and carries its own close control */
  .tg-mast-switch:checked ~ .tg-mast-button { display: none; }

  /* A panel against the right edge rather than a full-width shelf, matching
     the source site. The languages are listed flat here, not behind the
     dropdown: a closed <details> cannot be forced open from CSS -- the browser
     hides its content itself -- so the drawer carries its own plain list. */
  .tg-mast-nav { position: absolute; top: var(--space-4); right: var(--space-5);
    left: auto; display: none; width: min(21rem, calc(100vw - 2 * var(--space-5)));
    max-height: calc(100vh - 2 * var(--space-5)); overflow-y: auto;
    padding: var(--space-5) var(--space-6) var(--space-6); border-radius: .5rem;
    box-shadow: 0 16px 40px rgba(16, 38, 42, .26); }
  .tg-mast-switch:checked ~ .tg-mast-nav { display: block; }

  .tg-mast-close { display: flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; margin-left: auto; margin-bottom: var(--space-2);
    cursor: pointer; color: var(--color-text); }
  .tg-mast-cross { position: relative; display: block; width: 18px; height: 18px; }
  .tg-mast-cross::before, .tg-mast-cross::after { content: ""; position: absolute;
    top: 50%; left: 0; width: 18px; height: 2px; background: currentColor;
    border-radius: 2px; }
  .tg-mast-cross::before { transform: rotate(45deg); }
  .tg-mast-cross::after { transform: rotate(-45deg); }

  .tg-mast .tg-mast-list { flex-direction: column; align-items: stretch; gap: 0; }
  .tg-mast-list > li { border-bottom: 1px solid var(--color-rule); }
  .tg-mast-list > li > a { display: block; padding: var(--space-4) 0;
    font-weight: 700; }
  .tg-mast-login-row { display: block; }
  /* the dropdown belongs to the wide header; the drawer lists the languages */
  .tg-lang-item { display: none; }

  .tg-lang-flat { display: block; padding-top: var(--space-5); }
  .tg-lang-flat-label { margin: 0 0 var(--space-3); color: var(--color-text);
    font-family: var(--font-heading); font-size: .8125rem; font-weight: 700; }
  .tg-mast .tg-lang-flat-list { margin: 0; padding: 0; list-style: none; }
  .tg-mast .tg-lang-flat-list a { display: block; border-radius: .375rem;
    padding: var(--space-3) var(--space-4); font-weight: 500;
    color: var(--color-text); text-decoration: none; }
  .tg-mast .tg-lang-flat-list a:hover { background: var(--color-surface-soft); }
  .tg-mast .tg-lang-flat-list .tg-lang-current > a,
  .tg-mast .tg-lang-flat-list .tg-lang-current > a:hover {
    color: #ffffff; background: var(--color-primary); }
}


/* ===== hero ===== */
.tg-hero { position: relative; display: grid; place-items: center; isolation: isolate;
  min-height: min(72vh, 42rem); overflow: hidden;
  padding: calc(var(--space-10) + 3rem) var(--space-5) var(--space-10); }
.tg-hero-shot { position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; }
.tg-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(16,38,42,.30) 0%, rgba(16,38,42,.22) 45%,
    rgba(16,38,42,.34) 100%); }
.tg-hero-inner { max-width: 58rem; margin: 0 auto; text-align: center; }
.tg-hero-title { margin: 0 0 var(--space-4); color: #ffffff; font-family: var(--font-heading);
  font-size: clamp(1.875rem, 1.15rem + 2.3vw, 2.75rem); line-height: 1.12;
  letter-spacing: calc(var(--heading-tracking) * 1em); font-weight: var(--weight-display);
  text-wrap: balance; text-shadow: 0 2px 14px rgba(16, 38, 42, .45); }
.tg-hero-sub { margin: 0 0 var(--space-7); color: #ffffff; font-family: var(--font-body);
  font-size: clamp(1rem, .95rem + 0.25vw, 1.125rem); line-height: 1.5; text-wrap: balance;
  text-shadow: 0 1px 10px rgba(16, 38, 42, .5); }
.tg-hero-cta { margin: 0; }
.tg-hero-button { display: inline-block; padding: 1.25rem 1.875rem;
  border-radius: var(--btn-radius); color: #ffffff; text-decoration: none;
  font-family: var(--font-heading); font-size: 1.5rem; line-height: 1;
  font-weight: var(--weight-display);
  background: linear-gradient(90deg, var(--tg-grad-a) 0%, var(--tg-grad-b) 55%, var(--tg-grad-c) 100%);
  box-shadow: 0 6px 20px rgba(16, 38, 42, .28);
  transition: filter var(--transition-fast); }
.tg-hero-button:hover { filter: brightness(1.08); }
.tg-hero-button:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

/* ===== points ===== */
.tg-points { padding: var(--space-10) var(--space-5); background: var(--color-bg); }
.tg-points .tg-points-list { max-width: var(--container-max); margin-inline: auto;
  margin-block: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8);
  justify-items: center; }
.tg-points-item { display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--space-4); }
.tg-points-icon { width: 96px; height: 96px; object-fit: contain; }
.tg-points-copy { margin: 0; max-width: 22rem; color: var(--color-primary);
  font-family: var(--font-heading); font-size: 1.0625rem; line-height: 1.4;
  font-weight: 700; }
@media (max-width: 860px) {
  .tg-points .tg-points-list { grid-template-columns: 1fr; gap: var(--space-7); }
}

/* ===== favourite ===== */
/* Every number here was measured off the source page rendered locally with its
   own theme.css injected (the saved link 404s because the filename carries the
   query string), at a 1280 viewport: band 1265x707 with 80px padding-block,
   content column 1024 (64rem, NOT the 1200 default), h2 32px with 0 0 20px,
   cards 232x450 with 20px/20px/40px padding and a 16px radius, pictures
   filling the card's inner width at their own ratio, h3 20px teal with 20px
   margins, copy 16px. The gradient string was already theirs verbatim -- the
   band's GEOMETRY was what made it read differently, since a 45deg gradient
   runs corner to corner. */
.tg-favourite { padding: 5rem var(--space-5);
  background: linear-gradient(45deg, var(--tg-grad-a) 0%, var(--tg-grad-b) 50%, var(--tg-grad-c) 100%); }
.tg-favourite-title { max-width: 64rem; margin: 38px auto 20px;
  text-align: center; color: #ffffff; font-family: var(--font-heading);
  font-size: 2rem; line-height: 1.2; letter-spacing: 0;
  font-weight: var(--weight-display); }
.tg-favourite .tg-favourite-cards { max-width: 64rem;
  margin-inline: auto; margin-block: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2em;
  align-items: stretch; }
.tg-favourite-card { height: 100%; display: flex; flex-direction: column;
  padding: 20px 20px 40px; background: var(--color-surface);
  border-radius: 1rem; box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .25); }
/* fills the card's inner width at the picture's own ratio -- never stretched,
   never cropped: no aspect-ratio and no object-fit anywhere near it */
.tg-favourite-shot { display: block; width: 100%; height: auto; margin: 0;
  border-radius: .5rem; }
.tg-favourite-heading { margin: 20px 0; color: var(--color-primary);
  font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.2;
  font-weight: var(--weight-display); }
.tg-favourite-copy { margin: 0; color: var(--color-text); font-family: var(--font-body);
  font-size: 1rem; line-height: 1.5; }
@media (max-width: 781px) { .tg-favourite .tg-favourite-cards { grid-template-columns: 1fr; } }

/* ===== foot ===== */
.tg-foot { padding: var(--space-9) var(--space-5) var(--space-6);
  background: var(--color-bg); border-top: 1px solid var(--color-rule); }
.tg-foot .tg-foot-inner { max-width: var(--container-max); margin-inline: auto;
  display: grid; grid-template-columns: minmax(12rem, 18rem) 1fr;
  gap: var(--space-8) var(--space-9); align-items: start; }
.tg-foot-brand { display: grid; gap: var(--space-5); justify-items: start; }
.tg-foot-mark img { display: block; width: 94px; height: auto; }
.tg-foot .tg-foot-apps, .tg-foot .tg-foot-social { display: flex; flex-wrap: wrap;
  gap: var(--space-3); margin: 0; padding: 0; list-style: none; align-items: center; }
.tg-foot-apps img { display: block; width: auto; height: 40px; }
.tg-foot-social a { display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; }
.tg-foot-social img { width: 1.75rem; height: auto; }

.tg-foot .tg-foot-menus { display: grid; grid-template-columns: 1fr 2fr;
  gap: var(--space-6); align-items: start; }
/* the source site lets its long legal menu flow into two columns rather than
   giving it its own grid track: `.menu:has(li:nth-child(6)) { columns: 2 }` */
.tg-foot .tg-foot-legal { columns: 2; column-gap: var(--space-6); }
.tg-foot .tg-foot-legal li { break-inside: avoid; }
.tg-foot .tg-foot-break { break-before: column; }
/* `footer ul li { min-height: 3rem }` on the source site */
.tg-foot .tg-foot-menus li { min-height: 3rem; }
.tg-foot .tg-foot-menus ul { margin: 0; padding: 0; list-style: none; }
.tg-foot .tg-foot-menus li { margin: 0; }
.tg-foot .tg-foot-menus a { display: inline-block; padding: var(--space-3) 0;
  color: var(--color-primary); text-decoration: none; font-family: var(--font-heading);
  font-size: .9375rem; font-weight: 700; text-wrap: pretty; }
.tg-foot .tg-foot-menus a:hover { text-decoration: underline; }
/* `footer .footer-menus a[href*="/cancellationandwithdrawal/"]` on the source
   site: white on the brand colour, its radius and card shadow. */
.tg-foot .tg-foot-menus a.tg-foot-filled { display: inline-block;
  margin: var(--space-2) 0; padding: var(--space-3) var(--space-4);
  border-radius: .5rem; color: #ffffff; background: var(--color-primary);
  box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .25); }
.tg-foot .tg-foot-menus a.tg-foot-filled:hover { color: #ffffff;
  text-decoration: none; filter: brightness(1.08); }
.tg-foot .tg-foot-menus a:focus-visible { outline: 3px solid var(--color-focus);
  outline-offset: 3px; border-radius: 4px; }

.tg-foot-copy { max-width: var(--container-max); margin: var(--space-7) auto 0;
  color: var(--color-text); font-family: var(--font-body); font-size: .6875rem;
  text-align: center; }

@media (max-width: 860px) {
  .tg-foot .tg-foot-inner { grid-template-columns: 1fr; justify-items: center;
    text-align: center; }
  .tg-foot-brand { justify-items: center; }
  .tg-foot .tg-foot-menus { grid-template-columns: 1fr; text-align: center; }
  .tg-foot .tg-foot-legal { columns: 1; }
  .tg-foot .tg-foot-break { break-before: auto; }
}
/* ===== lovoo body ===== */
/* Lovoo's homepage sections. The header, the footer and the furniture are the
   shared ones in sections.css; this file is only the middle.

   Colours are brand tokens throughout -- the source's --main-brand is
   #1565C0, --main-black #212121, --light-gray #f3f3f3, all of which this
   brand's stylesheet already defines, so another brand's palette carries
   through with nothing edited here. */

/* ---- hero ---- */
/* Every number measured off the source page rendered locally with its own
   theme stylesheet, not judged by eye: cover 1265x600 with min-height 600px
   and no padding of its own, content column 1024, h1 32px/38.4 weight 700
   white with 20px beneath, sub 16px/24, buttons 174x48 fully round. */
.lv-hero { position: relative; display: grid; place-items: center; isolation: isolate;
  min-height: 600px; overflow: hidden; }
.lv-hero-shot { position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; }
/* The source's overlay is NOT a gradient and not black: it is a flat warm grey
   at half opacity (`has-background-dim`, rgb(137,133,135) at .5), which lifts
   and desaturates the photograph. A black scrim reads far darker and more
   saturated, which is what ours did. */
.lv-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgb(137, 133, 135); opacity: .5; }
.lv-hero-inner { max-width: 64rem; margin: 0 auto; padding: 6rem var(--space-5) 4rem;
  text-align: center; color: #ffffff; }
.lv-hero-title { color: #ffffff; margin: 0 0 20px; font-size: 2rem; line-height: 1.2;
  font-weight: 700; }
.lv-hero-sub { margin: 0 0 20px; font-size: 1rem; line-height: 1.5; }

/* Two store buttons, not one join control: that is how the source sends
   people to the app. `ul[class]` in the brand stylesheet is (0,1,1) and beats
   a lone class, so the centring is written as a descendant. */
.lv-hero .lv-hero-stores { display: flex; flex-wrap: wrap; justify-content: center;
  gap: 24px; margin: 0; padding: 0; list-style: none; }
.lv-hero-store { display: inline-block; padding: 16px 20px; border-radius: 999px;
  background: var(--color-primary); color: #ffffff; text-decoration: none;
  font-family: var(--font-heading); font-size: 1rem; line-height: 1; font-weight: 700; }
.lv-hero-store:hover { filter: brightness(1.08); }
.lv-hero-store:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

/* ---- picture beside text ---- */
.lv-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: var(--space-8); max-width: 64rem; margin: 0 auto; }
.lv-split-flip .lv-split-figure { order: 2; }
.lv-split-shot { width: 100%; height: auto; border-radius: 1rem; }
.lv-split-copy h2 { margin: 0 0 var(--space-5); font-size: 2rem; line-height: 1.15; }
.lv-split-copy p { margin: 0 0 var(--space-4); font-size: 1rem; line-height: 1.6; }
.lv-split-cta { margin-top: var(--space-6); }
.lv-button { display: inline-block; padding: 16px 20px; border-radius: 999px;
  background: var(--color-primary); color: #ffffff; text-decoration: none;
  font-family: var(--font-heading); font-size: 1rem; line-height: 1; font-weight: 700; }
.lv-button:hover { filter: brightness(1.08); }

.lv-pitch { padding: 5rem var(--space-5); background: var(--color-surface); }
.lv-pitch .lv-split-copy h2 { color: var(--color-primary); }

/* ---- the feature band ---- */
/* Measured off the source: the band is `--main-black` rgb(33,33,33) with
   80px above and below, and it holds ONLY the feature cards. The story that
   follows is on the white page, not in the band -- reading it as part of the
   band is what made ours run dark through both. */
.lv-features { padding: 80px var(--space-5); background: var(--color-text); }
.lv-features-title { color: #ffffff; max-width: 64rem; margin: 0 auto 40px;
  font-size: 2rem; line-height: 1.2; font-weight: 700; text-align: center; }
.lv-features .lv-features-list { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; max-width: 64rem; margin: 0 auto; padding: 0; list-style: none; }
/* Each card is a WHITE box standing on the dark band -- radius 24px, the
   theme's own card shadow, and its heading in the brand blue. Ours had the
   text bare on the band, which is the difference the partner spotted. */
.lv-feature { display: flex; flex-direction: column; height: 100%;
  padding: 20px 20px 40px; border-radius: 24px; background: var(--color-surface);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .25); text-align: center; }
/* The screenshots keep their own ratio. No aspect-ratio and no object-fit
   anywhere near them -- forcing a ratio on portraits squashes them and crops
   heads off, which is exactly how this went wrong on a sibling brand. */
.lv-feature-shot { display: block; width: 100%; height: auto; margin: 0 auto 20px;
  border-radius: 8px; }
.lv-feature-heading { color: var(--color-primary); margin: 0 0 20px;
  font-size: 1.25rem; line-height: 1.25; font-weight: 700; }
.lv-feature-copy { margin: 0; color: var(--color-text); font-size: 1rem; line-height: 1.5; }

/* ---- the story, on the white page between the two bands ---- */
.lv-story { padding: 80px var(--space-5); background: var(--color-surface); }
.lv-story .lv-split-copy h2 { color: var(--color-primary); }

/* ---- closing ---- */
.lv-closing { padding: 80px var(--space-5); background: var(--color-text); color: #ffffff; }
.lv-closing-inner { max-width: 48rem; margin: 0 auto; text-align: center; }
.lv-closing-title { color: #ffffff; margin: 0 0 20px; font-size: 2rem;
  line-height: 1.2; font-weight: 700; }
.lv-closing-copy { margin: 0 0 var(--space-4); font-size: 1.0625rem; line-height: 1.6; }
.lv-closing-cta { margin: var(--space-6) 0 0; }
.lv-button-ghost { display: inline-block; padding: 16px 20px; border-radius: 999px;
  background: #ffffff; color: var(--color-text); text-decoration: none;
  font-family: var(--font-heading); font-size: 1rem; line-height: 1; font-weight: 700; }
.lv-button-ghost:hover { filter: brightness(.96); }

/* ---- the nested submenu in the header ---- */
.tg-sub-item { position: relative; }
.tg-sub-trigger { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  list-style: none; padding-block: var(--space-3); margin-block: calc(-1 * var(--space-3)); }
.tg-sub-trigger::-webkit-details-marker { display: none; }
.tg-sub[open] .tg-lang-caret { transform: rotate(-135deg); }
.tg-mast .tg-sub-panel { position: absolute; top: calc(100% + var(--space-5)); left: 0;
  min-width: 14rem; margin: 0; padding: var(--space-3); list-style: none;
  background: var(--color-surface); border-radius: .5rem;
  box-shadow: 0 2px 10px rgba(16, 38, 42, .14); }
.tg-mast .tg-sub-panel li { width: 100%; }
.tg-mast .tg-sub-panel a { display: block; border-radius: .375rem;
  padding: var(--space-2) var(--space-3); white-space: nowrap; }
.tg-mast .tg-sub-panel a:hover { background: var(--color-surface-soft); }

/* The logo keeps its own inks on this brand. `sections.css` inverts it to
   white for a sibling whose mark is a flat wordmark; Lovoo's carries red,
   yellow and blue, and the inversion flattens all three to white. */
.tg-mast-light .tg-mast-mark img { filter: none; }

/* Desktop shows the dropdown, the drawer shows the flat copy. */
.tg-sub-flat { display: none; }

/* Same breakpoint as the rest of the site, so it all changes shape at once. */
@media (max-width: 781px) {
  .lv-split { grid-template-columns: 1fr; gap: var(--space-6); }
  .lv-split-flip .lv-split-figure { order: 0; }
  .lv-features .lv-features-list { grid-template-columns: 1fr; }
  .lv-hero-inner { padding-top: 7rem; }
  /* In the drawer the children are listed flat under a heading, as the source
     has them -- not behind a trigger. The <details> is hidden rather than
     forced open, because a closed one cannot be opened from CSS at all. */
  .tg-sub-item .tg-sub { display: none; }
  .tg-sub-flat { display: block; }
  .tg-sub-flat-label { margin: 0 0 var(--space-3); font-weight: 700; }
  .tg-mast .tg-sub-flat-list { margin: 0; padding: 0 0 0 var(--space-5); list-style: none; }
  .tg-mast .tg-sub-flat-list li { margin-bottom: var(--space-3); }
}
/* === /page / === */

/* === page /de: its own styles (page_assemble.py; rewritten on every assemble of this page) === */
:root {
  --tg-grad-a: #00B8D4;
  --tg-grad-b: #1E88E5;
  --tg-grad-c: #7C4DFF;
}
/* ===== mast ===== */
/* The source site puts its nav in the page's content column, not across the
   full width: `.main-grid > * { grid-column: content }` with
   `--wp--style--global--content-size: 64rem`. That is why its logo and login
   sit close together rather than at the screen edges. Left and right at 0 with
   auto inline margins centres an absolutely positioned row. */
/* The shell exists so the page has one <header> landmark; it is not laid out
   and takes no space. The two rows inside it do the positioning. */
.tg-mast-shell { display: contents; }

/* Two rows, exactly as the source site has it: it ships TWO navs, one
   `position: absolute` holding the logo and the login control, and one
   `position: fixed` (`nav.navigation.main-navigation`) holding the menu. So
   the logo and login scroll away and only the menu stays. Both rows sit in
   the same 64rem centred column so they line up, and both are
   click-through with only their contents clickable, so the empty space
   either side does not swallow clicks on the page beneath. */
.tg-top { position: absolute; top: 0; left: 0; right: 0; z-index: 19;
  max-width: 64rem; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); padding: var(--space-6) var(--space-5);
  pointer-events: none; }
.tg-mast { position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  max-width: 64rem; margin-inline: auto;
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-5); padding: var(--space-6) var(--space-5);
  pointer-events: none; }
.tg-top > *, .tg-mast > * { pointer-events: auto; }
.tg-mast-mark { display: inline-flex; flex: 0 0 auto; }
.tg-mast-mark img { display: block; height: 34px; width: auto;
  filter: brightness(0) invert(1); }
/* also set inline on the element, so a stale or missing stylesheet never
   leaves a raw checkbox sitting in the header -- it did, once, during the
   six-minute stylesheet cache window after a push. */
.tg-mast-switch { position: absolute; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; }
.tg-mast-sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

.tg-mast-nav { flex: 0 1 auto; background: var(--color-surface);
  border-radius: .5rem; padding: var(--space-3) var(--space-6);
  box-shadow: 0 2px 10px rgba(16, 38, 42, .14); }
.tg-mast .tg-mast-list { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.tg-mast-list > li { position: relative; }
.tg-mast-nav a, .tg-lang-trigger { color: var(--color-text); text-decoration: none;
  font-family: var(--font-heading); font-size: .9375rem; font-weight: 600;
  white-space: nowrap; }
.tg-mast-nav a:hover, .tg-lang-trigger:hover { color: var(--color-primary); }
.tg-mast-nav a:focus-visible, .tg-lang-trigger:focus-visible {
  outline: 3px solid var(--color-primary); outline-offset: 4px; border-radius: 4px; }

/* The language switcher is a <details>: it opens on click and stays open,
   with no JavaScript and no reflow after load, because the markup is final
   when the page arrives. */
.tg-lang { position: relative; }
.tg-lang-trigger { display: inline-flex; align-items: center; gap: .4rem;
  padding-block: var(--space-3); margin-block: calc(-1 * var(--space-3));
  cursor: pointer; list-style: none; }
.tg-lang-trigger::-webkit-details-marker { display: none; }
.tg-lang-caret { width: .45rem; height: .45rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition-fast); }
.tg-lang[open] .tg-lang-caret { transform: translateY(2px) rotate(225deg); }

.tg-mast .tg-lang-panel { position: absolute; top: calc(100% + var(--space-5));
  left: 0; z-index: 30; display: flex; flex-direction: column; min-width: 13rem;
  margin: 0; padding: var(--space-3); list-style: none;
  background: var(--color-surface); border-radius: .5rem;
  box-shadow: 0 14px 34px rgba(16, 38, 42, .24); }
.tg-mast .tg-lang-panel li { width: 100%; }
.tg-mast .tg-lang-panel a { display: block; border-radius: .375rem;
  padding: var(--space-3) var(--space-5); font-weight: 500; }
.tg-mast .tg-lang-panel a:hover { background: var(--color-surface-soft); }
.tg-mast .tg-lang-current > a,
.tg-mast .tg-lang-current > a:hover { color: #ffffff; background: var(--color-primary); }

.tg-mast-login, .tg-mast-nav-login { flex: 0 0 auto; display: inline-block;
  padding: var(--space-3) var(--space-6); border-radius: var(--btn-radius);
  background: var(--color-surface); color: var(--color-text); text-decoration: none;
  font-family: var(--font-heading); font-size: .9375rem; font-weight: 700;
  box-shadow: 0 2px 10px rgba(16, 38, 42, .14);
  transition: background var(--transition-fast); }
.tg-mast-login:hover { background: var(--color-surface-soft); }
.tg-mast-login:focus-visible, .tg-mast-mark:focus-visible {
  outline: 3px solid #ffffff; outline-offset: 3px; }
.tg-mast-close, .tg-mast-login-row, .tg-lang-flat { display: none; }

/* the menu button, phones and small tablets only */
.tg-mast-button { display: none; }
/* The three bars are drawn INSIDE a 14px-tall box. Drawn as one bar plus two
   offset shadows, the box has the height of what it shows -- the earlier
   version made the element the middle bar and hung the other two outside it,
   so the button measured 2px tall and came out a squat 52x26 pill. */
.tg-mast-bars { position: relative; display: block; width: 20px; height: 14px;
  color: var(--color-text); }
.tg-mast-bars::before { content: ""; position: absolute; inset-inline: 0; top: 0;
  height: 2px; background: currentColor; border-radius: 2px;
  box-shadow: 0 6px 0 0 currentColor, 0 12px 0 0 currentColor; }

@media (max-width: 900px) {
  .tg-top, .tg-mast { padding: var(--space-5); }
  .tg-mast { justify-content: flex-end; }
  .tg-mast-mark img { height: 26px; }
  .tg-mast-login { display: none; }

  /* square, like the source site's, not a pill */
  .tg-mast-button { display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; padding: 0; border-radius: var(--btn-radius);
    background: var(--color-surface); color: var(--color-text); cursor: pointer;
    box-shadow: 0 2px 10px rgba(16, 38, 42, .14); }
  .tg-mast-switch:focus-visible ~ .tg-mast-button {
    outline: 3px solid #ffffff; outline-offset: 3px; }
  /* the panel takes the button's place, and carries its own close control */
  .tg-mast-switch:checked ~ .tg-mast-button { display: none; }

  /* A panel against the right edge rather than a full-width shelf, matching
     the source site. The languages are listed flat here, not behind the
     dropdown: a closed <details> cannot be forced open from CSS -- the browser
     hides its content itself -- so the drawer carries its own plain list. */
  .tg-mast-nav { position: absolute; top: var(--space-4); right: var(--space-5);
    left: auto; display: none; width: min(21rem, calc(100vw - 2 * var(--space-5)));
    max-height: calc(100vh - 2 * var(--space-5)); overflow-y: auto;
    padding: var(--space-5) var(--space-6) var(--space-6); border-radius: .5rem;
    box-shadow: 0 16px 40px rgba(16, 38, 42, .26); }
  .tg-mast-switch:checked ~ .tg-mast-nav { display: block; }

  .tg-mast-close { display: flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; margin-left: auto; margin-bottom: var(--space-2);
    cursor: pointer; color: var(--color-text); }
  .tg-mast-cross { position: relative; display: block; width: 18px; height: 18px; }
  .tg-mast-cross::before, .tg-mast-cross::after { content: ""; position: absolute;
    top: 50%; left: 0; width: 18px; height: 2px; background: currentColor;
    border-radius: 2px; }
  .tg-mast-cross::before { transform: rotate(45deg); }
  .tg-mast-cross::after { transform: rotate(-45deg); }

  .tg-mast .tg-mast-list { flex-direction: column; align-items: stretch; gap: 0; }
  .tg-mast-list > li { border-bottom: 1px solid var(--color-rule); }
  .tg-mast-list > li > a { display: block; padding: var(--space-4) 0;
    font-weight: 700; }
  .tg-mast-login-row { display: block; }
  /* the dropdown belongs to the wide header; the drawer lists the languages */
  .tg-lang-item { display: none; }

  .tg-lang-flat { display: block; padding-top: var(--space-5); }
  .tg-lang-flat-label { margin: 0 0 var(--space-3); color: var(--color-text);
    font-family: var(--font-heading); font-size: .8125rem; font-weight: 700; }
  .tg-mast .tg-lang-flat-list { margin: 0; padding: 0; list-style: none; }
  .tg-mast .tg-lang-flat-list a { display: block; border-radius: .375rem;
    padding: var(--space-3) var(--space-4); font-weight: 500;
    color: var(--color-text); text-decoration: none; }
  .tg-mast .tg-lang-flat-list a:hover { background: var(--color-surface-soft); }
  .tg-mast .tg-lang-flat-list .tg-lang-current > a,
  .tg-mast .tg-lang-flat-list .tg-lang-current > a:hover {
    color: #ffffff; background: var(--color-primary); }
}


/* ===== hero ===== */
.tg-hero { position: relative; display: grid; place-items: center; isolation: isolate;
  min-height: min(72vh, 42rem); overflow: hidden;
  padding: calc(var(--space-10) + 3rem) var(--space-5) var(--space-10); }
.tg-hero-shot { position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; }
.tg-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(16,38,42,.30) 0%, rgba(16,38,42,.22) 45%,
    rgba(16,38,42,.34) 100%); }
.tg-hero-inner { max-width: 58rem; margin: 0 auto; text-align: center; }
.tg-hero-title { margin: 0 0 var(--space-4); color: #ffffff; font-family: var(--font-heading);
  font-size: clamp(1.875rem, 1.15rem + 2.3vw, 2.75rem); line-height: 1.12;
  letter-spacing: calc(var(--heading-tracking) * 1em); font-weight: var(--weight-display);
  text-wrap: balance; text-shadow: 0 2px 14px rgba(16, 38, 42, .45); }
.tg-hero-sub { margin: 0 0 var(--space-7); color: #ffffff; font-family: var(--font-body);
  font-size: clamp(1rem, .95rem + 0.25vw, 1.125rem); line-height: 1.5; text-wrap: balance;
  text-shadow: 0 1px 10px rgba(16, 38, 42, .5); }
.tg-hero-cta { margin: 0; }
.tg-hero-button { display: inline-block; padding: 1.25rem 1.875rem;
  border-radius: var(--btn-radius); color: #ffffff; text-decoration: none;
  font-family: var(--font-heading); font-size: 1.5rem; line-height: 1;
  font-weight: var(--weight-display);
  background: linear-gradient(90deg, var(--tg-grad-a) 0%, var(--tg-grad-b) 55%, var(--tg-grad-c) 100%);
  box-shadow: 0 6px 20px rgba(16, 38, 42, .28);
  transition: filter var(--transition-fast); }
.tg-hero-button:hover { filter: brightness(1.08); }
.tg-hero-button:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

/* ===== points ===== */
.tg-points { padding: var(--space-10) var(--space-5); background: var(--color-bg); }
.tg-points .tg-points-list { max-width: var(--container-max); margin-inline: auto;
  margin-block: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8);
  justify-items: center; }
.tg-points-item { display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--space-4); }
.tg-points-icon { width: 96px; height: 96px; object-fit: contain; }
.tg-points-copy { margin: 0; max-width: 22rem; color: var(--color-primary);
  font-family: var(--font-heading); font-size: 1.0625rem; line-height: 1.4;
  font-weight: 700; }
@media (max-width: 860px) {
  .tg-points .tg-points-list { grid-template-columns: 1fr; gap: var(--space-7); }
}

/* ===== favourite ===== */
/* Every number here was measured off the source page rendered locally with its
   own theme.css injected (the saved link 404s because the filename carries the
   query string), at a 1280 viewport: band 1265x707 with 80px padding-block,
   content column 1024 (64rem, NOT the 1200 default), h2 32px with 0 0 20px,
   cards 232x450 with 20px/20px/40px padding and a 16px radius, pictures
   filling the card's inner width at their own ratio, h3 20px teal with 20px
   margins, copy 16px. The gradient string was already theirs verbatim -- the
   band's GEOMETRY was what made it read differently, since a 45deg gradient
   runs corner to corner. */
.tg-favourite { padding: 5rem var(--space-5);
  background: linear-gradient(45deg, var(--tg-grad-a) 0%, var(--tg-grad-b) 50%, var(--tg-grad-c) 100%); }
.tg-favourite-title { max-width: 64rem; margin: 38px auto 20px;
  text-align: center; color: #ffffff; font-family: var(--font-heading);
  font-size: 2rem; line-height: 1.2; letter-spacing: 0;
  font-weight: var(--weight-display); }
.tg-favourite .tg-favourite-cards { max-width: 64rem;
  margin-inline: auto; margin-block: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2em;
  align-items: stretch; }
.tg-favourite-card { height: 100%; display: flex; flex-direction: column;
  padding: 20px 20px 40px; background: var(--color-surface);
  border-radius: 1rem; box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .25); }
/* fills the card's inner width at the picture's own ratio -- never stretched,
   never cropped: no aspect-ratio and no object-fit anywhere near it */
.tg-favourite-shot { display: block; width: 100%; height: auto; margin: 0;
  border-radius: .5rem; }
.tg-favourite-heading { margin: 20px 0; color: var(--color-primary);
  font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.2;
  font-weight: var(--weight-display); }
.tg-favourite-copy { margin: 0; color: var(--color-text); font-family: var(--font-body);
  font-size: 1rem; line-height: 1.5; }
@media (max-width: 781px) { .tg-favourite .tg-favourite-cards { grid-template-columns: 1fr; } }

/* ===== foot ===== */
.tg-foot { padding: var(--space-9) var(--space-5) var(--space-6);
  background: var(--color-bg); border-top: 1px solid var(--color-rule); }
.tg-foot .tg-foot-inner { max-width: var(--container-max); margin-inline: auto;
  display: grid; grid-template-columns: minmax(12rem, 18rem) 1fr;
  gap: var(--space-8) var(--space-9); align-items: start; }
.tg-foot-brand { display: grid; gap: var(--space-5); justify-items: start; }
.tg-foot-mark img { display: block; width: 94px; height: auto; }
.tg-foot .tg-foot-apps, .tg-foot .tg-foot-social { display: flex; flex-wrap: wrap;
  gap: var(--space-3); margin: 0; padding: 0; list-style: none; align-items: center; }
.tg-foot-apps img { display: block; width: auto; height: 40px; }
.tg-foot-social a { display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; }
.tg-foot-social img { width: 1.75rem; height: auto; }

.tg-foot .tg-foot-menus { display: grid; grid-template-columns: 1fr 2fr;
  gap: var(--space-6); align-items: start; }
/* the source site lets its long legal menu flow into two columns rather than
   giving it its own grid track: `.menu:has(li:nth-child(6)) { columns: 2 }` */
.tg-foot .tg-foot-legal { columns: 2; column-gap: var(--space-6); }
.tg-foot .tg-foot-legal li { break-inside: avoid; }
.tg-foot .tg-foot-break { break-before: column; }
/* `footer ul li { min-height: 3rem }` on the source site */
.tg-foot .tg-foot-menus li { min-height: 3rem; }
.tg-foot .tg-foot-menus ul { margin: 0; padding: 0; list-style: none; }
.tg-foot .tg-foot-menus li { margin: 0; }
.tg-foot .tg-foot-menus a { display: inline-block; padding: var(--space-3) 0;
  color: var(--color-primary); text-decoration: none; font-family: var(--font-heading);
  font-size: .9375rem; font-weight: 700; text-wrap: pretty; }
.tg-foot .tg-foot-menus a:hover { text-decoration: underline; }
/* `footer .footer-menus a[href*="/cancellationandwithdrawal/"]` on the source
   site: white on the brand colour, its radius and card shadow. */
.tg-foot .tg-foot-menus a.tg-foot-filled { display: inline-block;
  margin: var(--space-2) 0; padding: var(--space-3) var(--space-4);
  border-radius: .5rem; color: #ffffff; background: var(--color-primary);
  box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .25); }
.tg-foot .tg-foot-menus a.tg-foot-filled:hover { color: #ffffff;
  text-decoration: none; filter: brightness(1.08); }
.tg-foot .tg-foot-menus a:focus-visible { outline: 3px solid var(--color-focus);
  outline-offset: 3px; border-radius: 4px; }

.tg-foot-copy { max-width: var(--container-max); margin: var(--space-7) auto 0;
  color: var(--color-text); font-family: var(--font-body); font-size: .6875rem;
  text-align: center; }

@media (max-width: 860px) {
  .tg-foot .tg-foot-inner { grid-template-columns: 1fr; justify-items: center;
    text-align: center; }
  .tg-foot-brand { justify-items: center; }
  .tg-foot .tg-foot-menus { grid-template-columns: 1fr; text-align: center; }
  .tg-foot .tg-foot-legal { columns: 1; }
  .tg-foot .tg-foot-break { break-before: auto; }
}
/* ===== lovoo body ===== */
/* Lovoo's homepage sections. The header, the footer and the furniture are the
   shared ones in sections.css; this file is only the middle.

   Colours are brand tokens throughout -- the source's --main-brand is
   #1565C0, --main-black #212121, --light-gray #f3f3f3, all of which this
   brand's stylesheet already defines, so another brand's palette carries
   through with nothing edited here. */

/* ---- hero ---- */
/* Every number measured off the source page rendered locally with its own
   theme stylesheet, not judged by eye: cover 1265x600 with min-height 600px
   and no padding of its own, content column 1024, h1 32px/38.4 weight 700
   white with 20px beneath, sub 16px/24, buttons 174x48 fully round. */
.lv-hero { position: relative; display: grid; place-items: center; isolation: isolate;
  min-height: 600px; overflow: hidden; }
.lv-hero-shot { position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; }
/* The source's overlay is NOT a gradient and not black: it is a flat warm grey
   at half opacity (`has-background-dim`, rgb(137,133,135) at .5), which lifts
   and desaturates the photograph. A black scrim reads far darker and more
   saturated, which is what ours did. */
.lv-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgb(137, 133, 135); opacity: .5; }
.lv-hero-inner { max-width: 64rem; margin: 0 auto; padding: 6rem var(--space-5) 4rem;
  text-align: center; color: #ffffff; }
.lv-hero-title { color: #ffffff; margin: 0 0 20px; font-size: 2rem; line-height: 1.2;
  font-weight: 700; }
.lv-hero-sub { margin: 0 0 20px; font-size: 1rem; line-height: 1.5; }

/* Two store buttons, not one join control: that is how the source sends
   people to the app. `ul[class]` in the brand stylesheet is (0,1,1) and beats
   a lone class, so the centring is written as a descendant. */
.lv-hero .lv-hero-stores { display: flex; flex-wrap: wrap; justify-content: center;
  gap: 24px; margin: 0; padding: 0; list-style: none; }
.lv-hero-store { display: inline-block; padding: 16px 20px; border-radius: 999px;
  background: var(--color-primary); color: #ffffff; text-decoration: none;
  font-family: var(--font-heading); font-size: 1rem; line-height: 1; font-weight: 700; }
.lv-hero-store:hover { filter: brightness(1.08); }
.lv-hero-store:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

/* ---- picture beside text ---- */
.lv-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: var(--space-8); max-width: 64rem; margin: 0 auto; }
.lv-split-flip .lv-split-figure { order: 2; }
.lv-split-shot { width: 100%; height: auto; border-radius: 1rem; }
.lv-split-copy h2 { margin: 0 0 var(--space-5); font-size: 2rem; line-height: 1.15; }
.lv-split-copy p { margin: 0 0 var(--space-4); font-size: 1rem; line-height: 1.6; }
.lv-split-cta { margin-top: var(--space-6); }
.lv-button { display: inline-block; padding: 16px 20px; border-radius: 999px;
  background: var(--color-primary); color: #ffffff; text-decoration: none;
  font-family: var(--font-heading); font-size: 1rem; line-height: 1; font-weight: 700; }
.lv-button:hover { filter: brightness(1.08); }

.lv-pitch { padding: 5rem var(--space-5); background: var(--color-surface); }
.lv-pitch .lv-split-copy h2 { color: var(--color-primary); }

/* ---- the feature band ---- */
/* Measured off the source: the band is `--main-black` rgb(33,33,33) with
   80px above and below, and it holds ONLY the feature cards. The story that
   follows is on the white page, not in the band -- reading it as part of the
   band is what made ours run dark through both. */
.lv-features { padding: 80px var(--space-5); background: var(--color-text); }
.lv-features-title { color: #ffffff; max-width: 64rem; margin: 0 auto 40px;
  font-size: 2rem; line-height: 1.2; font-weight: 700; text-align: center; }
.lv-features .lv-features-list { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; max-width: 64rem; margin: 0 auto; padding: 0; list-style: none; }
/* Each card is a WHITE box standing on the dark band -- radius 24px, the
   theme's own card shadow, and its heading in the brand blue. Ours had the
   text bare on the band, which is the difference the partner spotted. */
.lv-feature { display: flex; flex-direction: column; height: 100%;
  padding: 20px 20px 40px; border-radius: 24px; background: var(--color-surface);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .25); text-align: center; }
/* The screenshots keep their own ratio. No aspect-ratio and no object-fit
   anywhere near them -- forcing a ratio on portraits squashes them and crops
   heads off, which is exactly how this went wrong on a sibling brand. */
.lv-feature-shot { display: block; width: 100%; height: auto; margin: 0 auto 20px;
  border-radius: 8px; }
.lv-feature-heading { color: var(--color-primary); margin: 0 0 20px;
  font-size: 1.25rem; line-height: 1.25; font-weight: 700; }
.lv-feature-copy { margin: 0; color: var(--color-text); font-size: 1rem; line-height: 1.5; }

/* ---- the story, on the white page between the two bands ---- */
.lv-story { padding: 80px var(--space-5); background: var(--color-surface); }
.lv-story .lv-split-copy h2 { color: var(--color-primary); }

/* ---- closing ---- */
.lv-closing { padding: 80px var(--space-5); background: var(--color-text); color: #ffffff; }
.lv-closing-inner { max-width: 48rem; margin: 0 auto; text-align: center; }
.lv-closing-title { color: #ffffff; margin: 0 0 20px; font-size: 2rem;
  line-height: 1.2; font-weight: 700; }
.lv-closing-copy { margin: 0 0 var(--space-4); font-size: 1.0625rem; line-height: 1.6; }
.lv-closing-cta { margin: var(--space-6) 0 0; }
.lv-button-ghost { display: inline-block; padding: 16px 20px; border-radius: 999px;
  background: #ffffff; color: var(--color-text); text-decoration: none;
  font-family: var(--font-heading); font-size: 1rem; line-height: 1; font-weight: 700; }
.lv-button-ghost:hover { filter: brightness(.96); }

/* ---- the nested submenu in the header ---- */
.tg-sub-item { position: relative; }
.tg-sub-trigger { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  list-style: none; padding-block: var(--space-3); margin-block: calc(-1 * var(--space-3)); }
.tg-sub-trigger::-webkit-details-marker { display: none; }
.tg-sub[open] .tg-lang-caret { transform: rotate(-135deg); }
.tg-mast .tg-sub-panel { position: absolute; top: calc(100% + var(--space-5)); left: 0;
  min-width: 14rem; margin: 0; padding: var(--space-3); list-style: none;
  background: var(--color-surface); border-radius: .5rem;
  box-shadow: 0 2px 10px rgba(16, 38, 42, .14); }
.tg-mast .tg-sub-panel li { width: 100%; }
.tg-mast .tg-sub-panel a { display: block; border-radius: .375rem;
  padding: var(--space-2) var(--space-3); white-space: nowrap; }
.tg-mast .tg-sub-panel a:hover { background: var(--color-surface-soft); }

/* The logo keeps its own inks on this brand. `sections.css` inverts it to
   white for a sibling whose mark is a flat wordmark; Lovoo's carries red,
   yellow and blue, and the inversion flattens all three to white. */
.tg-mast-light .tg-mast-mark img { filter: none; }

/* Desktop shows the dropdown, the drawer shows the flat copy. */
.tg-sub-flat { display: none; }

/* Same breakpoint as the rest of the site, so it all changes shape at once. */
@media (max-width: 781px) {
  .lv-split { grid-template-columns: 1fr; gap: var(--space-6); }
  .lv-split-flip .lv-split-figure { order: 0; }
  .lv-features .lv-features-list { grid-template-columns: 1fr; }
  .lv-hero-inner { padding-top: 7rem; }
  /* In the drawer the children are listed flat under a heading, as the source
     has them -- not behind a trigger. The <details> is hidden rather than
     forced open, because a closed one cannot be opened from CSS at all. */
  .tg-sub-item .tg-sub { display: none; }
  .tg-sub-flat { display: block; }
  .tg-sub-flat-label { margin: 0 0 var(--space-3); font-weight: 700; }
  .tg-mast .tg-sub-flat-list { margin: 0; padding: 0 0 0 var(--space-5); list-style: none; }
  .tg-mast .tg-sub-flat-list li { margin-bottom: var(--space-3); }
}
/* === /page /de === */

/* === page /es: its own styles (page_assemble.py; rewritten on every assemble of this page) === */
:root {
  --tg-grad-a: #00B8D4;
  --tg-grad-b: #1E88E5;
  --tg-grad-c: #7C4DFF;
}
/* ===== mast ===== */
/* The source site puts its nav in the page's content column, not across the
   full width: `.main-grid > * { grid-column: content }` with
   `--wp--style--global--content-size: 64rem`. That is why its logo and login
   sit close together rather than at the screen edges. Left and right at 0 with
   auto inline margins centres an absolutely positioned row. */
/* The shell exists so the page has one <header> landmark; it is not laid out
   and takes no space. The two rows inside it do the positioning. */
.tg-mast-shell { display: contents; }

/* Two rows, exactly as the source site has it: it ships TWO navs, one
   `position: absolute` holding the logo and the login control, and one
   `position: fixed` (`nav.navigation.main-navigation`) holding the menu. So
   the logo and login scroll away and only the menu stays. Both rows sit in
   the same 64rem centred column so they line up, and both are
   click-through with only their contents clickable, so the empty space
   either side does not swallow clicks on the page beneath. */
.tg-top { position: absolute; top: 0; left: 0; right: 0; z-index: 19;
  max-width: 64rem; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); padding: var(--space-6) var(--space-5);
  pointer-events: none; }
.tg-mast { position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  max-width: 64rem; margin-inline: auto;
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-5); padding: var(--space-6) var(--space-5);
  pointer-events: none; }
.tg-top > *, .tg-mast > * { pointer-events: auto; }
.tg-mast-mark { display: inline-flex; flex: 0 0 auto; }
.tg-mast-mark img { display: block; height: 34px; width: auto;
  filter: brightness(0) invert(1); }
/* also set inline on the element, so a stale or missing stylesheet never
   leaves a raw checkbox sitting in the header -- it did, once, during the
   six-minute stylesheet cache window after a push. */
.tg-mast-switch { position: absolute; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; }
.tg-mast-sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

.tg-mast-nav { flex: 0 1 auto; background: var(--color-surface);
  border-radius: .5rem; padding: var(--space-3) var(--space-6);
  box-shadow: 0 2px 10px rgba(16, 38, 42, .14); }
.tg-mast .tg-mast-list { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.tg-mast-list > li { position: relative; }
.tg-mast-nav a, .tg-lang-trigger { color: var(--color-text); text-decoration: none;
  font-family: var(--font-heading); font-size: .9375rem; font-weight: 600;
  white-space: nowrap; }
.tg-mast-nav a:hover, .tg-lang-trigger:hover { color: var(--color-primary); }
.tg-mast-nav a:focus-visible, .tg-lang-trigger:focus-visible {
  outline: 3px solid var(--color-primary); outline-offset: 4px; border-radius: 4px; }

/* The language switcher is a <details>: it opens on click and stays open,
   with no JavaScript and no reflow after load, because the markup is final
   when the page arrives. */
.tg-lang { position: relative; }
.tg-lang-trigger { display: inline-flex; align-items: center; gap: .4rem;
  padding-block: var(--space-3); margin-block: calc(-1 * var(--space-3));
  cursor: pointer; list-style: none; }
.tg-lang-trigger::-webkit-details-marker { display: none; }
.tg-lang-caret { width: .45rem; height: .45rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition-fast); }
.tg-lang[open] .tg-lang-caret { transform: translateY(2px) rotate(225deg); }

.tg-mast .tg-lang-panel { position: absolute; top: calc(100% + var(--space-5));
  left: 0; z-index: 30; display: flex; flex-direction: column; min-width: 13rem;
  margin: 0; padding: var(--space-3); list-style: none;
  background: var(--color-surface); border-radius: .5rem;
  box-shadow: 0 14px 34px rgba(16, 38, 42, .24); }
.tg-mast .tg-lang-panel li { width: 100%; }
.tg-mast .tg-lang-panel a { display: block; border-radius: .375rem;
  padding: var(--space-3) var(--space-5); font-weight: 500; }
.tg-mast .tg-lang-panel a:hover { background: var(--color-surface-soft); }
.tg-mast .tg-lang-current > a,
.tg-mast .tg-lang-current > a:hover { color: #ffffff; background: var(--color-primary); }

.tg-mast-login, .tg-mast-nav-login { flex: 0 0 auto; display: inline-block;
  padding: var(--space-3) var(--space-6); border-radius: var(--btn-radius);
  background: var(--color-surface); color: var(--color-text); text-decoration: none;
  font-family: var(--font-heading); font-size: .9375rem; font-weight: 700;
  box-shadow: 0 2px 10px rgba(16, 38, 42, .14);
  transition: background var(--transition-fast); }
.tg-mast-login:hover { background: var(--color-surface-soft); }
.tg-mast-login:focus-visible, .tg-mast-mark:focus-visible {
  outline: 3px solid #ffffff; outline-offset: 3px; }
.tg-mast-close, .tg-mast-login-row, .tg-lang-flat { display: none; }

/* the menu button, phones and small tablets only */
.tg-mast-button { display: none; }
/* The three bars are drawn INSIDE a 14px-tall box. Drawn as one bar plus two
   offset shadows, the box has the height of what it shows -- the earlier
   version made the element the middle bar and hung the other two outside it,
   so the button measured 2px tall and came out a squat 52x26 pill. */
.tg-mast-bars { position: relative; display: block; width: 20px; height: 14px;
  color: var(--color-text); }
.tg-mast-bars::before { content: ""; position: absolute; inset-inline: 0; top: 0;
  height: 2px; background: currentColor; border-radius: 2px;
  box-shadow: 0 6px 0 0 currentColor, 0 12px 0 0 currentColor; }

@media (max-width: 900px) {
  .tg-top, .tg-mast { padding: var(--space-5); }
  .tg-mast { justify-content: flex-end; }
  .tg-mast-mark img { height: 26px; }
  .tg-mast-login { display: none; }

  /* square, like the source site's, not a pill */
  .tg-mast-button { display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; padding: 0; border-radius: var(--btn-radius);
    background: var(--color-surface); color: var(--color-text); cursor: pointer;
    box-shadow: 0 2px 10px rgba(16, 38, 42, .14); }
  .tg-mast-switch:focus-visible ~ .tg-mast-button {
    outline: 3px solid #ffffff; outline-offset: 3px; }
  /* the panel takes the button's place, and carries its own close control */
  .tg-mast-switch:checked ~ .tg-mast-button { display: none; }

  /* A panel against the right edge rather than a full-width shelf, matching
     the source site. The languages are listed flat here, not behind the
     dropdown: a closed <details> cannot be forced open from CSS -- the browser
     hides its content itself -- so the drawer carries its own plain list. */
  .tg-mast-nav { position: absolute; top: var(--space-4); right: var(--space-5);
    left: auto; display: none; width: min(21rem, calc(100vw - 2 * var(--space-5)));
    max-height: calc(100vh - 2 * var(--space-5)); overflow-y: auto;
    padding: var(--space-5) var(--space-6) var(--space-6); border-radius: .5rem;
    box-shadow: 0 16px 40px rgba(16, 38, 42, .26); }
  .tg-mast-switch:checked ~ .tg-mast-nav { display: block; }

  .tg-mast-close { display: flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; margin-left: auto; margin-bottom: var(--space-2);
    cursor: pointer; color: var(--color-text); }
  .tg-mast-cross { position: relative; display: block; width: 18px; height: 18px; }
  .tg-mast-cross::before, .tg-mast-cross::after { content: ""; position: absolute;
    top: 50%; left: 0; width: 18px; height: 2px; background: currentColor;
    border-radius: 2px; }
  .tg-mast-cross::before { transform: rotate(45deg); }
  .tg-mast-cross::after { transform: rotate(-45deg); }

  .tg-mast .tg-mast-list { flex-direction: column; align-items: stretch; gap: 0; }
  .tg-mast-list > li { border-bottom: 1px solid var(--color-rule); }
  .tg-mast-list > li > a { display: block; padding: var(--space-4) 0;
    font-weight: 700; }
  .tg-mast-login-row { display: block; }
  /* the dropdown belongs to the wide header; the drawer lists the languages */
  .tg-lang-item { display: none; }

  .tg-lang-flat { display: block; padding-top: var(--space-5); }
  .tg-lang-flat-label { margin: 0 0 var(--space-3); color: var(--color-text);
    font-family: var(--font-heading); font-size: .8125rem; font-weight: 700; }
  .tg-mast .tg-lang-flat-list { margin: 0; padding: 0; list-style: none; }
  .tg-mast .tg-lang-flat-list a { display: block; border-radius: .375rem;
    padding: var(--space-3) var(--space-4); font-weight: 500;
    color: var(--color-text); text-decoration: none; }
  .tg-mast .tg-lang-flat-list a:hover { background: var(--color-surface-soft); }
  .tg-mast .tg-lang-flat-list .tg-lang-current > a,
  .tg-mast .tg-lang-flat-list .tg-lang-current > a:hover {
    color: #ffffff; background: var(--color-primary); }
}


/* ===== hero ===== */
.tg-hero { position: relative; display: grid; place-items: center; isolation: isolate;
  min-height: min(72vh, 42rem); overflow: hidden;
  padding: calc(var(--space-10) + 3rem) var(--space-5) var(--space-10); }
.tg-hero-shot { position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; }
.tg-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(16,38,42,.30) 0%, rgba(16,38,42,.22) 45%,
    rgba(16,38,42,.34) 100%); }
.tg-hero-inner { max-width: 58rem; margin: 0 auto; text-align: center; }
.tg-hero-title { margin: 0 0 var(--space-4); color: #ffffff; font-family: var(--font-heading);
  font-size: clamp(1.875rem, 1.15rem + 2.3vw, 2.75rem); line-height: 1.12;
  letter-spacing: calc(var(--heading-tracking) * 1em); font-weight: var(--weight-display);
  text-wrap: balance; text-shadow: 0 2px 14px rgba(16, 38, 42, .45); }
.tg-hero-sub { margin: 0 0 var(--space-7); color: #ffffff; font-family: var(--font-body);
  font-size: clamp(1rem, .95rem + 0.25vw, 1.125rem); line-height: 1.5; text-wrap: balance;
  text-shadow: 0 1px 10px rgba(16, 38, 42, .5); }
.tg-hero-cta { margin: 0; }
.tg-hero-button { display: inline-block; padding: 1.25rem 1.875rem;
  border-radius: var(--btn-radius); color: #ffffff; text-decoration: none;
  font-family: var(--font-heading); font-size: 1.5rem; line-height: 1;
  font-weight: var(--weight-display);
  background: linear-gradient(90deg, var(--tg-grad-a) 0%, var(--tg-grad-b) 55%, var(--tg-grad-c) 100%);
  box-shadow: 0 6px 20px rgba(16, 38, 42, .28);
  transition: filter var(--transition-fast); }
.tg-hero-button:hover { filter: brightness(1.08); }
.tg-hero-button:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

/* ===== points ===== */
.tg-points { padding: var(--space-10) var(--space-5); background: var(--color-bg); }
.tg-points .tg-points-list { max-width: var(--container-max); margin-inline: auto;
  margin-block: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8);
  justify-items: center; }
.tg-points-item { display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--space-4); }
.tg-points-icon { width: 96px; height: 96px; object-fit: contain; }
.tg-points-copy { margin: 0; max-width: 22rem; color: var(--color-primary);
  font-family: var(--font-heading); font-size: 1.0625rem; line-height: 1.4;
  font-weight: 700; }
@media (max-width: 860px) {
  .tg-points .tg-points-list { grid-template-columns: 1fr; gap: var(--space-7); }
}

/* ===== favourite ===== */
/* Every number here was measured off the source page rendered locally with its
   own theme.css injected (the saved link 404s because the filename carries the
   query string), at a 1280 viewport: band 1265x707 with 80px padding-block,
   content column 1024 (64rem, NOT the 1200 default), h2 32px with 0 0 20px,
   cards 232x450 with 20px/20px/40px padding and a 16px radius, pictures
   filling the card's inner width at their own ratio, h3 20px teal with 20px
   margins, copy 16px. The gradient string was already theirs verbatim -- the
   band's GEOMETRY was what made it read differently, since a 45deg gradient
   runs corner to corner. */
.tg-favourite { padding: 5rem var(--space-5);
  background: linear-gradient(45deg, var(--tg-grad-a) 0%, var(--tg-grad-b) 50%, var(--tg-grad-c) 100%); }
.tg-favourite-title { max-width: 64rem; margin: 38px auto 20px;
  text-align: center; color: #ffffff; font-family: var(--font-heading);
  font-size: 2rem; line-height: 1.2; letter-spacing: 0;
  font-weight: var(--weight-display); }
.tg-favourite .tg-favourite-cards { max-width: 64rem;
  margin-inline: auto; margin-block: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2em;
  align-items: stretch; }
.tg-favourite-card { height: 100%; display: flex; flex-direction: column;
  padding: 20px 20px 40px; background: var(--color-surface);
  border-radius: 1rem; box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .25); }
/* fills the card's inner width at the picture's own ratio -- never stretched,
   never cropped: no aspect-ratio and no object-fit anywhere near it */
.tg-favourite-shot { display: block; width: 100%; height: auto; margin: 0;
  border-radius: .5rem; }
.tg-favourite-heading { margin: 20px 0; color: var(--color-primary);
  font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.2;
  font-weight: var(--weight-display); }
.tg-favourite-copy { margin: 0; color: var(--color-text); font-family: var(--font-body);
  font-size: 1rem; line-height: 1.5; }
@media (max-width: 781px) { .tg-favourite .tg-favourite-cards { grid-template-columns: 1fr; } }

/* ===== foot ===== */
.tg-foot { padding: var(--space-9) var(--space-5) var(--space-6);
  background: var(--color-bg); border-top: 1px solid var(--color-rule); }
.tg-foot .tg-foot-inner { max-width: var(--container-max); margin-inline: auto;
  display: grid; grid-template-columns: minmax(12rem, 18rem) 1fr;
  gap: var(--space-8) var(--space-9); align-items: start; }
.tg-foot-brand { display: grid; gap: var(--space-5); justify-items: start; }
.tg-foot-mark img { display: block; width: 94px; height: auto; }
.tg-foot .tg-foot-apps, .tg-foot .tg-foot-social { display: flex; flex-wrap: wrap;
  gap: var(--space-3); margin: 0; padding: 0; list-style: none; align-items: center; }
.tg-foot-apps img { display: block; width: auto; height: 40px; }
.tg-foot-social a { display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; }
.tg-foot-social img { width: 1.75rem; height: auto; }

.tg-foot .tg-foot-menus { display: grid; grid-template-columns: 1fr 2fr;
  gap: var(--space-6); align-items: start; }
/* the source site lets its long legal menu flow into two columns rather than
   giving it its own grid track: `.menu:has(li:nth-child(6)) { columns: 2 }` */
.tg-foot .tg-foot-legal { columns: 2; column-gap: var(--space-6); }
.tg-foot .tg-foot-legal li { break-inside: avoid; }
.tg-foot .tg-foot-break { break-before: column; }
/* `footer ul li { min-height: 3rem }` on the source site */
.tg-foot .tg-foot-menus li { min-height: 3rem; }
.tg-foot .tg-foot-menus ul { margin: 0; padding: 0; list-style: none; }
.tg-foot .tg-foot-menus li { margin: 0; }
.tg-foot .tg-foot-menus a { display: inline-block; padding: var(--space-3) 0;
  color: var(--color-primary); text-decoration: none; font-family: var(--font-heading);
  font-size: .9375rem; font-weight: 700; text-wrap: pretty; }
.tg-foot .tg-foot-menus a:hover { text-decoration: underline; }
/* `footer .footer-menus a[href*="/cancellationandwithdrawal/"]` on the source
   site: white on the brand colour, its radius and card shadow. */
.tg-foot .tg-foot-menus a.tg-foot-filled { display: inline-block;
  margin: var(--space-2) 0; padding: var(--space-3) var(--space-4);
  border-radius: .5rem; color: #ffffff; background: var(--color-primary);
  box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .25); }
.tg-foot .tg-foot-menus a.tg-foot-filled:hover { color: #ffffff;
  text-decoration: none; filter: brightness(1.08); }
.tg-foot .tg-foot-menus a:focus-visible { outline: 3px solid var(--color-focus);
  outline-offset: 3px; border-radius: 4px; }

.tg-foot-copy { max-width: var(--container-max); margin: var(--space-7) auto 0;
  color: var(--color-text); font-family: var(--font-body); font-size: .6875rem;
  text-align: center; }

@media (max-width: 860px) {
  .tg-foot .tg-foot-inner { grid-template-columns: 1fr; justify-items: center;
    text-align: center; }
  .tg-foot-brand { justify-items: center; }
  .tg-foot .tg-foot-menus { grid-template-columns: 1fr; text-align: center; }
  .tg-foot .tg-foot-legal { columns: 1; }
  .tg-foot .tg-foot-break { break-before: auto; }
}
/* ===== lovoo body ===== */
/* Lovoo's homepage sections. The header, the footer and the furniture are the
   shared ones in sections.css; this file is only the middle.

   Colours are brand tokens throughout -- the source's --main-brand is
   #1565C0, --main-black #212121, --light-gray #f3f3f3, all of which this
   brand's stylesheet already defines, so another brand's palette carries
   through with nothing edited here. */

/* ---- hero ---- */
/* Every number measured off the source page rendered locally with its own
   theme stylesheet, not judged by eye: cover 1265x600 with min-height 600px
   and no padding of its own, content column 1024, h1 32px/38.4 weight 700
   white with 20px beneath, sub 16px/24, buttons 174x48 fully round. */
.lv-hero { position: relative; display: grid; place-items: center; isolation: isolate;
  min-height: 600px; overflow: hidden; }
.lv-hero-shot { position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; }
/* The source's overlay is NOT a gradient and not black: it is a flat warm grey
   at half opacity (`has-background-dim`, rgb(137,133,135) at .5), which lifts
   and desaturates the photograph. A black scrim reads far darker and more
   saturated, which is what ours did. */
.lv-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgb(137, 133, 135); opacity: .5; }
.lv-hero-inner { max-width: 64rem; margin: 0 auto; padding: 6rem var(--space-5) 4rem;
  text-align: center; color: #ffffff; }
.lv-hero-title { color: #ffffff; margin: 0 0 20px; font-size: 2rem; line-height: 1.2;
  font-weight: 700; }
.lv-hero-sub { margin: 0 0 20px; font-size: 1rem; line-height: 1.5; }

/* Two store buttons, not one join control: that is how the source sends
   people to the app. `ul[class]` in the brand stylesheet is (0,1,1) and beats
   a lone class, so the centring is written as a descendant. */
.lv-hero .lv-hero-stores { display: flex; flex-wrap: wrap; justify-content: center;
  gap: 24px; margin: 0; padding: 0; list-style: none; }
.lv-hero-store { display: inline-block; padding: 16px 20px; border-radius: 999px;
  background: var(--color-primary); color: #ffffff; text-decoration: none;
  font-family: var(--font-heading); font-size: 1rem; line-height: 1; font-weight: 700; }
.lv-hero-store:hover { filter: brightness(1.08); }
.lv-hero-store:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

/* ---- picture beside text ---- */
.lv-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: var(--space-8); max-width: 64rem; margin: 0 auto; }
.lv-split-flip .lv-split-figure { order: 2; }
.lv-split-shot { width: 100%; height: auto; border-radius: 1rem; }
.lv-split-copy h2 { margin: 0 0 var(--space-5); font-size: 2rem; line-height: 1.15; }
.lv-split-copy p { margin: 0 0 var(--space-4); font-size: 1rem; line-height: 1.6; }
.lv-split-cta { margin-top: var(--space-6); }
.lv-button { display: inline-block; padding: 16px 20px; border-radius: 999px;
  background: var(--color-primary); color: #ffffff; text-decoration: none;
  font-family: var(--font-heading); font-size: 1rem; line-height: 1; font-weight: 700; }
.lv-button:hover { filter: brightness(1.08); }

.lv-pitch { padding: 5rem var(--space-5); background: var(--color-surface); }
.lv-pitch .lv-split-copy h2 { color: var(--color-primary); }

/* ---- the feature band ---- */
/* Measured off the source: the band is `--main-black` rgb(33,33,33) with
   80px above and below, and it holds ONLY the feature cards. The story that
   follows is on the white page, not in the band -- reading it as part of the
   band is what made ours run dark through both. */
.lv-features { padding: 80px var(--space-5); background: var(--color-text); }
.lv-features-title { color: #ffffff; max-width: 64rem; margin: 0 auto 40px;
  font-size: 2rem; line-height: 1.2; font-weight: 700; text-align: center; }
.lv-features .lv-features-list { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; max-width: 64rem; margin: 0 auto; padding: 0; list-style: none; }
/* Each card is a WHITE box standing on the dark band -- radius 24px, the
   theme's own card shadow, and its heading in the brand blue. Ours had the
   text bare on the band, which is the difference the partner spotted. */
.lv-feature { display: flex; flex-direction: column; height: 100%;
  padding: 20px 20px 40px; border-radius: 24px; background: var(--color-surface);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .25); text-align: center; }
/* The screenshots keep their own ratio. No aspect-ratio and no object-fit
   anywhere near them -- forcing a ratio on portraits squashes them and crops
   heads off, which is exactly how this went wrong on a sibling brand. */
.lv-feature-shot { display: block; width: 100%; height: auto; margin: 0 auto 20px;
  border-radius: 8px; }
.lv-feature-heading { color: var(--color-primary); margin: 0 0 20px;
  font-size: 1.25rem; line-height: 1.25; font-weight: 700; }
.lv-feature-copy { margin: 0; color: var(--color-text); font-size: 1rem; line-height: 1.5; }

/* ---- the story, on the white page between the two bands ---- */
.lv-story { padding: 80px var(--space-5); background: var(--color-surface); }
.lv-story .lv-split-copy h2 { color: var(--color-primary); }

/* ---- closing ---- */
.lv-closing { padding: 80px var(--space-5); background: var(--color-text); color: #ffffff; }
.lv-closing-inner { max-width: 48rem; margin: 0 auto; text-align: center; }
.lv-closing-title { color: #ffffff; margin: 0 0 20px; font-size: 2rem;
  line-height: 1.2; font-weight: 700; }
.lv-closing-copy { margin: 0 0 var(--space-4); font-size: 1.0625rem; line-height: 1.6; }
.lv-closing-cta { margin: var(--space-6) 0 0; }
.lv-button-ghost { display: inline-block; padding: 16px 20px; border-radius: 999px;
  background: #ffffff; color: var(--color-text); text-decoration: none;
  font-family: var(--font-heading); font-size: 1rem; line-height: 1; font-weight: 700; }
.lv-button-ghost:hover { filter: brightness(.96); }

/* ---- the nested submenu in the header ---- */
.tg-sub-item { position: relative; }
.tg-sub-trigger { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  list-style: none; padding-block: var(--space-3); margin-block: calc(-1 * var(--space-3)); }
.tg-sub-trigger::-webkit-details-marker { display: none; }
.tg-sub[open] .tg-lang-caret { transform: rotate(-135deg); }
.tg-mast .tg-sub-panel { position: absolute; top: calc(100% + var(--space-5)); left: 0;
  min-width: 14rem; margin: 0; padding: var(--space-3); list-style: none;
  background: var(--color-surface); border-radius: .5rem;
  box-shadow: 0 2px 10px rgba(16, 38, 42, .14); }
.tg-mast .tg-sub-panel li { width: 100%; }
.tg-mast .tg-sub-panel a { display: block; border-radius: .375rem;
  padding: var(--space-2) var(--space-3); white-space: nowrap; }
.tg-mast .tg-sub-panel a:hover { background: var(--color-surface-soft); }

/* The logo keeps its own inks on this brand. `sections.css` inverts it to
   white for a sibling whose mark is a flat wordmark; Lovoo's carries red,
   yellow and blue, and the inversion flattens all three to white. */
.tg-mast-light .tg-mast-mark img { filter: none; }

/* Desktop shows the dropdown, the drawer shows the flat copy. */
.tg-sub-flat { display: none; }

/* Same breakpoint as the rest of the site, so it all changes shape at once. */
@media (max-width: 781px) {
  .lv-split { grid-template-columns: 1fr; gap: var(--space-6); }
  .lv-split-flip .lv-split-figure { order: 0; }
  .lv-features .lv-features-list { grid-template-columns: 1fr; }
  .lv-hero-inner { padding-top: 7rem; }
  /* In the drawer the children are listed flat under a heading, as the source
     has them -- not behind a trigger. The <details> is hidden rather than
     forced open, because a closed one cannot be opened from CSS at all. */
  .tg-sub-item .tg-sub { display: none; }
  .tg-sub-flat { display: block; }
  .tg-sub-flat-label { margin: 0 0 var(--space-3); font-weight: 700; }
  .tg-mast .tg-sub-flat-list { margin: 0; padding: 0 0 0 var(--space-5); list-style: none; }
  .tg-mast .tg-sub-flat-list li { margin-bottom: var(--space-3); }
}
/* === /page /es === */

/* === page /nl: its own styles (page_assemble.py; rewritten on every assemble of this page) === */
:root {
  --tg-grad-a: #00B8D4;
  --tg-grad-b: #1E88E5;
  --tg-grad-c: #7C4DFF;
}
/* ===== mast ===== */
/* The source site puts its nav in the page's content column, not across the
   full width: `.main-grid > * { grid-column: content }` with
   `--wp--style--global--content-size: 64rem`. That is why its logo and login
   sit close together rather than at the screen edges. Left and right at 0 with
   auto inline margins centres an absolutely positioned row. */
/* The shell exists so the page has one <header> landmark; it is not laid out
   and takes no space. The two rows inside it do the positioning. */
.tg-mast-shell { display: contents; }

/* Two rows, exactly as the source site has it: it ships TWO navs, one
   `position: absolute` holding the logo and the login control, and one
   `position: fixed` (`nav.navigation.main-navigation`) holding the menu. So
   the logo and login scroll away and only the menu stays. Both rows sit in
   the same 64rem centred column so they line up, and both are
   click-through with only their contents clickable, so the empty space
   either side does not swallow clicks on the page beneath. */
.tg-top { position: absolute; top: 0; left: 0; right: 0; z-index: 19;
  max-width: 64rem; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); padding: var(--space-6) var(--space-5);
  pointer-events: none; }
.tg-mast { position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  max-width: 64rem; margin-inline: auto;
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-5); padding: var(--space-6) var(--space-5);
  pointer-events: none; }
.tg-top > *, .tg-mast > * { pointer-events: auto; }
.tg-mast-mark { display: inline-flex; flex: 0 0 auto; }
.tg-mast-mark img { display: block; height: 34px; width: auto;
  filter: brightness(0) invert(1); }
/* also set inline on the element, so a stale or missing stylesheet never
   leaves a raw checkbox sitting in the header -- it did, once, during the
   six-minute stylesheet cache window after a push. */
.tg-mast-switch { position: absolute; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; }
.tg-mast-sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

.tg-mast-nav { flex: 0 1 auto; background: var(--color-surface);
  border-radius: .5rem; padding: var(--space-3) var(--space-6);
  box-shadow: 0 2px 10px rgba(16, 38, 42, .14); }
.tg-mast .tg-mast-list { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.tg-mast-list > li { position: relative; }
.tg-mast-nav a, .tg-lang-trigger { color: var(--color-text); text-decoration: none;
  font-family: var(--font-heading); font-size: .9375rem; font-weight: 600;
  white-space: nowrap; }
.tg-mast-nav a:hover, .tg-lang-trigger:hover { color: var(--color-primary); }
.tg-mast-nav a:focus-visible, .tg-lang-trigger:focus-visible {
  outline: 3px solid var(--color-primary); outline-offset: 4px; border-radius: 4px; }

/* The language switcher is a <details>: it opens on click and stays open,
   with no JavaScript and no reflow after load, because the markup is final
   when the page arrives. */
.tg-lang { position: relative; }
.tg-lang-trigger { display: inline-flex; align-items: center; gap: .4rem;
  padding-block: var(--space-3); margin-block: calc(-1 * var(--space-3));
  cursor: pointer; list-style: none; }
.tg-lang-trigger::-webkit-details-marker { display: none; }
.tg-lang-caret { width: .45rem; height: .45rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition-fast); }
.tg-lang[open] .tg-lang-caret { transform: translateY(2px) rotate(225deg); }

.tg-mast .tg-lang-panel { position: absolute; top: calc(100% + var(--space-5));
  left: 0; z-index: 30; display: flex; flex-direction: column; min-width: 13rem;
  margin: 0; padding: var(--space-3); list-style: none;
  background: var(--color-surface); border-radius: .5rem;
  box-shadow: 0 14px 34px rgba(16, 38, 42, .24); }
.tg-mast .tg-lang-panel li { width: 100%; }
.tg-mast .tg-lang-panel a { display: block; border-radius: .375rem;
  padding: var(--space-3) var(--space-5); font-weight: 500; }
.tg-mast .tg-lang-panel a:hover { background: var(--color-surface-soft); }
.tg-mast .tg-lang-current > a,
.tg-mast .tg-lang-current > a:hover { color: #ffffff; background: var(--color-primary); }

.tg-mast-login, .tg-mast-nav-login { flex: 0 0 auto; display: inline-block;
  padding: var(--space-3) var(--space-6); border-radius: var(--btn-radius);
  background: var(--color-surface); color: var(--color-text); text-decoration: none;
  font-family: var(--font-heading); font-size: .9375rem; font-weight: 700;
  box-shadow: 0 2px 10px rgba(16, 38, 42, .14);
  transition: background var(--transition-fast); }
.tg-mast-login:hover { background: var(--color-surface-soft); }
.tg-mast-login:focus-visible, .tg-mast-mark:focus-visible {
  outline: 3px solid #ffffff; outline-offset: 3px; }
.tg-mast-close, .tg-mast-login-row, .tg-lang-flat { display: none; }

/* the menu button, phones and small tablets only */
.tg-mast-button { display: none; }
/* The three bars are drawn INSIDE a 14px-tall box. Drawn as one bar plus two
   offset shadows, the box has the height of what it shows -- the earlier
   version made the element the middle bar and hung the other two outside it,
   so the button measured 2px tall and came out a squat 52x26 pill. */
.tg-mast-bars { position: relative; display: block; width: 20px; height: 14px;
  color: var(--color-text); }
.tg-mast-bars::before { content: ""; position: absolute; inset-inline: 0; top: 0;
  height: 2px; background: currentColor; border-radius: 2px;
  box-shadow: 0 6px 0 0 currentColor, 0 12px 0 0 currentColor; }

@media (max-width: 900px) {
  .tg-top, .tg-mast { padding: var(--space-5); }
  .tg-mast { justify-content: flex-end; }
  .tg-mast-mark img { height: 26px; }
  .tg-mast-login { display: none; }

  /* square, like the source site's, not a pill */
  .tg-mast-button { display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; padding: 0; border-radius: var(--btn-radius);
    background: var(--color-surface); color: var(--color-text); cursor: pointer;
    box-shadow: 0 2px 10px rgba(16, 38, 42, .14); }
  .tg-mast-switch:focus-visible ~ .tg-mast-button {
    outline: 3px solid #ffffff; outline-offset: 3px; }
  /* the panel takes the button's place, and carries its own close control */
  .tg-mast-switch:checked ~ .tg-mast-button { display: none; }

  /* A panel against the right edge rather than a full-width shelf, matching
     the source site. The languages are listed flat here, not behind the
     dropdown: a closed <details> cannot be forced open from CSS -- the browser
     hides its content itself -- so the drawer carries its own plain list. */
  .tg-mast-nav { position: absolute; top: var(--space-4); right: var(--space-5);
    left: auto; display: none; width: min(21rem, calc(100vw - 2 * var(--space-5)));
    max-height: calc(100vh - 2 * var(--space-5)); overflow-y: auto;
    padding: var(--space-5) var(--space-6) var(--space-6); border-radius: .5rem;
    box-shadow: 0 16px 40px rgba(16, 38, 42, .26); }
  .tg-mast-switch:checked ~ .tg-mast-nav { display: block; }

  .tg-mast-close { display: flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; margin-left: auto; margin-bottom: var(--space-2);
    cursor: pointer; color: var(--color-text); }
  .tg-mast-cross { position: relative; display: block; width: 18px; height: 18px; }
  .tg-mast-cross::before, .tg-mast-cross::after { content: ""; position: absolute;
    top: 50%; left: 0; width: 18px; height: 2px; background: currentColor;
    border-radius: 2px; }
  .tg-mast-cross::before { transform: rotate(45deg); }
  .tg-mast-cross::after { transform: rotate(-45deg); }

  .tg-mast .tg-mast-list { flex-direction: column; align-items: stretch; gap: 0; }
  .tg-mast-list > li { border-bottom: 1px solid var(--color-rule); }
  .tg-mast-list > li > a { display: block; padding: var(--space-4) 0;
    font-weight: 700; }
  .tg-mast-login-row { display: block; }
  /* the dropdown belongs to the wide header; the drawer lists the languages */
  .tg-lang-item { display: none; }

  .tg-lang-flat { display: block; padding-top: var(--space-5); }
  .tg-lang-flat-label { margin: 0 0 var(--space-3); color: var(--color-text);
    font-family: var(--font-heading); font-size: .8125rem; font-weight: 700; }
  .tg-mast .tg-lang-flat-list { margin: 0; padding: 0; list-style: none; }
  .tg-mast .tg-lang-flat-list a { display: block; border-radius: .375rem;
    padding: var(--space-3) var(--space-4); font-weight: 500;
    color: var(--color-text); text-decoration: none; }
  .tg-mast .tg-lang-flat-list a:hover { background: var(--color-surface-soft); }
  .tg-mast .tg-lang-flat-list .tg-lang-current > a,
  .tg-mast .tg-lang-flat-list .tg-lang-current > a:hover {
    color: #ffffff; background: var(--color-primary); }
}


/* ===== hero ===== */
.tg-hero { position: relative; display: grid; place-items: center; isolation: isolate;
  min-height: min(72vh, 42rem); overflow: hidden;
  padding: calc(var(--space-10) + 3rem) var(--space-5) var(--space-10); }
.tg-hero-shot { position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; }
.tg-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(16,38,42,.30) 0%, rgba(16,38,42,.22) 45%,
    rgba(16,38,42,.34) 100%); }
.tg-hero-inner { max-width: 58rem; margin: 0 auto; text-align: center; }
.tg-hero-title { margin: 0 0 var(--space-4); color: #ffffff; font-family: var(--font-heading);
  font-size: clamp(1.875rem, 1.15rem + 2.3vw, 2.75rem); line-height: 1.12;
  letter-spacing: calc(var(--heading-tracking) * 1em); font-weight: var(--weight-display);
  text-wrap: balance; text-shadow: 0 2px 14px rgba(16, 38, 42, .45); }
.tg-hero-sub { margin: 0 0 var(--space-7); color: #ffffff; font-family: var(--font-body);
  font-size: clamp(1rem, .95rem + 0.25vw, 1.125rem); line-height: 1.5; text-wrap: balance;
  text-shadow: 0 1px 10px rgba(16, 38, 42, .5); }
.tg-hero-cta { margin: 0; }
.tg-hero-button { display: inline-block; padding: 1.25rem 1.875rem;
  border-radius: var(--btn-radius); color: #ffffff; text-decoration: none;
  font-family: var(--font-heading); font-size: 1.5rem; line-height: 1;
  font-weight: var(--weight-display);
  background: linear-gradient(90deg, var(--tg-grad-a) 0%, var(--tg-grad-b) 55%, var(--tg-grad-c) 100%);
  box-shadow: 0 6px 20px rgba(16, 38, 42, .28);
  transition: filter var(--transition-fast); }
.tg-hero-button:hover { filter: brightness(1.08); }
.tg-hero-button:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

/* ===== points ===== */
.tg-points { padding: var(--space-10) var(--space-5); background: var(--color-bg); }
.tg-points .tg-points-list { max-width: var(--container-max); margin-inline: auto;
  margin-block: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8);
  justify-items: center; }
.tg-points-item { display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--space-4); }
.tg-points-icon { width: 96px; height: 96px; object-fit: contain; }
.tg-points-copy { margin: 0; max-width: 22rem; color: var(--color-primary);
  font-family: var(--font-heading); font-size: 1.0625rem; line-height: 1.4;
  font-weight: 700; }
@media (max-width: 860px) {
  .tg-points .tg-points-list { grid-template-columns: 1fr; gap: var(--space-7); }
}

/* ===== favourite ===== */
/* Every number here was measured off the source page rendered locally with its
   own theme.css injected (the saved link 404s because the filename carries the
   query string), at a 1280 viewport: band 1265x707 with 80px padding-block,
   content column 1024 (64rem, NOT the 1200 default), h2 32px with 0 0 20px,
   cards 232x450 with 20px/20px/40px padding and a 16px radius, pictures
   filling the card's inner width at their own ratio, h3 20px teal with 20px
   margins, copy 16px. The gradient string was already theirs verbatim -- the
   band's GEOMETRY was what made it read differently, since a 45deg gradient
   runs corner to corner. */
.tg-favourite { padding: 5rem var(--space-5);
  background: linear-gradient(45deg, var(--tg-grad-a) 0%, var(--tg-grad-b) 50%, var(--tg-grad-c) 100%); }
.tg-favourite-title { max-width: 64rem; margin: 38px auto 20px;
  text-align: center; color: #ffffff; font-family: var(--font-heading);
  font-size: 2rem; line-height: 1.2; letter-spacing: 0;
  font-weight: var(--weight-display); }
.tg-favourite .tg-favourite-cards { max-width: 64rem;
  margin-inline: auto; margin-block: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2em;
  align-items: stretch; }
.tg-favourite-card { height: 100%; display: flex; flex-direction: column;
  padding: 20px 20px 40px; background: var(--color-surface);
  border-radius: 1rem; box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .25); }
/* fills the card's inner width at the picture's own ratio -- never stretched,
   never cropped: no aspect-ratio and no object-fit anywhere near it */
.tg-favourite-shot { display: block; width: 100%; height: auto; margin: 0;
  border-radius: .5rem; }
.tg-favourite-heading { margin: 20px 0; color: var(--color-primary);
  font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.2;
  font-weight: var(--weight-display); }
.tg-favourite-copy { margin: 0; color: var(--color-text); font-family: var(--font-body);
  font-size: 1rem; line-height: 1.5; }
@media (max-width: 781px) { .tg-favourite .tg-favourite-cards { grid-template-columns: 1fr; } }

/* ===== foot ===== */
.tg-foot { padding: var(--space-9) var(--space-5) var(--space-6);
  background: var(--color-bg); border-top: 1px solid var(--color-rule); }
.tg-foot .tg-foot-inner { max-width: var(--container-max); margin-inline: auto;
  display: grid; grid-template-columns: minmax(12rem, 18rem) 1fr;
  gap: var(--space-8) var(--space-9); align-items: start; }
.tg-foot-brand { display: grid; gap: var(--space-5); justify-items: start; }
.tg-foot-mark img { display: block; width: 94px; height: auto; }
.tg-foot .tg-foot-apps, .tg-foot .tg-foot-social { display: flex; flex-wrap: wrap;
  gap: var(--space-3); margin: 0; padding: 0; list-style: none; align-items: center; }
.tg-foot-apps img { display: block; width: auto; height: 40px; }
.tg-foot-social a { display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; }
.tg-foot-social img { width: 1.75rem; height: auto; }

.tg-foot .tg-foot-menus { display: grid; grid-template-columns: 1fr 2fr;
  gap: var(--space-6); align-items: start; }
/* the source site lets its long legal menu flow into two columns rather than
   giving it its own grid track: `.menu:has(li:nth-child(6)) { columns: 2 }` */
.tg-foot .tg-foot-legal { columns: 2; column-gap: var(--space-6); }
.tg-foot .tg-foot-legal li { break-inside: avoid; }
.tg-foot .tg-foot-break { break-before: column; }
/* `footer ul li { min-height: 3rem }` on the source site */
.tg-foot .tg-foot-menus li { min-height: 3rem; }
.tg-foot .tg-foot-menus ul { margin: 0; padding: 0; list-style: none; }
.tg-foot .tg-foot-menus li { margin: 0; }
.tg-foot .tg-foot-menus a { display: inline-block; padding: var(--space-3) 0;
  color: var(--color-primary); text-decoration: none; font-family: var(--font-heading);
  font-size: .9375rem; font-weight: 700; text-wrap: pretty; }
.tg-foot .tg-foot-menus a:hover { text-decoration: underline; }
/* `footer .footer-menus a[href*="/cancellationandwithdrawal/"]` on the source
   site: white on the brand colour, its radius and card shadow. */
.tg-foot .tg-foot-menus a.tg-foot-filled { display: inline-block;
  margin: var(--space-2) 0; padding: var(--space-3) var(--space-4);
  border-radius: .5rem; color: #ffffff; background: var(--color-primary);
  box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .25); }
.tg-foot .tg-foot-menus a.tg-foot-filled:hover { color: #ffffff;
  text-decoration: none; filter: brightness(1.08); }
.tg-foot .tg-foot-menus a:focus-visible { outline: 3px solid var(--color-focus);
  outline-offset: 3px; border-radius: 4px; }

.tg-foot-copy { max-width: var(--container-max); margin: var(--space-7) auto 0;
  color: var(--color-text); font-family: var(--font-body); font-size: .6875rem;
  text-align: center; }

@media (max-width: 860px) {
  .tg-foot .tg-foot-inner { grid-template-columns: 1fr; justify-items: center;
    text-align: center; }
  .tg-foot-brand { justify-items: center; }
  .tg-foot .tg-foot-menus { grid-template-columns: 1fr; text-align: center; }
  .tg-foot .tg-foot-legal { columns: 1; }
  .tg-foot .tg-foot-break { break-before: auto; }
}
/* ===== lovoo body ===== */
/* Lovoo's homepage sections. The header, the footer and the furniture are the
   shared ones in sections.css; this file is only the middle.

   Colours are brand tokens throughout -- the source's --main-brand is
   #1565C0, --main-black #212121, --light-gray #f3f3f3, all of which this
   brand's stylesheet already defines, so another brand's palette carries
   through with nothing edited here. */

/* ---- hero ---- */
/* Every number measured off the source page rendered locally with its own
   theme stylesheet, not judged by eye: cover 1265x600 with min-height 600px
   and no padding of its own, content column 1024, h1 32px/38.4 weight 700
   white with 20px beneath, sub 16px/24, buttons 174x48 fully round. */
.lv-hero { position: relative; display: grid; place-items: center; isolation: isolate;
  min-height: 600px; overflow: hidden; }
.lv-hero-shot { position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; }
/* The source's overlay is NOT a gradient and not black: it is a flat warm grey
   at half opacity (`has-background-dim`, rgb(137,133,135) at .5), which lifts
   and desaturates the photograph. A black scrim reads far darker and more
   saturated, which is what ours did. */
.lv-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgb(137, 133, 135); opacity: .5; }
.lv-hero-inner { max-width: 64rem; margin: 0 auto; padding: 6rem var(--space-5) 4rem;
  text-align: center; color: #ffffff; }
.lv-hero-title { color: #ffffff; margin: 0 0 20px; font-size: 2rem; line-height: 1.2;
  font-weight: 700; }
.lv-hero-sub { margin: 0 0 20px; font-size: 1rem; line-height: 1.5; }

/* Two store buttons, not one join control: that is how the source sends
   people to the app. `ul[class]` in the brand stylesheet is (0,1,1) and beats
   a lone class, so the centring is written as a descendant. */
.lv-hero .lv-hero-stores { display: flex; flex-wrap: wrap; justify-content: center;
  gap: 24px; margin: 0; padding: 0; list-style: none; }
.lv-hero-store { display: inline-block; padding: 16px 20px; border-radius: 999px;
  background: var(--color-primary); color: #ffffff; text-decoration: none;
  font-family: var(--font-heading); font-size: 1rem; line-height: 1; font-weight: 700; }
.lv-hero-store:hover { filter: brightness(1.08); }
.lv-hero-store:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

/* ---- picture beside text ---- */
.lv-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: var(--space-8); max-width: 64rem; margin: 0 auto; }
.lv-split-flip .lv-split-figure { order: 2; }
.lv-split-shot { width: 100%; height: auto; border-radius: 1rem; }
.lv-split-copy h2 { margin: 0 0 var(--space-5); font-size: 2rem; line-height: 1.15; }
.lv-split-copy p { margin: 0 0 var(--space-4); font-size: 1rem; line-height: 1.6; }
.lv-split-cta { margin-top: var(--space-6); }
.lv-button { display: inline-block; padding: 16px 20px; border-radius: 999px;
  background: var(--color-primary); color: #ffffff; text-decoration: none;
  font-family: var(--font-heading); font-size: 1rem; line-height: 1; font-weight: 700; }
.lv-button:hover { filter: brightness(1.08); }

.lv-pitch { padding: 5rem var(--space-5); background: var(--color-surface); }
.lv-pitch .lv-split-copy h2 { color: var(--color-primary); }

/* ---- the feature band ---- */
/* Measured off the source: the band is `--main-black` rgb(33,33,33) with
   80px above and below, and it holds ONLY the feature cards. The story that
   follows is on the white page, not in the band -- reading it as part of the
   band is what made ours run dark through both. */
.lv-features { padding: 80px var(--space-5); background: var(--color-text); }
.lv-features-title { color: #ffffff; max-width: 64rem; margin: 0 auto 40px;
  font-size: 2rem; line-height: 1.2; font-weight: 700; text-align: center; }
.lv-features .lv-features-list { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; max-width: 64rem; margin: 0 auto; padding: 0; list-style: none; }
/* Each card is a WHITE box standing on the dark band -- radius 24px, the
   theme's own card shadow, and its heading in the brand blue. Ours had the
   text bare on the band, which is the difference the partner spotted. */
.lv-feature { display: flex; flex-direction: column; height: 100%;
  padding: 20px 20px 40px; border-radius: 24px; background: var(--color-surface);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .25); text-align: center; }
/* The screenshots keep their own ratio. No aspect-ratio and no object-fit
   anywhere near them -- forcing a ratio on portraits squashes them and crops
   heads off, which is exactly how this went wrong on a sibling brand. */
.lv-feature-shot { display: block; width: 100%; height: auto; margin: 0 auto 20px;
  border-radius: 8px; }
.lv-feature-heading { color: var(--color-primary); margin: 0 0 20px;
  font-size: 1.25rem; line-height: 1.25; font-weight: 700; }
.lv-feature-copy { margin: 0; color: var(--color-text); font-size: 1rem; line-height: 1.5; }

/* ---- the story, on the white page between the two bands ---- */
.lv-story { padding: 80px var(--space-5); background: var(--color-surface); }
.lv-story .lv-split-copy h2 { color: var(--color-primary); }

/* ---- closing ---- */
.lv-closing { padding: 80px var(--space-5); background: var(--color-text); color: #ffffff; }
.lv-closing-inner { max-width: 48rem; margin: 0 auto; text-align: center; }
.lv-closing-title { color: #ffffff; margin: 0 0 20px; font-size: 2rem;
  line-height: 1.2; font-weight: 700; }
.lv-closing-copy { margin: 0 0 var(--space-4); font-size: 1.0625rem; line-height: 1.6; }
.lv-closing-cta { margin: var(--space-6) 0 0; }
.lv-button-ghost { display: inline-block; padding: 16px 20px; border-radius: 999px;
  background: #ffffff; color: var(--color-text); text-decoration: none;
  font-family: var(--font-heading); font-size: 1rem; line-height: 1; font-weight: 700; }
.lv-button-ghost:hover { filter: brightness(.96); }

/* ---- the nested submenu in the header ---- */
.tg-sub-item { position: relative; }
.tg-sub-trigger { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  list-style: none; padding-block: var(--space-3); margin-block: calc(-1 * var(--space-3)); }
.tg-sub-trigger::-webkit-details-marker { display: none; }
.tg-sub[open] .tg-lang-caret { transform: rotate(-135deg); }
.tg-mast .tg-sub-panel { position: absolute; top: calc(100% + var(--space-5)); left: 0;
  min-width: 14rem; margin: 0; padding: var(--space-3); list-style: none;
  background: var(--color-surface); border-radius: .5rem;
  box-shadow: 0 2px 10px rgba(16, 38, 42, .14); }
.tg-mast .tg-sub-panel li { width: 100%; }
.tg-mast .tg-sub-panel a { display: block; border-radius: .375rem;
  padding: var(--space-2) var(--space-3); white-space: nowrap; }
.tg-mast .tg-sub-panel a:hover { background: var(--color-surface-soft); }

/* The logo keeps its own inks on this brand. `sections.css` inverts it to
   white for a sibling whose mark is a flat wordmark; Lovoo's carries red,
   yellow and blue, and the inversion flattens all three to white. */
.tg-mast-light .tg-mast-mark img { filter: none; }

/* Desktop shows the dropdown, the drawer shows the flat copy. */
.tg-sub-flat { display: none; }

/* Same breakpoint as the rest of the site, so it all changes shape at once. */
@media (max-width: 781px) {
  .lv-split { grid-template-columns: 1fr; gap: var(--space-6); }
  .lv-split-flip .lv-split-figure { order: 0; }
  .lv-features .lv-features-list { grid-template-columns: 1fr; }
  .lv-hero-inner { padding-top: 7rem; }
  /* In the drawer the children are listed flat under a heading, as the source
     has them -- not behind a trigger. The <details> is hidden rather than
     forced open, because a closed one cannot be opened from CSS at all. */
  .tg-sub-item .tg-sub { display: none; }
  .tg-sub-flat { display: block; }
  .tg-sub-flat-label { margin: 0 0 var(--space-3); font-weight: 700; }
  .tg-mast .tg-sub-flat-list { margin: 0; padding: 0 0 0 var(--space-5); list-style: none; }
  .tg-mast .tg-sub-flat-list li { margin-bottom: var(--space-3); }
}
/* === /page /nl === */

/* === page /pt: its own styles (page_assemble.py; rewritten on every assemble of this page) === */
:root {
  --tg-grad-a: #00B8D4;
  --tg-grad-b: #1E88E5;
  --tg-grad-c: #7C4DFF;
}
/* ===== mast ===== */
/* The source site puts its nav in the page's content column, not across the
   full width: `.main-grid > * { grid-column: content }` with
   `--wp--style--global--content-size: 64rem`. That is why its logo and login
   sit close together rather than at the screen edges. Left and right at 0 with
   auto inline margins centres an absolutely positioned row. */
/* The shell exists so the page has one <header> landmark; it is not laid out
   and takes no space. The two rows inside it do the positioning. */
.tg-mast-shell { display: contents; }

/* Two rows, exactly as the source site has it: it ships TWO navs, one
   `position: absolute` holding the logo and the login control, and one
   `position: fixed` (`nav.navigation.main-navigation`) holding the menu. So
   the logo and login scroll away and only the menu stays. Both rows sit in
   the same 64rem centred column so they line up, and both are
   click-through with only their contents clickable, so the empty space
   either side does not swallow clicks on the page beneath. */
.tg-top { position: absolute; top: 0; left: 0; right: 0; z-index: 19;
  max-width: 64rem; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); padding: var(--space-6) var(--space-5);
  pointer-events: none; }
.tg-mast { position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  max-width: 64rem; margin-inline: auto;
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-5); padding: var(--space-6) var(--space-5);
  pointer-events: none; }
.tg-top > *, .tg-mast > * { pointer-events: auto; }
.tg-mast-mark { display: inline-flex; flex: 0 0 auto; }
.tg-mast-mark img { display: block; height: 34px; width: auto;
  filter: brightness(0) invert(1); }
/* also set inline on the element, so a stale or missing stylesheet never
   leaves a raw checkbox sitting in the header -- it did, once, during the
   six-minute stylesheet cache window after a push. */
.tg-mast-switch { position: absolute; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; }
.tg-mast-sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

.tg-mast-nav { flex: 0 1 auto; background: var(--color-surface);
  border-radius: .5rem; padding: var(--space-3) var(--space-6);
  box-shadow: 0 2px 10px rgba(16, 38, 42, .14); }
.tg-mast .tg-mast-list { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.tg-mast-list > li { position: relative; }
.tg-mast-nav a, .tg-lang-trigger { color: var(--color-text); text-decoration: none;
  font-family: var(--font-heading); font-size: .9375rem; font-weight: 600;
  white-space: nowrap; }
.tg-mast-nav a:hover, .tg-lang-trigger:hover { color: var(--color-primary); }
.tg-mast-nav a:focus-visible, .tg-lang-trigger:focus-visible {
  outline: 3px solid var(--color-primary); outline-offset: 4px; border-radius: 4px; }

/* The language switcher is a <details>: it opens on click and stays open,
   with no JavaScript and no reflow after load, because the markup is final
   when the page arrives. */
.tg-lang { position: relative; }
.tg-lang-trigger { display: inline-flex; align-items: center; gap: .4rem;
  padding-block: var(--space-3); margin-block: calc(-1 * var(--space-3));
  cursor: pointer; list-style: none; }
.tg-lang-trigger::-webkit-details-marker { display: none; }
.tg-lang-caret { width: .45rem; height: .45rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition-fast); }
.tg-lang[open] .tg-lang-caret { transform: translateY(2px) rotate(225deg); }

.tg-mast .tg-lang-panel { position: absolute; top: calc(100% + var(--space-5));
  left: 0; z-index: 30; display: flex; flex-direction: column; min-width: 13rem;
  margin: 0; padding: var(--space-3); list-style: none;
  background: var(--color-surface); border-radius: .5rem;
  box-shadow: 0 14px 34px rgba(16, 38, 42, .24); }
.tg-mast .tg-lang-panel li { width: 100%; }
.tg-mast .tg-lang-panel a { display: block; border-radius: .375rem;
  padding: var(--space-3) var(--space-5); font-weight: 500; }
.tg-mast .tg-lang-panel a:hover { background: var(--color-surface-soft); }
.tg-mast .tg-lang-current > a,
.tg-mast .tg-lang-current > a:hover { color: #ffffff; background: var(--color-primary); }

.tg-mast-login, .tg-mast-nav-login { flex: 0 0 auto; display: inline-block;
  padding: var(--space-3) var(--space-6); border-radius: var(--btn-radius);
  background: var(--color-surface); color: var(--color-text); text-decoration: none;
  font-family: var(--font-heading); font-size: .9375rem; font-weight: 700;
  box-shadow: 0 2px 10px rgba(16, 38, 42, .14);
  transition: background var(--transition-fast); }
.tg-mast-login:hover { background: var(--color-surface-soft); }
.tg-mast-login:focus-visible, .tg-mast-mark:focus-visible {
  outline: 3px solid #ffffff; outline-offset: 3px; }
.tg-mast-close, .tg-mast-login-row, .tg-lang-flat { display: none; }

/* the menu button, phones and small tablets only */
.tg-mast-button { display: none; }
/* The three bars are drawn INSIDE a 14px-tall box. Drawn as one bar plus two
   offset shadows, the box has the height of what it shows -- the earlier
   version made the element the middle bar and hung the other two outside it,
   so the button measured 2px tall and came out a squat 52x26 pill. */
.tg-mast-bars { position: relative; display: block; width: 20px; height: 14px;
  color: var(--color-text); }
.tg-mast-bars::before { content: ""; position: absolute; inset-inline: 0; top: 0;
  height: 2px; background: currentColor; border-radius: 2px;
  box-shadow: 0 6px 0 0 currentColor, 0 12px 0 0 currentColor; }

@media (max-width: 900px) {
  .tg-top, .tg-mast { padding: var(--space-5); }
  .tg-mast { justify-content: flex-end; }
  .tg-mast-mark img { height: 26px; }
  .tg-mast-login { display: none; }

  /* square, like the source site's, not a pill */
  .tg-mast-button { display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; padding: 0; border-radius: var(--btn-radius);
    background: var(--color-surface); color: var(--color-text); cursor: pointer;
    box-shadow: 0 2px 10px rgba(16, 38, 42, .14); }
  .tg-mast-switch:focus-visible ~ .tg-mast-button {
    outline: 3px solid #ffffff; outline-offset: 3px; }
  /* the panel takes the button's place, and carries its own close control */
  .tg-mast-switch:checked ~ .tg-mast-button { display: none; }

  /* A panel against the right edge rather than a full-width shelf, matching
     the source site. The languages are listed flat here, not behind the
     dropdown: a closed <details> cannot be forced open from CSS -- the browser
     hides its content itself -- so the drawer carries its own plain list. */
  .tg-mast-nav { position: absolute; top: var(--space-4); right: var(--space-5);
    left: auto; display: none; width: min(21rem, calc(100vw - 2 * var(--space-5)));
    max-height: calc(100vh - 2 * var(--space-5)); overflow-y: auto;
    padding: var(--space-5) var(--space-6) var(--space-6); border-radius: .5rem;
    box-shadow: 0 16px 40px rgba(16, 38, 42, .26); }
  .tg-mast-switch:checked ~ .tg-mast-nav { display: block; }

  .tg-mast-close { display: flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; margin-left: auto; margin-bottom: var(--space-2);
    cursor: pointer; color: var(--color-text); }
  .tg-mast-cross { position: relative; display: block; width: 18px; height: 18px; }
  .tg-mast-cross::before, .tg-mast-cross::after { content: ""; position: absolute;
    top: 50%; left: 0; width: 18px; height: 2px; background: currentColor;
    border-radius: 2px; }
  .tg-mast-cross::before { transform: rotate(45deg); }
  .tg-mast-cross::after { transform: rotate(-45deg); }

  .tg-mast .tg-mast-list { flex-direction: column; align-items: stretch; gap: 0; }
  .tg-mast-list > li { border-bottom: 1px solid var(--color-rule); }
  .tg-mast-list > li > a { display: block; padding: var(--space-4) 0;
    font-weight: 700; }
  .tg-mast-login-row { display: block; }
  /* the dropdown belongs to the wide header; the drawer lists the languages */
  .tg-lang-item { display: none; }

  .tg-lang-flat { display: block; padding-top: var(--space-5); }
  .tg-lang-flat-label { margin: 0 0 var(--space-3); color: var(--color-text);
    font-family: var(--font-heading); font-size: .8125rem; font-weight: 700; }
  .tg-mast .tg-lang-flat-list { margin: 0; padding: 0; list-style: none; }
  .tg-mast .tg-lang-flat-list a { display: block; border-radius: .375rem;
    padding: var(--space-3) var(--space-4); font-weight: 500;
    color: var(--color-text); text-decoration: none; }
  .tg-mast .tg-lang-flat-list a:hover { background: var(--color-surface-soft); }
  .tg-mast .tg-lang-flat-list .tg-lang-current > a,
  .tg-mast .tg-lang-flat-list .tg-lang-current > a:hover {
    color: #ffffff; background: var(--color-primary); }
}


/* ===== hero ===== */
.tg-hero { position: relative; display: grid; place-items: center; isolation: isolate;
  min-height: min(72vh, 42rem); overflow: hidden;
  padding: calc(var(--space-10) + 3rem) var(--space-5) var(--space-10); }
.tg-hero-shot { position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; }
.tg-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(16,38,42,.30) 0%, rgba(16,38,42,.22) 45%,
    rgba(16,38,42,.34) 100%); }
.tg-hero-inner { max-width: 58rem; margin: 0 auto; text-align: center; }
.tg-hero-title { margin: 0 0 var(--space-4); color: #ffffff; font-family: var(--font-heading);
  font-size: clamp(1.875rem, 1.15rem + 2.3vw, 2.75rem); line-height: 1.12;
  letter-spacing: calc(var(--heading-tracking) * 1em); font-weight: var(--weight-display);
  text-wrap: balance; text-shadow: 0 2px 14px rgba(16, 38, 42, .45); }
.tg-hero-sub { margin: 0 0 var(--space-7); color: #ffffff; font-family: var(--font-body);
  font-size: clamp(1rem, .95rem + 0.25vw, 1.125rem); line-height: 1.5; text-wrap: balance;
  text-shadow: 0 1px 10px rgba(16, 38, 42, .5); }
.tg-hero-cta { margin: 0; }
.tg-hero-button { display: inline-block; padding: 1.25rem 1.875rem;
  border-radius: var(--btn-radius); color: #ffffff; text-decoration: none;
  font-family: var(--font-heading); font-size: 1.5rem; line-height: 1;
  font-weight: var(--weight-display);
  background: linear-gradient(90deg, var(--tg-grad-a) 0%, var(--tg-grad-b) 55%, var(--tg-grad-c) 100%);
  box-shadow: 0 6px 20px rgba(16, 38, 42, .28);
  transition: filter var(--transition-fast); }
.tg-hero-button:hover { filter: brightness(1.08); }
.tg-hero-button:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

/* ===== points ===== */
.tg-points { padding: var(--space-10) var(--space-5); background: var(--color-bg); }
.tg-points .tg-points-list { max-width: var(--container-max); margin-inline: auto;
  margin-block: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8);
  justify-items: center; }
.tg-points-item { display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--space-4); }
.tg-points-icon { width: 96px; height: 96px; object-fit: contain; }
.tg-points-copy { margin: 0; max-width: 22rem; color: var(--color-primary);
  font-family: var(--font-heading); font-size: 1.0625rem; line-height: 1.4;
  font-weight: 700; }
@media (max-width: 860px) {
  .tg-points .tg-points-list { grid-template-columns: 1fr; gap: var(--space-7); }
}

/* ===== favourite ===== */
/* Every number here was measured off the source page rendered locally with its
   own theme.css injected (the saved link 404s because the filename carries the
   query string), at a 1280 viewport: band 1265x707 with 80px padding-block,
   content column 1024 (64rem, NOT the 1200 default), h2 32px with 0 0 20px,
   cards 232x450 with 20px/20px/40px padding and a 16px radius, pictures
   filling the card's inner width at their own ratio, h3 20px teal with 20px
   margins, copy 16px. The gradient string was already theirs verbatim -- the
   band's GEOMETRY was what made it read differently, since a 45deg gradient
   runs corner to corner. */
.tg-favourite { padding: 5rem var(--space-5);
  background: linear-gradient(45deg, var(--tg-grad-a) 0%, var(--tg-grad-b) 50%, var(--tg-grad-c) 100%); }
.tg-favourite-title { max-width: 64rem; margin: 38px auto 20px;
  text-align: center; color: #ffffff; font-family: var(--font-heading);
  font-size: 2rem; line-height: 1.2; letter-spacing: 0;
  font-weight: var(--weight-display); }
.tg-favourite .tg-favourite-cards { max-width: 64rem;
  margin-inline: auto; margin-block: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2em;
  align-items: stretch; }
.tg-favourite-card { height: 100%; display: flex; flex-direction: column;
  padding: 20px 20px 40px; background: var(--color-surface);
  border-radius: 1rem; box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .25); }
/* fills the card's inner width at the picture's own ratio -- never stretched,
   never cropped: no aspect-ratio and no object-fit anywhere near it */
.tg-favourite-shot { display: block; width: 100%; height: auto; margin: 0;
  border-radius: .5rem; }
.tg-favourite-heading { margin: 20px 0; color: var(--color-primary);
  font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.2;
  font-weight: var(--weight-display); }
.tg-favourite-copy { margin: 0; color: var(--color-text); font-family: var(--font-body);
  font-size: 1rem; line-height: 1.5; }
@media (max-width: 781px) { .tg-favourite .tg-favourite-cards { grid-template-columns: 1fr; } }

/* ===== foot ===== */
.tg-foot { padding: var(--space-9) var(--space-5) var(--space-6);
  background: var(--color-bg); border-top: 1px solid var(--color-rule); }
.tg-foot .tg-foot-inner { max-width: var(--container-max); margin-inline: auto;
  display: grid; grid-template-columns: minmax(12rem, 18rem) 1fr;
  gap: var(--space-8) var(--space-9); align-items: start; }
.tg-foot-brand { display: grid; gap: var(--space-5); justify-items: start; }
.tg-foot-mark img { display: block; width: 94px; height: auto; }
.tg-foot .tg-foot-apps, .tg-foot .tg-foot-social { display: flex; flex-wrap: wrap;
  gap: var(--space-3); margin: 0; padding: 0; list-style: none; align-items: center; }
.tg-foot-apps img { display: block; width: auto; height: 40px; }
.tg-foot-social a { display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; }
.tg-foot-social img { width: 1.75rem; height: auto; }

.tg-foot .tg-foot-menus { display: grid; grid-template-columns: 1fr 2fr;
  gap: var(--space-6); align-items: start; }
/* the source site lets its long legal menu flow into two columns rather than
   giving it its own grid track: `.menu:has(li:nth-child(6)) { columns: 2 }` */
.tg-foot .tg-foot-legal { columns: 2; column-gap: var(--space-6); }
.tg-foot .tg-foot-legal li { break-inside: avoid; }
.tg-foot .tg-foot-break { break-before: column; }
/* `footer ul li { min-height: 3rem }` on the source site */
.tg-foot .tg-foot-menus li { min-height: 3rem; }
.tg-foot .tg-foot-menus ul { margin: 0; padding: 0; list-style: none; }
.tg-foot .tg-foot-menus li { margin: 0; }
.tg-foot .tg-foot-menus a { display: inline-block; padding: var(--space-3) 0;
  color: var(--color-primary); text-decoration: none; font-family: var(--font-heading);
  font-size: .9375rem; font-weight: 700; text-wrap: pretty; }
.tg-foot .tg-foot-menus a:hover { text-decoration: underline; }
/* `footer .footer-menus a[href*="/cancellationandwithdrawal/"]` on the source
   site: white on the brand colour, its radius and card shadow. */
.tg-foot .tg-foot-menus a.tg-foot-filled { display: inline-block;
  margin: var(--space-2) 0; padding: var(--space-3) var(--space-4);
  border-radius: .5rem; color: #ffffff; background: var(--color-primary);
  box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .25); }
.tg-foot .tg-foot-menus a.tg-foot-filled:hover { color: #ffffff;
  text-decoration: none; filter: brightness(1.08); }
.tg-foot .tg-foot-menus a:focus-visible { outline: 3px solid var(--color-focus);
  outline-offset: 3px; border-radius: 4px; }

.tg-foot-copy { max-width: var(--container-max); margin: var(--space-7) auto 0;
  color: var(--color-text); font-family: var(--font-body); font-size: .6875rem;
  text-align: center; }

@media (max-width: 860px) {
  .tg-foot .tg-foot-inner { grid-template-columns: 1fr; justify-items: center;
    text-align: center; }
  .tg-foot-brand { justify-items: center; }
  .tg-foot .tg-foot-menus { grid-template-columns: 1fr; text-align: center; }
  .tg-foot .tg-foot-legal { columns: 1; }
  .tg-foot .tg-foot-break { break-before: auto; }
}
/* ===== lovoo body ===== */
/* Lovoo's homepage sections. The header, the footer and the furniture are the
   shared ones in sections.css; this file is only the middle.

   Colours are brand tokens throughout -- the source's --main-brand is
   #1565C0, --main-black #212121, --light-gray #f3f3f3, all of which this
   brand's stylesheet already defines, so another brand's palette carries
   through with nothing edited here. */

/* ---- hero ---- */
/* Every number measured off the source page rendered locally with its own
   theme stylesheet, not judged by eye: cover 1265x600 with min-height 600px
   and no padding of its own, content column 1024, h1 32px/38.4 weight 700
   white with 20px beneath, sub 16px/24, buttons 174x48 fully round. */
.lv-hero { position: relative; display: grid; place-items: center; isolation: isolate;
  min-height: 600px; overflow: hidden; }
.lv-hero-shot { position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; }
/* The source's overlay is NOT a gradient and not black: it is a flat warm grey
   at half opacity (`has-background-dim`, rgb(137,133,135) at .5), which lifts
   and desaturates the photograph. A black scrim reads far darker and more
   saturated, which is what ours did. */
.lv-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgb(137, 133, 135); opacity: .5; }
.lv-hero-inner { max-width: 64rem; margin: 0 auto; padding: 6rem var(--space-5) 4rem;
  text-align: center; color: #ffffff; }
.lv-hero-title { color: #ffffff; margin: 0 0 20px; font-size: 2rem; line-height: 1.2;
  font-weight: 700; }
.lv-hero-sub { margin: 0 0 20px; font-size: 1rem; line-height: 1.5; }

/* Two store buttons, not one join control: that is how the source sends
   people to the app. `ul[class]` in the brand stylesheet is (0,1,1) and beats
   a lone class, so the centring is written as a descendant. */
.lv-hero .lv-hero-stores { display: flex; flex-wrap: wrap; justify-content: center;
  gap: 24px; margin: 0; padding: 0; list-style: none; }
.lv-hero-store { display: inline-block; padding: 16px 20px; border-radius: 999px;
  background: var(--color-primary); color: #ffffff; text-decoration: none;
  font-family: var(--font-heading); font-size: 1rem; line-height: 1; font-weight: 700; }
.lv-hero-store:hover { filter: brightness(1.08); }
.lv-hero-store:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

/* ---- picture beside text ---- */
.lv-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: var(--space-8); max-width: 64rem; margin: 0 auto; }
.lv-split-flip .lv-split-figure { order: 2; }
.lv-split-shot { width: 100%; height: auto; border-radius: 1rem; }
.lv-split-copy h2 { margin: 0 0 var(--space-5); font-size: 2rem; line-height: 1.15; }
.lv-split-copy p { margin: 0 0 var(--space-4); font-size: 1rem; line-height: 1.6; }
.lv-split-cta { margin-top: var(--space-6); }
.lv-button { display: inline-block; padding: 16px 20px; border-radius: 999px;
  background: var(--color-primary); color: #ffffff; text-decoration: none;
  font-family: var(--font-heading); font-size: 1rem; line-height: 1; font-weight: 700; }
.lv-button:hover { filter: brightness(1.08); }

.lv-pitch { padding: 5rem var(--space-5); background: var(--color-surface); }
.lv-pitch .lv-split-copy h2 { color: var(--color-primary); }

/* ---- the feature band ---- */
/* Measured off the source: the band is `--main-black` rgb(33,33,33) with
   80px above and below, and it holds ONLY the feature cards. The story that
   follows is on the white page, not in the band -- reading it as part of the
   band is what made ours run dark through both. */
.lv-features { padding: 80px var(--space-5); background: var(--color-text); }
.lv-features-title { color: #ffffff; max-width: 64rem; margin: 0 auto 40px;
  font-size: 2rem; line-height: 1.2; font-weight: 700; text-align: center; }
.lv-features .lv-features-list { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; max-width: 64rem; margin: 0 auto; padding: 0; list-style: none; }
/* Each card is a WHITE box standing on the dark band -- radius 24px, the
   theme's own card shadow, and its heading in the brand blue. Ours had the
   text bare on the band, which is the difference the partner spotted. */
.lv-feature { display: flex; flex-direction: column; height: 100%;
  padding: 20px 20px 40px; border-radius: 24px; background: var(--color-surface);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .25); text-align: center; }
/* The screenshots keep their own ratio. No aspect-ratio and no object-fit
   anywhere near them -- forcing a ratio on portraits squashes them and crops
   heads off, which is exactly how this went wrong on a sibling brand. */
.lv-feature-shot { display: block; width: 100%; height: auto; margin: 0 auto 20px;
  border-radius: 8px; }
.lv-feature-heading { color: var(--color-primary); margin: 0 0 20px;
  font-size: 1.25rem; line-height: 1.25; font-weight: 700; }
.lv-feature-copy { margin: 0; color: var(--color-text); font-size: 1rem; line-height: 1.5; }

/* ---- the story, on the white page between the two bands ---- */
.lv-story { padding: 80px var(--space-5); background: var(--color-surface); }
.lv-story .lv-split-copy h2 { color: var(--color-primary); }

/* ---- closing ---- */
.lv-closing { padding: 80px var(--space-5); background: var(--color-text); color: #ffffff; }
.lv-closing-inner { max-width: 48rem; margin: 0 auto; text-align: center; }
.lv-closing-title { color: #ffffff; margin: 0 0 20px; font-size: 2rem;
  line-height: 1.2; font-weight: 700; }
.lv-closing-copy { margin: 0 0 var(--space-4); font-size: 1.0625rem; line-height: 1.6; }
.lv-closing-cta { margin: var(--space-6) 0 0; }
.lv-button-ghost { display: inline-block; padding: 16px 20px; border-radius: 999px;
  background: #ffffff; color: var(--color-text); text-decoration: none;
  font-family: var(--font-heading); font-size: 1rem; line-height: 1; font-weight: 700; }
.lv-button-ghost:hover { filter: brightness(.96); }

/* ---- the nested submenu in the header ---- */
.tg-sub-item { position: relative; }
.tg-sub-trigger { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  list-style: none; padding-block: var(--space-3); margin-block: calc(-1 * var(--space-3)); }
.tg-sub-trigger::-webkit-details-marker { display: none; }
.tg-sub[open] .tg-lang-caret { transform: rotate(-135deg); }
.tg-mast .tg-sub-panel { position: absolute; top: calc(100% + var(--space-5)); left: 0;
  min-width: 14rem; margin: 0; padding: var(--space-3); list-style: none;
  background: var(--color-surface); border-radius: .5rem;
  box-shadow: 0 2px 10px rgba(16, 38, 42, .14); }
.tg-mast .tg-sub-panel li { width: 100%; }
.tg-mast .tg-sub-panel a { display: block; border-radius: .375rem;
  padding: var(--space-2) var(--space-3); white-space: nowrap; }
.tg-mast .tg-sub-panel a:hover { background: var(--color-surface-soft); }

/* The logo keeps its own inks on this brand. `sections.css` inverts it to
   white for a sibling whose mark is a flat wordmark; Lovoo's carries red,
   yellow and blue, and the inversion flattens all three to white. */
.tg-mast-light .tg-mast-mark img { filter: none; }

/* Desktop shows the dropdown, the drawer shows the flat copy. */
.tg-sub-flat { display: none; }

/* Same breakpoint as the rest of the site, so it all changes shape at once. */
@media (max-width: 781px) {
  .lv-split { grid-template-columns: 1fr; gap: var(--space-6); }
  .lv-split-flip .lv-split-figure { order: 0; }
  .lv-features .lv-features-list { grid-template-columns: 1fr; }
  .lv-hero-inner { padding-top: 7rem; }
  /* In the drawer the children are listed flat under a heading, as the source
     has them -- not behind a trigger. The <details> is hidden rather than
     forced open, because a closed one cannot be opened from CSS at all. */
  .tg-sub-item .tg-sub { display: none; }
  .tg-sub-flat { display: block; }
  .tg-sub-flat-label { margin: 0 0 var(--space-3); font-weight: 700; }
  .tg-mast .tg-sub-flat-list { margin: 0; padding: 0 0 0 var(--space-5); list-style: none; }
  .tg-mast .tg-sub-flat-list li { margin-bottom: var(--space-3); }
}
/* === /page /pt === */

/* === page /tr: its own styles (page_assemble.py; rewritten on every assemble of this page) === */
:root {
  --tg-grad-a: #00B8D4;
  --tg-grad-b: #1E88E5;
  --tg-grad-c: #7C4DFF;
}
/* ===== mast ===== */
/* The source site puts its nav in the page's content column, not across the
   full width: `.main-grid > * { grid-column: content }` with
   `--wp--style--global--content-size: 64rem`. That is why its logo and login
   sit close together rather than at the screen edges. Left and right at 0 with
   auto inline margins centres an absolutely positioned row. */
/* The shell exists so the page has one <header> landmark; it is not laid out
   and takes no space. The two rows inside it do the positioning. */
.tg-mast-shell { display: contents; }

/* Two rows, exactly as the source site has it: it ships TWO navs, one
   `position: absolute` holding the logo and the login control, and one
   `position: fixed` (`nav.navigation.main-navigation`) holding the menu. So
   the logo and login scroll away and only the menu stays. Both rows sit in
   the same 64rem centred column so they line up, and both are
   click-through with only their contents clickable, so the empty space
   either side does not swallow clicks on the page beneath. */
.tg-top { position: absolute; top: 0; left: 0; right: 0; z-index: 19;
  max-width: 64rem; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); padding: var(--space-6) var(--space-5);
  pointer-events: none; }
.tg-mast { position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  max-width: 64rem; margin-inline: auto;
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-5); padding: var(--space-6) var(--space-5);
  pointer-events: none; }
.tg-top > *, .tg-mast > * { pointer-events: auto; }
.tg-mast-mark { display: inline-flex; flex: 0 0 auto; }
.tg-mast-mark img { display: block; height: 34px; width: auto;
  filter: brightness(0) invert(1); }
/* also set inline on the element, so a stale or missing stylesheet never
   leaves a raw checkbox sitting in the header -- it did, once, during the
   six-minute stylesheet cache window after a push. */
.tg-mast-switch { position: absolute; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; }
.tg-mast-sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

.tg-mast-nav { flex: 0 1 auto; background: var(--color-surface);
  border-radius: .5rem; padding: var(--space-3) var(--space-6);
  box-shadow: 0 2px 10px rgba(16, 38, 42, .14); }
.tg-mast .tg-mast-list { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.tg-mast-list > li { position: relative; }
.tg-mast-nav a, .tg-lang-trigger { color: var(--color-text); text-decoration: none;
  font-family: var(--font-heading); font-size: .9375rem; font-weight: 600;
  white-space: nowrap; }
.tg-mast-nav a:hover, .tg-lang-trigger:hover { color: var(--color-primary); }
.tg-mast-nav a:focus-visible, .tg-lang-trigger:focus-visible {
  outline: 3px solid var(--color-primary); outline-offset: 4px; border-radius: 4px; }

/* The language switcher is a <details>: it opens on click and stays open,
   with no JavaScript and no reflow after load, because the markup is final
   when the page arrives. */
.tg-lang { position: relative; }
.tg-lang-trigger { display: inline-flex; align-items: center; gap: .4rem;
  padding-block: var(--space-3); margin-block: calc(-1 * var(--space-3));
  cursor: pointer; list-style: none; }
.tg-lang-trigger::-webkit-details-marker { display: none; }
.tg-lang-caret { width: .45rem; height: .45rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--transition-fast); }
.tg-lang[open] .tg-lang-caret { transform: translateY(2px) rotate(225deg); }

.tg-mast .tg-lang-panel { position: absolute; top: calc(100% + var(--space-5));
  left: 0; z-index: 30; display: flex; flex-direction: column; min-width: 13rem;
  margin: 0; padding: var(--space-3); list-style: none;
  background: var(--color-surface); border-radius: .5rem;
  box-shadow: 0 14px 34px rgba(16, 38, 42, .24); }
.tg-mast .tg-lang-panel li { width: 100%; }
.tg-mast .tg-lang-panel a { display: block; border-radius: .375rem;
  padding: var(--space-3) var(--space-5); font-weight: 500; }
.tg-mast .tg-lang-panel a:hover { background: var(--color-surface-soft); }
.tg-mast .tg-lang-current > a,
.tg-mast .tg-lang-current > a:hover { color: #ffffff; background: var(--color-primary); }

.tg-mast-login, .tg-mast-nav-login { flex: 0 0 auto; display: inline-block;
  padding: var(--space-3) var(--space-6); border-radius: var(--btn-radius);
  background: var(--color-surface); color: var(--color-text); text-decoration: none;
  font-family: var(--font-heading); font-size: .9375rem; font-weight: 700;
  box-shadow: 0 2px 10px rgba(16, 38, 42, .14);
  transition: background var(--transition-fast); }
.tg-mast-login:hover { background: var(--color-surface-soft); }
.tg-mast-login:focus-visible, .tg-mast-mark:focus-visible {
  outline: 3px solid #ffffff; outline-offset: 3px; }
.tg-mast-close, .tg-mast-login-row, .tg-lang-flat { display: none; }

/* the menu button, phones and small tablets only */
.tg-mast-button { display: none; }
/* The three bars are drawn INSIDE a 14px-tall box. Drawn as one bar plus two
   offset shadows, the box has the height of what it shows -- the earlier
   version made the element the middle bar and hung the other two outside it,
   so the button measured 2px tall and came out a squat 52x26 pill. */
.tg-mast-bars { position: relative; display: block; width: 20px; height: 14px;
  color: var(--color-text); }
.tg-mast-bars::before { content: ""; position: absolute; inset-inline: 0; top: 0;
  height: 2px; background: currentColor; border-radius: 2px;
  box-shadow: 0 6px 0 0 currentColor, 0 12px 0 0 currentColor; }

@media (max-width: 900px) {
  .tg-top, .tg-mast { padding: var(--space-5); }
  .tg-mast { justify-content: flex-end; }
  .tg-mast-mark img { height: 26px; }
  .tg-mast-login { display: none; }

  /* square, like the source site's, not a pill */
  .tg-mast-button { display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; padding: 0; border-radius: var(--btn-radius);
    background: var(--color-surface); color: var(--color-text); cursor: pointer;
    box-shadow: 0 2px 10px rgba(16, 38, 42, .14); }
  .tg-mast-switch:focus-visible ~ .tg-mast-button {
    outline: 3px solid #ffffff; outline-offset: 3px; }
  /* the panel takes the button's place, and carries its own close control */
  .tg-mast-switch:checked ~ .tg-mast-button { display: none; }

  /* A panel against the right edge rather than a full-width shelf, matching
     the source site. The languages are listed flat here, not behind the
     dropdown: a closed <details> cannot be forced open from CSS -- the browser
     hides its content itself -- so the drawer carries its own plain list. */
  .tg-mast-nav { position: absolute; top: var(--space-4); right: var(--space-5);
    left: auto; display: none; width: min(21rem, calc(100vw - 2 * var(--space-5)));
    max-height: calc(100vh - 2 * var(--space-5)); overflow-y: auto;
    padding: var(--space-5) var(--space-6) var(--space-6); border-radius: .5rem;
    box-shadow: 0 16px 40px rgba(16, 38, 42, .26); }
  .tg-mast-switch:checked ~ .tg-mast-nav { display: block; }

  .tg-mast-close { display: flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; margin-left: auto; margin-bottom: var(--space-2);
    cursor: pointer; color: var(--color-text); }
  .tg-mast-cross { position: relative; display: block; width: 18px; height: 18px; }
  .tg-mast-cross::before, .tg-mast-cross::after { content: ""; position: absolute;
    top: 50%; left: 0; width: 18px; height: 2px; background: currentColor;
    border-radius: 2px; }
  .tg-mast-cross::before { transform: rotate(45deg); }
  .tg-mast-cross::after { transform: rotate(-45deg); }

  .tg-mast .tg-mast-list { flex-direction: column; align-items: stretch; gap: 0; }
  .tg-mast-list > li { border-bottom: 1px solid var(--color-rule); }
  .tg-mast-list > li > a { display: block; padding: var(--space-4) 0;
    font-weight: 700; }
  .tg-mast-login-row { display: block; }
  /* the dropdown belongs to the wide header; the drawer lists the languages */
  .tg-lang-item { display: none; }

  .tg-lang-flat { display: block; padding-top: var(--space-5); }
  .tg-lang-flat-label { margin: 0 0 var(--space-3); color: var(--color-text);
    font-family: var(--font-heading); font-size: .8125rem; font-weight: 700; }
  .tg-mast .tg-lang-flat-list { margin: 0; padding: 0; list-style: none; }
  .tg-mast .tg-lang-flat-list a { display: block; border-radius: .375rem;
    padding: var(--space-3) var(--space-4); font-weight: 500;
    color: var(--color-text); text-decoration: none; }
  .tg-mast .tg-lang-flat-list a:hover { background: var(--color-surface-soft); }
  .tg-mast .tg-lang-flat-list .tg-lang-current > a,
  .tg-mast .tg-lang-flat-list .tg-lang-current > a:hover {
    color: #ffffff; background: var(--color-primary); }
}


/* ===== hero ===== */
.tg-hero { position: relative; display: grid; place-items: center; isolation: isolate;
  min-height: min(72vh, 42rem); overflow: hidden;
  padding: calc(var(--space-10) + 3rem) var(--space-5) var(--space-10); }
.tg-hero-shot { position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; }
.tg-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(16,38,42,.30) 0%, rgba(16,38,42,.22) 45%,
    rgba(16,38,42,.34) 100%); }
.tg-hero-inner { max-width: 58rem; margin: 0 auto; text-align: center; }
.tg-hero-title { margin: 0 0 var(--space-4); color: #ffffff; font-family: var(--font-heading);
  font-size: clamp(1.875rem, 1.15rem + 2.3vw, 2.75rem); line-height: 1.12;
  letter-spacing: calc(var(--heading-tracking) * 1em); font-weight: var(--weight-display);
  text-wrap: balance; text-shadow: 0 2px 14px rgba(16, 38, 42, .45); }
.tg-hero-sub { margin: 0 0 var(--space-7); color: #ffffff; font-family: var(--font-body);
  font-size: clamp(1rem, .95rem + 0.25vw, 1.125rem); line-height: 1.5; text-wrap: balance;
  text-shadow: 0 1px 10px rgba(16, 38, 42, .5); }
.tg-hero-cta { margin: 0; }
.tg-hero-button { display: inline-block; padding: 1.25rem 1.875rem;
  border-radius: var(--btn-radius); color: #ffffff; text-decoration: none;
  font-family: var(--font-heading); font-size: 1.5rem; line-height: 1;
  font-weight: var(--weight-display);
  background: linear-gradient(90deg, var(--tg-grad-a) 0%, var(--tg-grad-b) 55%, var(--tg-grad-c) 100%);
  box-shadow: 0 6px 20px rgba(16, 38, 42, .28);
  transition: filter var(--transition-fast); }
.tg-hero-button:hover { filter: brightness(1.08); }
.tg-hero-button:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

/* ===== points ===== */
.tg-points { padding: var(--space-10) var(--space-5); background: var(--color-bg); }
.tg-points .tg-points-list { max-width: var(--container-max); margin-inline: auto;
  margin-block: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8);
  justify-items: center; }
.tg-points-item { display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--space-4); }
.tg-points-icon { width: 96px; height: 96px; object-fit: contain; }
.tg-points-copy { margin: 0; max-width: 22rem; color: var(--color-primary);
  font-family: var(--font-heading); font-size: 1.0625rem; line-height: 1.4;
  font-weight: 700; }
@media (max-width: 860px) {
  .tg-points .tg-points-list { grid-template-columns: 1fr; gap: var(--space-7); }
}

/* ===== favourite ===== */
/* Every number here was measured off the source page rendered locally with its
   own theme.css injected (the saved link 404s because the filename carries the
   query string), at a 1280 viewport: band 1265x707 with 80px padding-block,
   content column 1024 (64rem, NOT the 1200 default), h2 32px with 0 0 20px,
   cards 232x450 with 20px/20px/40px padding and a 16px radius, pictures
   filling the card's inner width at their own ratio, h3 20px teal with 20px
   margins, copy 16px. The gradient string was already theirs verbatim -- the
   band's GEOMETRY was what made it read differently, since a 45deg gradient
   runs corner to corner. */
.tg-favourite { padding: 5rem var(--space-5);
  background: linear-gradient(45deg, var(--tg-grad-a) 0%, var(--tg-grad-b) 50%, var(--tg-grad-c) 100%); }
.tg-favourite-title { max-width: 64rem; margin: 38px auto 20px;
  text-align: center; color: #ffffff; font-family: var(--font-heading);
  font-size: 2rem; line-height: 1.2; letter-spacing: 0;
  font-weight: var(--weight-display); }
.tg-favourite .tg-favourite-cards { max-width: 64rem;
  margin-inline: auto; margin-block: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2em;
  align-items: stretch; }
.tg-favourite-card { height: 100%; display: flex; flex-direction: column;
  padding: 20px 20px 40px; background: var(--color-surface);
  border-radius: 1rem; box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .25); }
/* fills the card's inner width at the picture's own ratio -- never stretched,
   never cropped: no aspect-ratio and no object-fit anywhere near it */
.tg-favourite-shot { display: block; width: 100%; height: auto; margin: 0;
  border-radius: .5rem; }
.tg-favourite-heading { margin: 20px 0; color: var(--color-primary);
  font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.2;
  font-weight: var(--weight-display); }
.tg-favourite-copy { margin: 0; color: var(--color-text); font-family: var(--font-body);
  font-size: 1rem; line-height: 1.5; }
@media (max-width: 781px) { .tg-favourite .tg-favourite-cards { grid-template-columns: 1fr; } }

/* ===== foot ===== */
.tg-foot { padding: var(--space-9) var(--space-5) var(--space-6);
  background: var(--color-bg); border-top: 1px solid var(--color-rule); }
.tg-foot .tg-foot-inner { max-width: var(--container-max); margin-inline: auto;
  display: grid; grid-template-columns: minmax(12rem, 18rem) 1fr;
  gap: var(--space-8) var(--space-9); align-items: start; }
.tg-foot-brand { display: grid; gap: var(--space-5); justify-items: start; }
.tg-foot-mark img { display: block; width: 94px; height: auto; }
.tg-foot .tg-foot-apps, .tg-foot .tg-foot-social { display: flex; flex-wrap: wrap;
  gap: var(--space-3); margin: 0; padding: 0; list-style: none; align-items: center; }
.tg-foot-apps img { display: block; width: auto; height: 40px; }
.tg-foot-social a { display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; }
.tg-foot-social img { width: 1.75rem; height: auto; }

.tg-foot .tg-foot-menus { display: grid; grid-template-columns: 1fr 2fr;
  gap: var(--space-6); align-items: start; }
/* the source site lets its long legal menu flow into two columns rather than
   giving it its own grid track: `.menu:has(li:nth-child(6)) { columns: 2 }` */
.tg-foot .tg-foot-legal { columns: 2; column-gap: var(--space-6); }
.tg-foot .tg-foot-legal li { break-inside: avoid; }
.tg-foot .tg-foot-break { break-before: column; }
/* `footer ul li { min-height: 3rem }` on the source site */
.tg-foot .tg-foot-menus li { min-height: 3rem; }
.tg-foot .tg-foot-menus ul { margin: 0; padding: 0; list-style: none; }
.tg-foot .tg-foot-menus li { margin: 0; }
.tg-foot .tg-foot-menus a { display: inline-block; padding: var(--space-3) 0;
  color: var(--color-primary); text-decoration: none; font-family: var(--font-heading);
  font-size: .9375rem; font-weight: 700; text-wrap: pretty; }
.tg-foot .tg-foot-menus a:hover { text-decoration: underline; }
/* `footer .footer-menus a[href*="/cancellationandwithdrawal/"]` on the source
   site: white on the brand colour, its radius and card shadow. */
.tg-foot .tg-foot-menus a.tg-foot-filled { display: inline-block;
  margin: var(--space-2) 0; padding: var(--space-3) var(--space-4);
  border-radius: .5rem; color: #ffffff; background: var(--color-primary);
  box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .25); }
.tg-foot .tg-foot-menus a.tg-foot-filled:hover { color: #ffffff;
  text-decoration: none; filter: brightness(1.08); }
.tg-foot .tg-foot-menus a:focus-visible { outline: 3px solid var(--color-focus);
  outline-offset: 3px; border-radius: 4px; }

.tg-foot-copy { max-width: var(--container-max); margin: var(--space-7) auto 0;
  color: var(--color-text); font-family: var(--font-body); font-size: .6875rem;
  text-align: center; }

@media (max-width: 860px) {
  .tg-foot .tg-foot-inner { grid-template-columns: 1fr; justify-items: center;
    text-align: center; }
  .tg-foot-brand { justify-items: center; }
  .tg-foot .tg-foot-menus { grid-template-columns: 1fr; text-align: center; }
  .tg-foot .tg-foot-legal { columns: 1; }
  .tg-foot .tg-foot-break { break-before: auto; }
}
/* ===== lovoo body ===== */
/* Lovoo's homepage sections. The header, the footer and the furniture are the
   shared ones in sections.css; this file is only the middle.

   Colours are brand tokens throughout -- the source's --main-brand is
   #1565C0, --main-black #212121, --light-gray #f3f3f3, all of which this
   brand's stylesheet already defines, so another brand's palette carries
   through with nothing edited here. */

/* ---- hero ---- */
/* Every number measured off the source page rendered locally with its own
   theme stylesheet, not judged by eye: cover 1265x600 with min-height 600px
   and no padding of its own, content column 1024, h1 32px/38.4 weight 700
   white with 20px beneath, sub 16px/24, buttons 174x48 fully round. */
.lv-hero { position: relative; display: grid; place-items: center; isolation: isolate;
  min-height: 600px; overflow: hidden; }
.lv-hero-shot { position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; }
/* The source's overlay is NOT a gradient and not black: it is a flat warm grey
   at half opacity (`has-background-dim`, rgb(137,133,135) at .5), which lifts
   and desaturates the photograph. A black scrim reads far darker and more
   saturated, which is what ours did. */
.lv-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgb(137, 133, 135); opacity: .5; }
.lv-hero-inner { max-width: 64rem; margin: 0 auto; padding: 6rem var(--space-5) 4rem;
  text-align: center; color: #ffffff; }
.lv-hero-title { color: #ffffff; margin: 0 0 20px; font-size: 2rem; line-height: 1.2;
  font-weight: 700; }
.lv-hero-sub { margin: 0 0 20px; font-size: 1rem; line-height: 1.5; }

/* Two store buttons, not one join control: that is how the source sends
   people to the app. `ul[class]` in the brand stylesheet is (0,1,1) and beats
   a lone class, so the centring is written as a descendant. */
.lv-hero .lv-hero-stores { display: flex; flex-wrap: wrap; justify-content: center;
  gap: 24px; margin: 0; padding: 0; list-style: none; }
.lv-hero-store { display: inline-block; padding: 16px 20px; border-radius: 999px;
  background: var(--color-primary); color: #ffffff; text-decoration: none;
  font-family: var(--font-heading); font-size: 1rem; line-height: 1; font-weight: 700; }
.lv-hero-store:hover { filter: brightness(1.08); }
.lv-hero-store:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

/* ---- picture beside text ---- */
.lv-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: var(--space-8); max-width: 64rem; margin: 0 auto; }
.lv-split-flip .lv-split-figure { order: 2; }
.lv-split-shot { width: 100%; height: auto; border-radius: 1rem; }
.lv-split-copy h2 { margin: 0 0 var(--space-5); font-size: 2rem; line-height: 1.15; }
.lv-split-copy p { margin: 0 0 var(--space-4); font-size: 1rem; line-height: 1.6; }
.lv-split-cta { margin-top: var(--space-6); }
.lv-button { display: inline-block; padding: 16px 20px; border-radius: 999px;
  background: var(--color-primary); color: #ffffff; text-decoration: none;
  font-family: var(--font-heading); font-size: 1rem; line-height: 1; font-weight: 700; }
.lv-button:hover { filter: brightness(1.08); }

.lv-pitch { padding: 5rem var(--space-5); background: var(--color-surface); }
.lv-pitch .lv-split-copy h2 { color: var(--color-primary); }

/* ---- the feature band ---- */
/* Measured off the source: the band is `--main-black` rgb(33,33,33) with
   80px above and below, and it holds ONLY the feature cards. The story that
   follows is on the white page, not in the band -- reading it as part of the
   band is what made ours run dark through both. */
.lv-features { padding: 80px var(--space-5); background: var(--color-text); }
.lv-features-title { color: #ffffff; max-width: 64rem; margin: 0 auto 40px;
  font-size: 2rem; line-height: 1.2; font-weight: 700; text-align: center; }
.lv-features .lv-features-list { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; max-width: 64rem; margin: 0 auto; padding: 0; list-style: none; }
/* Each card is a WHITE box standing on the dark band -- radius 24px, the
   theme's own card shadow, and its heading in the brand blue. Ours had the
   text bare on the band, which is the difference the partner spotted. */
.lv-feature { display: flex; flex-direction: column; height: 100%;
  padding: 20px 20px 40px; border-radius: 24px; background: var(--color-surface);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .25); text-align: center; }
/* The screenshots keep their own ratio. No aspect-ratio and no object-fit
   anywhere near them -- forcing a ratio on portraits squashes them and crops
   heads off, which is exactly how this went wrong on a sibling brand. */
.lv-feature-shot { display: block; width: 100%; height: auto; margin: 0 auto 20px;
  border-radius: 8px; }
.lv-feature-heading { color: var(--color-primary); margin: 0 0 20px;
  font-size: 1.25rem; line-height: 1.25; font-weight: 700; }
.lv-feature-copy { margin: 0; color: var(--color-text); font-size: 1rem; line-height: 1.5; }

/* ---- the story, on the white page between the two bands ---- */
.lv-story { padding: 80px var(--space-5); background: var(--color-surface); }
.lv-story .lv-split-copy h2 { color: var(--color-primary); }

/* ---- closing ---- */
.lv-closing { padding: 80px var(--space-5); background: var(--color-text); color: #ffffff; }
.lv-closing-inner { max-width: 48rem; margin: 0 auto; text-align: center; }
.lv-closing-title { color: #ffffff; margin: 0 0 20px; font-size: 2rem;
  line-height: 1.2; font-weight: 700; }
.lv-closing-copy { margin: 0 0 var(--space-4); font-size: 1.0625rem; line-height: 1.6; }
.lv-closing-cta { margin: var(--space-6) 0 0; }
.lv-button-ghost { display: inline-block; padding: 16px 20px; border-radius: 999px;
  background: #ffffff; color: var(--color-text); text-decoration: none;
  font-family: var(--font-heading); font-size: 1rem; line-height: 1; font-weight: 700; }
.lv-button-ghost:hover { filter: brightness(.96); }

/* ---- the nested submenu in the header ---- */
.tg-sub-item { position: relative; }
.tg-sub-trigger { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  list-style: none; padding-block: var(--space-3); margin-block: calc(-1 * var(--space-3)); }
.tg-sub-trigger::-webkit-details-marker { display: none; }
.tg-sub[open] .tg-lang-caret { transform: rotate(-135deg); }
.tg-mast .tg-sub-panel { position: absolute; top: calc(100% + var(--space-5)); left: 0;
  min-width: 14rem; margin: 0; padding: var(--space-3); list-style: none;
  background: var(--color-surface); border-radius: .5rem;
  box-shadow: 0 2px 10px rgba(16, 38, 42, .14); }
.tg-mast .tg-sub-panel li { width: 100%; }
.tg-mast .tg-sub-panel a { display: block; border-radius: .375rem;
  padding: var(--space-2) var(--space-3); white-space: nowrap; }
.tg-mast .tg-sub-panel a:hover { background: var(--color-surface-soft); }

/* The logo keeps its own inks on this brand. `sections.css` inverts it to
   white for a sibling whose mark is a flat wordmark; Lovoo's carries red,
   yellow and blue, and the inversion flattens all three to white. */
.tg-mast-light .tg-mast-mark img { filter: none; }

/* Desktop shows the dropdown, the drawer shows the flat copy. */
.tg-sub-flat { display: none; }

/* Same breakpoint as the rest of the site, so it all changes shape at once. */
@media (max-width: 781px) {
  .lv-split { grid-template-columns: 1fr; gap: var(--space-6); }
  .lv-split-flip .lv-split-figure { order: 0; }
  .lv-features .lv-features-list { grid-template-columns: 1fr; }
  .lv-hero-inner { padding-top: 7rem; }
  /* In the drawer the children are listed flat under a heading, as the source
     has them -- not behind a trigger. The <details> is hidden rather than
     forced open, because a closed one cannot be opened from CSS at all. */
  .tg-sub-item .tg-sub { display: none; }
  .tg-sub-flat { display: block; }
  .tg-sub-flat-label { margin: 0 0 var(--space-3); font-weight: 700; }
  .tg-mast .tg-sub-flat-list { margin: 0; padding: 0 0 0 var(--space-5); list-style: none; }
  .tg-mast .tg-sub-flat-list li { margin-bottom: var(--space-3); }
}
/* === /page /tr === */