/* Property landing page (landing_property.html) - only what differs from
   landing.css. Scoped under .lp-property so the base page is untouched. */

.lp-property {
  --why-img-filter: brightness(.82) saturate(.9); --why-wash-a: 66%; --why-wash-b: 58%; --why-glow: rgba(30, 26, 22, .78);
}
:root[data-theme="light"] .lp-property {
  --why-img-filter: brightness(.62) saturate(.85); --why-wash-a: 52%; --why-wash-b: 40%; --why-glow: rgba(246, 244, 239, .86);
}

/* Full-bleed photo behind a section, washed into the page colour. */
.lp-prop-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lp-prop-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-prop-bg::after { content: ""; position: absolute; inset: 0; }
.lp-prop-hero-bg img { object-position: 40% 78%; }
/* Dark theme: no wash across the top (it read as a shadow over the photo) -
   just a soft dark patch behind the text block, so the headline still reads
   over bright sky, and the fade into the page colour at the bottom edge. */
.lp-prop-hero-bg::after {
  background:
    radial-gradient(48% 40% at 50% 30%, color-mix(in srgb, var(--surface-page) 55%, transparent) 0%, color-mix(in srgb, var(--surface-page) 25%, transparent) 60%, transparent 100%),
    linear-gradient(180deg, transparent 70%, var(--surface-page) 100%);
}
.lp-property .lp-hero h1,
.lp-property .lp-hero .lead,
.lp-property .lp-hero-note,
.lp-property .lp-prop-label { text-shadow: 0 1px 12px rgba(10, 9, 8, .45); }
/* Gradient-clipped text paints its shadow over the gradient, muddying it. */
.lp-property .lp-hero h1 .text-gradient { text-shadow: none; }
:root[data-theme="light"] .lp-property .lp-hero h1,
:root[data-theme="light"] .lp-property .lp-hero .lead,
:root[data-theme="light"] .lp-property .lp-hero-note,
:root[data-theme="light"] .lp-property .lp-prop-label { text-shadow: none; }
/* Light theme (the design's): two soft fades behind the headline (centre and
   top-left), and a light vertical wash landing on the page colour at the
   bottom edge. */
:root[data-theme="light"] .lp-prop-hero-bg::after {
  background:
    radial-gradient(42% 26% at 50% 21%, color-mix(in srgb, var(--surface-page) 82%, transparent) 0%, color-mix(in srgb, var(--surface-page) 55%, transparent) 55%, transparent 100%),
    radial-gradient(85% 60% at 22% 0%, color-mix(in srgb, var(--surface-page) 88%, transparent) 0%, color-mix(in srgb, var(--surface-page) 55%, transparent) 45%, transparent 75%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface-page) 30%, transparent) 0%,
      color-mix(in srgb, var(--surface-page) 12%, transparent) 40%,
      color-mix(in srgb, var(--surface-page) 22%, transparent) 70%,
      var(--surface-page) 100%);
}
.lp-property .lp-hero-content { position: relative; z-index: 1; }
/* The terms line takes the style of the "One link · 3 video styles" label
   (.lp-prop-label): small mono caps in --text-body, near-white in the dark
   theme and dark ink in light. */
.lp-property .lp-hero-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-body);
}
.lp-property .lp-hero-note a { color: inherit; }
.lp-property .lp-hero-note a:hover { color: var(--color-primary); }

/* No overflow:hidden here - it clipped the phone's drop shadow into a hard
   line at the section edge. .lp-prop-bg clips the photo itself. */
.lp-property .lp-usps { position: relative; }
/* The light theme's edge vignette on .lp-usps (colors.light.css) ends in a
   dark band at the section's bottom edge; the photo layer replaces it here. */
:root[data-theme="light"] .lp-property .lp-usps { background: none; }
.lp-prop-why-bg img { object-position: 50% 45%; filter: var(--why-img-filter); }
/* Fade the whole layer out at the bottom rather than ending on an opaque page
   colour, so the fixed background star below shows through without a seam. */
.lp-prop-why-bg { -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent); mask-image: linear-gradient(180deg, #000 75%, transparent); }
.lp-prop-why-bg::after {
  background: linear-gradient(180deg,
    var(--surface-page) 0%,
    color-mix(in srgb, var(--surface-page) var(--why-wash-a), transparent) 14%,
    color-mix(in srgb, var(--surface-page) var(--why-wash-b), transparent) 60%,
    color-mix(in srgb, var(--surface-page) 80%, transparent) 86%);
}
.lp-property .lp-usps-inner { position: relative; }
/* Soft glow behind the heading and the card grid so text stays readable over the photo. */
.lp-property .lp-usps-head,
.lp-property .lp-usps-grid { position: relative; isolation: isolate; }
.lp-property .lp-usps-head::before,
.lp-property .lp-usps-grid::before { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.lp-property .lp-usps-head::before { left: 50%; top: 50%; width: 150%; height: 220%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--why-glow), transparent); filter: blur(8px); }
.lp-property .lp-usps-grid::before { inset: -6% -8%; background: radial-gradient(closest-side, var(--why-glow) 0%, var(--why-glow) 45%, transparent 100%); filter: blur(10px); }

/* URL field: fully rounded pill, a touch wider. */
.lp-property .lp-hero-url { width: min(600px, 100%); }
@media (min-width: 521px) { .lp-property .lp-hero-url { padding-left: 20px; } }

/* Three style tiles: two 9:16 reels and one 16:9, all the same height. */
.lp-prop-diagram { max-width: 1080px; margin: 52px auto 0; }
.lp-prop-label { margin-bottom: var(--space-4); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-body); text-align: center; }
/* EU AI Act label under the USP phone video (EU visitors only). Absolute so
   the phone stays centred against the USP columns; the stacked mobile layout
   makes room for it below. */
.lp-phone-ai { position: absolute; top: 100%; left: -40px; right: -40px; margin: 14px 0 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-body); text-align: center; }
@media (max-width: 900px) { .lp-phone:has(.lp-phone-ai:not([hidden])) { margin-bottom: 44px; } }
.lp-prop-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 3.16fr); gap: var(--space-4); align-items: start; }
/* Dark behind the video, not --surface-sunken: at a fractional tile width the
   video can fall a pixel short of the rounded edge, and in the light theme
   that sliver showed as a white border. The video also overlaps by 1px. */
.lp-prop-row .lp-reel-tile { justify-content: flex-start; background: var(--coal-950); border: none; box-shadow: none; }
.lp-prop-row .lp-reel-tile video { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); }
.lp-prop-row .lp-reel-tile.wide { aspect-ratio: 16 / 9; }
.lp-prop-caption { max-width: 1080px; margin: var(--space-3) auto 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); text-align: center; }

.lp-prop-mobile { display: none; }
.lp-prop-mobile .lp-mobile-cycle { width: 100%; max-width: 300px; margin: 0 auto; background: var(--coal-950); border: none; box-shadow: none; }
.lp-prop-mobile .lp-mobile-layer { justify-content: flex-start; padding: 10px; }
.lp-prop-mobile .lp-mobile-layer video { background: var(--coal-950); }
.lp-prop-mobile .lp-mobile-dots { justify-content: center; }

/* Phone sound toggle: same badge as the base page's muted indicator, but clickable. */
.lp-prop-sound { z-index: 3; width: 34px; height: 34px; padding: 0; border: none; cursor: pointer; background: rgba(10, 9, 8, .5); }
.lp-prop-sound:hover { background: rgba(10, 9, 8, .7); }
.lp-prop-sound .on,
.lp-prop-sound.is-on .off { display: none; }
.lp-prop-sound.is-on .on { display: block; }

@media (max-width: 760px) {
  .lp-prop-hero-bg img { object-position: 50% 35%; }
  .lp-prop-row { display: none; }
  .lp-prop-mobile { display: block; }
  .lp-prop-label { margin-bottom: 10px; font-size: 10px; }
}