/* ============================================================
   PRO DEVELOPERY — marketing landing page styles
   ============================================================ */

/* ── Tiny font ──────────────────────────────────────────────── */
@font-face {
  font-family: 'Tiny';
  src: url('../fonts/tiny/Tiny-Thin.woff2') format('woff2');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Tiny';
  src: url('../fonts/tiny/Tiny-ExtraLight.woff2') format('woff2');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Tiny';
  src: url('../fonts/tiny/Tiny-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Tiny';
  src: url('../fonts/tiny/Tiny-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Tiny';
  src: url('../fonts/tiny/Tiny-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Tiny';
  src: url('../fonts/tiny/Tiny-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Tiny';
  src: url('../fonts/tiny/Tiny-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Tiny';
  src: url('../fonts/tiny/Tiny-ExtraBold.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

.font-tiny { font-family: 'Tiny', sans-serif; }
.font-literata { font-family: 'Literata', Georgia, serif; }

/* ── Global ──────────────────────────────────────────────────── */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }

/* ── Selection ───────────────────────────────────────────────── */
::selection { background-color: #262626; color: #fff; }

/* ── Scroll reveal ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── Hero fade-in ────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-animate { animation: fadeUp 0.7s ease both; }

/* ── Tabs ────────────────────────────────────────────────────── */
.tab-btn { transition: background-color 0.2s ease; }
.tab-label { color: rgb(82 82 82); transition: color 0.2s ease; }
.tab-btn.active .tab-label { color: rgb(38 38 38); }
.tab-btn:hover .tab-label { color: rgb(38 38 38); }
.tab-desc { color: rgb(82 82 82); transition: color 0.2s ease; }
.tab-btn.active .tab-desc { color: rgb(38 38 38); }
.tab-btn:hover .tab-desc { color: rgb(38 38 38); }
.tab-btn.active { background-color: #ffffff; }

/* ── Same-height tab panels (grid stacking) ─────────────────── */
#panels-outer { display: grid; }
#panels-outer .tab-panel {
  grid-area: 1 / 1;
  opacity: 1;
  transition: opacity 0.5s ease;
  pointer-events: auto;
}
#panels-outer .tab-panel.inactive {
  opacity: 0;
  pointer-events: none;
}

/* Lišta menu při scrollu + hamburger: /css/nav.css (načítá ho catalogue/views/parts/nav.php) */

/* --- Nav over the dark developer hero (/pro-developery, nav.php $navOverHero) ---
   .is-over is server-rendered and toggled by pro-developery.js while the hero is
   under the nav: frosted + white. Any open menu (.is-menu-open from js/nav.js) forces the solid state. */
#nav.nav-over-hero,
#nav.nav-over-hero a,
#nav.nav-over-hero button,
#nav.nav-over-hero .nav-hamburger span,
#nav.nav-over-hero .nav-logo,
#nav.nav-over-hero .nav-logo-light {
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease,
              opacity 0.25s ease, box-shadow 0.25s ease, backdrop-filter 0.25s ease;
}
#nav.nav-over-hero .nav-logo-light { opacity: 0; }
#nav.nav-over-hero.is-over:not(.is-menu-open) {
  background-color: transparent;       /* at the very top: seamless with the sky */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  & .nav-logo { opacity: 0; }
  & .nav-logo-light { opacity: 1; }
  & .nv-top, & .nv-login { color: rgba(255, 255, 255, 0.82); }
  & .nv-top:hover, & .nv-login:hover, & .nv-top.is-current { color: #fff; }
  & .nv-chev { color: rgba(255, 255, 255, 0.6); }
  & .nav-btn-ghost { border-color: rgba(255, 255, 255, 0.32); color: #fff; }
  & .nav-btn-ghost:hover { background-color: rgba(255, 255, 255, 0.1); }
  & .nav-btn-solid { background-color: #fff; color: #0f1c45; }
  & .nav-btn-solid:hover { background-color: rgba(255, 255, 255, 0.88); }
  & .nav-hamburger span { background-color: #fff; }
}
/* frosted once content scrolls under the bar: the same white glass as the hero cards,
   see-through like the 82 % white bar the rest of the site uses */
#nav.nav-over-hero.is-over.nav-scrolled:not(.is-menu-open) {
  background-color: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.18);
}


/* ── Progress bar ────────────────────────────────────────────── */
.tab-progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  width: 0%;
  background-color: rgb(10 10 10);
}

/* ── Testimonial block ───────────────────────────────────────── */
.testimonial-block {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 1024px) {
  .testimonial-block {
    min-height: 400px;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* ── Eyebrow comet badge ──────────────────────────────────────── */
.eyebrow-comet-wrapper {
  position: relative;
  display: block;
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
  background: #fafafa;
  border-radius: 12px;
  transition: background-color 0.2s ease;
  text-decoration: none;
}

a.eyebrow-comet-wrapper:hover {
  background: #f5f5f5;
}

.eyebrow-comet-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* ── Headings ────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  text-wrap: pretty;
}

/* ── Máte/nemáte section titles + track-record stats ─────────── */
.mate-section-title,
.stat-value {
  font-size: 1.75rem;
  line-height: 1.25;
}

/* ── Hero title ──────────────────────────────────────────────── */
.hero-title {
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  line-height: 1.15;
}

/* ── Tři rychlé kroky heading ────────────────────────────────── */
.steps-h2 {
  font-size: 40px;
  line-height: 1.2;
}

.steps-subtitle {
  font-size: 28px;
}

@media (min-width: 1024px) {
  .steps-heading-grid {
    height: 320px;
    align-items: end;
  }
}

/* ── Vertical page border lines ──────────────────────────────── */
#page-border-lines {
  position: fixed;
  top: calc(4rem + 1px);
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
}
#page-border-lines .pbl {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #e5e5e5;
}
.pbl-left-inner  { left:  calc(50% - 40rem - 16px); }
.pbl-left-outer  { left:  calc(50% - 40rem - 32px); }
.pbl-right-inner { right: calc(50% - 40rem - 16px); }
.pbl-right-outer { right: calc(50% - 40rem - 32px); }

/* ── Horizontal rules: align to the inner pair of vertical page
   border lines above (40rem+16px each side of center = 82rem) ── */
@media (min-width: 1280px) {
  .pdev-frame-w {
    max-width: 82rem;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Ceník: feature comparison table ────────────────────────── */
.pdev-compare-table {
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 42.5rem;
}
.pdev-compare-sticky {
  position: sticky;
  left: 0;
  z-index: 1;
}
/* Column dividers — border-right on the sticky "Funkce" column so the line
   scrolls with it instead of drifting away from its right edge; border-left
   on the four plan columns, which scroll together with the table body. */
.pdev-compare-col-first {
  border-right: 1px solid #e5e5e5;
}
.pdev-compare-col {
  border-left: 1px solid #e5e5e5;
}
/* Free/Plus/Pro/Pro se správou — four equal-width columns via table-layout:
   fixed; the "Funkce" column (no width set) takes the remaining space. */
.pdev-compare-price-col {
  width: 15%;
}
/* Left-edge alignment — the table itself spans the full 82rem decorative
   frame (so row lines/section backgrounds touch it), but the Funkce
   column's text gets a 2.5rem (40px) left inset so it doesn't sit flush
   against the frame line. Left-aligned text, so padding doesn't distort
   anything. Deliberately NOT mirrored on the right: an equivalent
   right-side inset/spacer on "Pro se správou" only would have made it the
   one column carrying extra padding Free/Plus/Pro don't have, so it read
   as wider than the other three even with its checkmark centered. All four
   plan columns share identical px-4 padding instead — same width, same
   centering, no exceptions — and simply sit closer to the frame's right
   edge than Funkce does to its left edge. */
.pdev-compare-edge-l {
  padding-left: 2.5rem;
}

/* ── Test webu: URL prefix / trust row ──────────────────────── */
.site-audit-url-prefix {
  user-select: none;
  -webkit-user-select: none;
}

/* ── Test webu: wizard screens — one stage, one full-viewport
   screen (nav is h-16 + 1px border = 65px). Vertically centered;
   grows past min-height naturally when content is taller. ────── */
.site-audit-screen {
  min-height: calc(100dvh - 65px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media (prefers-reduced-motion: no-preference) {
  .site-audit-screen-enter { animation: siteAuditScreenIn 0.45s ease both; }
}
@media (prefers-reduced-motion: reduce) {
  .site-audit-screen-enter { animation: none; }
}
@keyframes siteAuditScreenIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Test webu: blueprint progress graphic ───────────────────
   4 rooms = the 4 check buckets. A scanline sweeps left-to-right
   in step with real crawl progress (--audit-progress custom
   property, set from JS); rooms light up at 25/50/75/100%
   thresholds so progress reads as concrete milestones, not just
   a percentage. The idle pulse keeps it feeling alive between
   polling ticks. ─────────────────────────────────────────────── */
.site-audit-blueprint {
  position: relative;
  aspect-ratio: 16 / 10;
  max-width: 26rem;
  margin-inline: auto;
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: #fafafa;
  border: 1px solid #e5e5e5;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 19px, #ededed 20px),
    repeating-linear-gradient(90deg, transparent, transparent 19px, #ededed 20px);
}
.site-audit-blueprint-grid {
  position: absolute;
  inset: 0.75rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
}
.site-audit-blueprint-room {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 0.5rem;
  border: 1px dashed #a3a3a3;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.6);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}
.site-audit-blueprint-room-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #a3a3a3;
  transition: color 0.4s ease;
}
.site-audit-blueprint-room.is-lit {
  background-color: #ffffff;
  border-color: #262626;
  border-style: solid;
}
.site-audit-blueprint-room.is-lit .site-audit-blueprint-room-label {
  color: #262626;
}
.site-audit-blueprint-scanline {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--audit-progress, 0%);
  width: 3px;
  background: linear-gradient(180deg, transparent, #262626 15%, #262626 85%, transparent);
  box-shadow: 0 0 12px 2px rgba(38, 38, 38, 0.3);
  transition: left 0.5s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .site-audit-blueprint-scanline { animation: siteAuditScanPulse 1.6s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .site-audit-blueprint-scanline { transition: none; }
}
@keyframes siteAuditScanPulse {
  0%, 100% { box-shadow: 0 0 12px 2px rgba(38, 38, 38, 0.22); }
  50%      { box-shadow: 0 0 20px 4px rgba(38, 38, 38, 0.45); }
}

/* ── Test webu: progress block ──────────────────────────────── */
.site-audit-progress-track {
  height: 6px;
  border-radius: 999px;
  background-color: #e5e5e5;
  overflow: hidden;
}
.site-audit-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background-color: #262626;
  transition: width 0.3s ease;
}

.site-audit-progress-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  max-height: 9.75rem; /* ~5 visible rows */
  overflow: hidden;
}
.site-audit-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.8125rem;
  color: #737373;
}
.site-audit-progress-row:last-child { border-bottom: none; }
.site-audit-progress-feed-url {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-audit-progress-feed-status {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: #a3a3a3;
}
@media (prefers-reduced-motion: no-preference) {
  .site-audit-progress-row {
    animation: siteAuditRowIn 0.3s ease both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-audit-progress-row { animation: none; }
}
@keyframes siteAuditRowIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Test webu: bucket status colors ────────────────────────── */
.site-audit-buckets { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .site-audit-buckets { grid-template-columns: 1fr 1fr; }
}
.site-audit-bucket {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
  border-radius: 0.75rem;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  padding: 1rem;
}
.site-audit-bucket-stripe {
  width: 4px;
  flex-shrink: 0;
  border-radius: 999px;
  background-color: #d4d4d4;
}
.site-audit-bucket-body { min-width: 0; }

/* Status stripe modifiers — reuse the same 3 status colors everywhere in
   this tool (no new semantic colors): crit/warn/ok. */
.site-audit-bucket-stripe.is-crit { background-color: #dc2626; }
.site-audit-bucket-stripe.is-warn { background-color: #d97706; }
.site-audit-bucket-stripe.is-ok   { background-color: #16a34a; }

/* Progress feed HTTP-status color — same crit/warn/ok vocabulary applied to
   the per-request status code in the crawl progress feed (2xx/3xx/4xx+). */
.site-audit-progress-feed-status.is-ok { color: #16a34a; }
.site-audit-progress-feed-status.is-warn { color: #d97706; }
.site-audit-progress-feed-status.is-crit { color: #dc2626; }

/* ── Test webu: krokový indikátor ────────────────────────────
   Na všech obrazovkách flow. Poslední krok (e-mail) tak působí jako
   dokončení rozdělané práce, ne jako nová žádost. ─────────────── */
.site-audit-steps {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #a3a3a3;
}
.site-audit-step-dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 999px;
  background-color: #e5e5e5;
}
/* Hotový krok = plná tečka, aktuální = jen obrys. Aby tři plné tečky
   neříkaly „hotovo“ ve chvíli, kdy popisek říká „zbývá poslední krok“. */
.site-audit-step-dot.is-done   { background-color: #262626; }
.site-audit-step-dot.is-active {
  background-color: transparent;
  box-shadow: inset 0 0 0 2px #262626;
}
.site-audit-steps-label { margin-left: 0.25rem; }

/* Hero a průběh centrují indikátor, uvnitř brány sedí vlevo v kartě */
#site-audit-screen-hero .site-audit-steps,
#site-audit-screen-progress .site-audit-steps {
  justify-content: center;
}

/* ── Test webu: manifest rozboru ─────────────────────────────
   Vyčísluje rozsah a strukturu rozboru, nikdy jeho obsah. ────── */
.site-audit-manifest {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.site-audit-manifest li {
  position: relative;
  padding-left: 1.375rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #525252;
}
.site-audit-manifest li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background-color: #d4d4d4;
}

/* ── Test webu: ukázka e-mailu ───────────────────────────────
   Vyšší náhled se změknutým spodním okrajem — čte se jako „pokračuje“,
   ne jako useknutý konec. ────────────────────────────────────── */
.site-audit-sample-frame { position: relative; }
.site-audit-sample-iframe {
  display: block;
  height: 560px;
  border: 0;
}
.site-audit-sample-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6rem;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
}
@media (max-width: 639px) {
  .site-audit-sample-iframe { height: 380px; }
}

/* ── Ověřený profil ───────────────────────────────────────────
   Section H2 scale — named replacement for the
   text-[clamp(26px,3vw,32px)] leading-[1.2] arbitrary value used on
   the other /pro-developery pages (Tailwind CDN arbitrary values are
   unreliable). ─────────────────────────────────────────────────── */
.pdev-section-title {
  font-size: clamp(1.625rem, 3vw, 2rem);
  line-height: 1.2;
}

/* Anchor targets under the 4rem sticky nav */
.pdev-anchor { scroll-margin-top: 4rem; }

/* Full-bleed hairline under a two-heading row (#web pattern) when the
   headings are interleaved with their content on mobile. Sits at the
   bottom of the h-24 (6rem) desktop heading cells. */
.pdev-heading-rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 6rem;
  height: 1px;
  background-color: #e5e5e5;
}

/* Footnote index (¹ ²) pointing to the sources list above the footer */
.pdev-footnote {
  font-size: 0.65em;
  vertical-align: super;
  line-height: 0;
  margin-left: 0.1em;
  color: #a3a3a3;
}

/* #srovnani: checks that only Developer+ has tick in one by one when the
   section first scrolls into view. The pending state is added from JS, so
   without JS (or with reduced motion) every check is simply visible. */
.pdev-tick {
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pdev-ticks-pending .pdev-tick {
  opacity: 0;
  transform: scale(0.6);
}
@media (prefers-reduced-motion: reduce) {
  .pdev-tick { transition: none; }
  .pdev-ticks-pending .pdev-tick { opacity: 1; transform: none; }
}

/* ── Hero USP strip ───────────────────────────────────────────
   2 × 2 on mobile, 4 in a row from lg. Hairline dividers with small
   registration crosses where a divider meets a horizontal line, like
   marks on an architectural drawing. Line centres sit on half pixels,
   hence the -4px / -5px offsets for the 9px crosses. ─────────────── */
.pdev-usp {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pdev-usp-cell {
  position: relative;
  padding: 1.75rem 1.25rem 1.75rem 0;
}
.pdev-usp-cell:nth-child(even) {
  border-left: 1px solid #e5e5e5;
  padding-left: 1.25rem;
  padding-right: 0;
}
.pdev-usp-cell:nth-child(n+3) { border-top: 1px solid #e5e5e5; }

.pdev-usp-cell::before,
.pdev-usp-cell::after {
  position: absolute;
  left: -4px;
  width: 9px;
  height: 9px;
  pointer-events: none;
  background:
    linear-gradient(#a3a3a3, #a3a3a3) center / 1px 100% no-repeat,
    linear-gradient(#a3a3a3, #a3a3a3) center / 100% 1px no-repeat;
}
.pdev-usp-cell:nth-child(2)::before { content: ''; top: -5px; }
.pdev-usp-cell:nth-child(4)::before { content: ''; top: -4px; }
.pdev-usp-cell:nth-child(4)::after  { content: ''; bottom: -5px; }

@media (min-width: 1024px) {
  .pdev-usp { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pdev-usp-cell:nth-child(n) {
    padding: 2.25rem 2rem;
    border-top: 0;
  }
  .pdev-usp-cell:first-child { padding-left: 0; }
  .pdev-usp-cell:last-child  { padding-right: 0; }
  .pdev-usp-cell:nth-child(n+2) { border-left: 1px solid #e5e5e5; }
  .pdev-usp-cell:nth-child(n+2)::before { content: ''; top: -5px; }
  .pdev-usp-cell:nth-child(n+2)::after  { content: ''; bottom: -5px; }
}

/* ── Úvodní video (#video) ────────────────────────────────────
   Click-to-load YouTube. Poster = our webp; the iframe is inserted
   underneath it on click and the poster crossfades out. Transform/
   opacity only. The play button sits in a 0×0 positioner (.pdev-play-pos)
   that JS moves with the cursor, so the button's own hover scale can
   keep its CSS transition without fighting the per-frame lerp. ────── */
.pdev-video-poster {
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.pdev-video-poster.is-leaving {
  opacity: 0;
  pointer-events: none;
}
.pdev-video-img {
  transform-origin: 50% 50%;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.pdev-video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Bottom scrim so the caption stays readable on the light poster */
.pdev-video-shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32%;
  pointer-events: none;
  background: linear-gradient(to top, rgb(10 10 10 / 0.42), rgb(10 10 10 / 0.12) 50%, rgb(10 10 10 / 0));
}

.pdev-video-caption {
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
}
.pdev-video-caption-text {
  font-size: 0.8125rem;
  line-height: 1.25rem;
  text-shadow: 0 1px 2px rgb(10 10 10 / 0.25);
}
@media (min-width: 640px) {
  .pdev-video-caption { left: 1.25rem; right: 1.25rem; bottom: 1.25rem; }
  .pdev-video-caption-text { font-size: 0.875rem; }
}
@media (min-width: 1024px) {
  .pdev-video-caption { left: 1.5rem; right: 1.5rem; bottom: 1.5rem; }
}

/* Play button */
.pdev-play-pos {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 10;
  width: 0;
  height: 0;
  will-change: transform;
}
.pdev-play {
  position: absolute;
  left: -2rem;
  top: -2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  background-color: #fff;
  color: #0a0a0a;
  box-shadow: 0 12px 32px -8px rgb(10 10 10 / 0.35), 0 0 0 1px rgb(10 10 10 / 0.05);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 640px) {
  .pdev-play { left: -2.5rem; top: -2.5rem; width: 5rem; height: 5rem; }
}
.pdev-play-icon {
  width: 36%;
  height: 36%;
  margin-left: 6%; /* optical centre of the triangle */
  fill: currentColor;
  transition: opacity 0.2s ease;
}
/* Soft halo pulse — stops once the poster is hovered or the button focused */
.pdev-play::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: #fff;
  opacity: 0;
  animation: pdevPlayPulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes pdevPlayPulse {
  0%        { opacity: 0.35; transform: scale(1); }
  80%, 100% { opacity: 0;    transform: scale(1.6); }
}
.pdev-play:focus-visible::before { animation: none; }
@media (hover: hover) {
  .pdev-video-poster:hover .pdev-play::before { animation: none; }
  .pdev-video-poster:hover .pdev-play { transform: scale(1.04); }
  .pdev-video-poster:hover .pdev-video-img { transform: scale(1.02); }
}

/* Loading state between click and the iframe's first paint */
.pdev-play-spinner {
  position: absolute;
  inset: 30%;
  border-radius: 9999px;
  border: 2px solid rgb(10 10 10 / 0.12);
  border-top-color: #0a0a0a;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.is-loading .pdev-play::before { animation: none; }
.is-loading .pdev-play-icon { opacity: 0; }
.is-loading .pdev-play-spinner {
  opacity: 1;
  animation: pdevSpin 0.8s linear infinite;
}
@keyframes pdevSpin { to { transform: rotate(360deg); } }

/* Scroll entrance — scroll-driven where supported, otherwise the
   page's .reveal fade (the element carries both classes). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pdev-video-enter.reveal {
      opacity: 1;
      transform: none;
      transition: none;
      transform-origin: 50% 100%;
      animation: pdevVideoEnter linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }
}
@keyframes pdevVideoEnter {
  from { opacity: 0.6; transform: translateY(24px) scale(0.94); }
  to   { opacity: 1;   transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pdev-video-enter.reveal { opacity: 1; transform: none; transition: none; }
  .pdev-play,
  .pdev-video-img,
  .pdev-video-poster { transition: none; }
  .pdev-play::before { animation: none; }
  .pdev-video-poster:hover .pdev-play,
  .pdev-video-poster:hover .pdev-video-img { transform: none; }
}

/* Metric-matched Arial stand-in for Inter: the hero copy wraps the same before and
   after the web font swaps in, so the stage below it doesn't shift (CLS). */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107.1%;
  ascent-override: 90.4%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}
/* Display variant for the hero H1 (weight 500, −0.035em): Arial runs ~8 % wider there,
   measured with the real H1 copy → 98.8 % keeps the H1 on the same number of lines. */
@font-face {
  font-family: 'Inter Display Fallback';
  src: local('Arial');
  size-adjust: 98.8%;
  ascent-override: 98%;
  descent-override: 24.4%;
  line-gap-override: 0%;
}

/* ============================================================
   DEVELOPER HERO — catalogue/views/parts/hero-dev.php
   Navy-graded video = approved palette exception, hero only; the UI
   layered on top is white glass (white scale + one amber/green dot).
   Geometry: the stage overlaps the copy by the sky above the helmet
   (helmet top sits at 19 % of the 16:9 frame), so the H1 always
   clears the person. The sky itself is scaled + lifted (.hdev-sky)
   so the crane rises behind the person and bleeds up behind the copy.
   ============================================================ */
.hdev {
  --hdev-ink: #fff;
  --hdev-ink-soft: rgba(255, 255, 255, 0.94);
  --hdev-ink-muted: rgba(255, 255, 255, 0.8);
  --hdev-navy: 15, 28, 69;             /* = top row of the graded sky (#0f1c45) */
  --hdev-shade: 8, 14, 38;             /* deep navy for scrims + shadows */
  --hdev-fill: rgba(255, 255, 255, 0.14);  /* raised panels inside glass (light on light, never dark) */
  --hdev-fill-2: rgba(255, 255, 255, 0.24);
  --hdev-r: 16px;                      /* card radius */
  --hdev-p: 0.625rem;                  /* card padding */
  --hdev-r-in: 6px;                    /* = card radius − card padding (concentric) */
  --hdev-in: 0.875rem;                 /* content inset from the card edge (= padding + inner pad) */
  --hdev-card-w: min(21rem, 25%);
  --hdev-rail-w: 4.5rem;
  --hdev-gap: 0.75rem;
  --hdev-clear: 2.5rem;                /* gap between the CTA row and the helmet top */
  --hdev-nav-h: 4rem;                  /* = #nav h-16; the hero slides up under it */
  --hdev-sky-k: 1.3;                   /* sky scale vs the stage frame; bottom stays aligned */
  --hdev-ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 2; /* above the fixed decorative frame lines */
  overflow: hidden;
  isolation: isolate;
  font-family: InterVariable, Inter, 'Inter Fallback', sans-serif;
  color: var(--hdev-ink);
  background: rgb(var(--hdev-navy));   /* the sky fades into this at its top edge */
}
/* Sits under the transparent nav (nav.php, $navOverHero) */
#nav.nav-over-hero ~ .hdev { margin-top: calc(-1 * var(--hdev-nav-h)); }

/* --- Copy --- */
.hdev-copy {
  position: relative;
  z-index: 4;
  padding: calc(var(--hdev-nav-h) + clamp(3rem, 6vw, 5rem)) 1.5rem 0;
  text-align: center;
}
/* Readability shade: full-bleed band behind nav + copy, eased out just above the helmet */
.hdev-copy::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 calc(-1 * var(--hdev-clear) - 1rem);
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(var(--hdev-shade), 0.3) 0,
    rgba(var(--hdev-shade), 0.3) calc(100% - var(--hdev-clear) - 1rem),
    rgba(var(--hdev-shade), 0.18) calc(100% - var(--hdev-clear) * 0.55 - 0.6rem),
    rgba(var(--hdev-shade), 0.06) calc(100% - var(--hdev-clear) * 0.2 - 0.3rem),
    rgba(var(--hdev-shade), 0) 100%);
}
.hdev-title {
  max-width: 20ch;
  margin-inline: auto;
  font-family: InterVariable, Inter, 'Inter Display Fallback', sans-serif;
  font-size: clamp(2rem, 1rem + 3.1vw, 3.5rem);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.032em;
  text-wrap: balance;
  color: var(--hdev-ink);
}
.hdev-sub {
  max-width: 46ch;
  margin: 1rem auto 0;
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.1875rem);
  line-height: 1.5;
  text-wrap: balance;
  color: var(--hdev-ink-soft);
}
@media (min-width: 768px) {
  .hdev-title { max-width: 30ch; } /* two lines from tablet up */
  .hdev-sub { max-width: none; white-space: nowrap; } /* one line from tablet up */
}
.hdev-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  margin-top: 2rem;
}
.hdev-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.125rem;
  border-radius: 8px;
  background: #fff;
  color: rgb(var(--hdev-navy));
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(var(--hdev-shade), 0.2), 0 8px 24px -8px rgba(var(--hdev-shade), 0.5);
  transition: background-color 0.15s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}
.hdev-cta:hover { background: rgba(255, 255, 255, 0.9); }
.hdev-cta:active { transform: scale(0.97); }
.hdev :focus-visible { outline-color: var(--hdev-ink); }

/* --- Stage + media --- */
.hdev-stage {
  position: relative;
  aspect-ratio: 16 / 8.46;             /* the person frame: top 94 % of a 16:9 frame (foot room for the proof line) */
  max-height: 62rem;
  margin-top: calc(var(--hdev-clear) - 10.6875%); /* 10.6875 % of width = 19 % of a 16:9 frame */
}
.hdev-media {
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Sky: k× the frame, centred, bottom-aligned with the stage — the crane jib climbs to helmet
   height and the sky's top edge reaches up behind the copy (faded into the section navy).
   % margins resolve against the stage width, so this tracks the frame at every width. */
.hdev-sky {
  position: absolute;
  top: 0;
  left: calc((1 - var(--hdev-sky-k)) * 50%);
  width: calc(var(--hdev-sky-k) * 100%);
  aspect-ratio: 16 / 9;
  margin-top: calc((0.94 - var(--hdev-sky-k)) * 56.25%); /* 0.94 = stage height in frames */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
}
/* Navy vignette on the card lanes + bottom: keeps white type on white glass ≥ 4.5:1.
   Faded in from the stage top (cards start at 22 %) so it never draws a seam. */
.hdev-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 24%);
  background:
    radial-gradient(60% 34% at 50% 100%, rgba(var(--hdev-shade), 0.42), rgba(var(--hdev-shade), 0) 100%), /* soft pool under the proof line */
    linear-gradient(to bottom, rgba(var(--hdev-shade), 0) 50%, rgba(var(--hdev-shade), 0.34) 100%),
    linear-gradient(90deg,
    rgba(var(--hdev-shade), 0.42) 0%,
    rgba(var(--hdev-shade), 0.26) 20%,
    rgba(var(--hdev-shade), 0) 34%,
    rgba(var(--hdev-shade), 0) 66%,
    rgba(var(--hdev-shade), 0.3) 80%,
    rgba(var(--hdev-shade), 0.42) 100%);
}
.hdev-poster,
.hdev-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
.hdev-video {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.hdev.is-video-on .hdev-video { opacity: 1; }
/* Person cutout in front of the sky video. Placed in frame-width units (margin-top %
   resolves against width) so it tracks the 16:9 frame: helmet top at 19 % of the frame,
   helmet 21.3 % of the frame wide, centred — same for every variant (build_person.py). */
.hdev-person {
  position: absolute;
  top: 0;
  left: 23.34%;
  width: 48.46%;
  margin-top: 10.6875%;
}
.hdev-person img { display: block; width: 100%; height: auto; }

/* --- Cards layer --- */
.hdev-cards {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.hdev-col {
  position: absolute;
  top: 22%;
  display: flex;
  flex-direction: column;
  gap: var(--hdev-gap);
}
/* both columns share a top line and card width; the rail adds its own width on the left */
.hdev-col--left  { left: 3.5%;  width: calc(var(--hdev-card-w) + var(--hdev-rail-w) + var(--hdev-gap)); align-items: flex-start; }
.hdev-col--right { right: 3.5%; width: var(--hdev-card-w); align-items: flex-end; }

/* White glass: a light white veil (brighter top-left, like light falling on it), heavy blur
   with a saturation lift so the navy sky glows through, a bright 1px edge, soft navy depth. */
.hdev-glass {
  position: relative;
  color: var(--hdev-ink);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.12) 55%, rgba(255, 255, 255, 0.1) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border-radius: var(--hdev-r);
  text-shadow: 0 1px 2px rgba(var(--hdev-shade), 0.22); /* vibrancy: keeps white type crisp on light glass */
  box-shadow:
    0 1px 2px rgba(var(--hdev-shade), 0.08),
    0 20px 40px -22px rgba(var(--hdev-shade), 0.55);
}
.hdev-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.16) 45%, rgba(255, 255, 255, 0.28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.hdev-card { width: 100%; padding: var(--hdev-p); }
.hdev-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem 0.375rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}
.hdev-chip--action { font-weight: 600; }
/* Status rows span their column, so each column reads as one aligned stack. Content sits
   on the same inset as the cards' content (avatar, URL bar). Card radius = status;
   the pill shape is left to the one action (Odpovědět). */
.hdev-chip--block {
  display: flex;
  width: 100%;
  gap: 0.625rem;
  padding: 0.5625rem var(--hdev-in);
  border-radius: var(--hdev-r);
}
.hdev-chip--block > span:not(.hdev-mark) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hdev-ico {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  fill: currentColor;
}
.hdev-ico--line { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linejoin: round; }
.hdev-strong { font-weight: 600; color: var(--hdev-ink); }
.hdev-muted  { color: var(--hdev-ink-muted); }
.hdev-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 999px; flex-shrink: 0; }
.hdev-dot--free     { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18); }
.hdev-dot--reserved { background: #fbbf24; }

/* --- Rail (matches the web card height) --- */
.hdev-web-row { display: flex; align-items: stretch; gap: var(--hdev-gap); width: 100%; }
.hdev-rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: var(--hdev-rail-w);
  padding: 0.375rem;
  flex-shrink: 0;
}
.hdev-rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0;
  border-radius: calc(var(--hdev-r) - 0.375rem);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--hdev-ink-muted);
}
.hdev-rail-item.is-active { color: var(--hdev-ink); background: var(--hdev-fill-2); }

/* --- Web card: an in-place site editor --- */
.hdev-web { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hdev-web-bar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: var(--hdev-p); }
.hdev-browser-url {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1;
  min-width: 0;
  padding: 0.3125rem 0.625rem 0.3125rem 0.4375rem;
  border-radius: 999px;
  background: var(--hdev-fill);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
}
.hdev-browser-url .hdev-ico { width: 0.75rem; height: 0.75rem; opacity: 0.85; }
/* Publish button: both labels share one grid cell → no width jump when it flips */
.hdev-publish {
  display: grid;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  text-shadow: none;
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1); /* release: quick, springy */
}
.hdev-publish > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), filter 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
.hdev-publish-idle { background: var(--hdev-fill-2); color: var(--hdev-ink); } /* glass, not white: the cursor is the focus */
.hdev-publish-done { background: var(--hdev-fill); color: var(--hdev-ink); }
.hdev-publish-done .hdev-ico { width: 0.75rem; height: 0.75rem; }
.hdev-web[data-state="published"] .hdev-publish-idle,
.hdev-web:not([data-state="published"]) .hdev-publish-done { opacity: 0; filter: blur(2px); } /* blur bridges the two pills */
.hdev-publish.is-press { transform: scale(0.96); transition: transform 0.12s ease-out; } /* press: deliberate */

/* The canvas: logo → banner → headline, one rhythm (--hdev-p for padding and gaps, like
   the lead card). No chrome beyond the selection outline, so it sits as quietly as its neighbours. */
.hdev-site {
  display: flex;
  flex: 1;                             /* desktop: the card matches the rail's height → the canvas absorbs it */
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hdev-p);
  padding: var(--hdev-p);
  border-radius: var(--hdev-r-in);
  text-shadow: none;
  background:
    radial-gradient(120% 90% at 88% 118%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.12));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.hdev-site-logo { font-size: 0.6875rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--hdev-ink-muted); }
/* Selection: a thin outline only while editing — the cursor carries the interaction */
.hdev-sel { position: relative; display: inline-flex; max-width: 100%; margin-top: auto; } /* banner + headline group at the foot, like a site hero */
.hdev-sel::before {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  transition: opacity 0.3s ease;
}
.hdev-web[data-state="published"] .hdev-sel::before { opacity: 0; }
.hdev-site-banner {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 1.125rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  background: var(--hdev-fill);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.hdev-site-banner > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hdev-caret { display: none; width: 1px; height: 0.6875rem; margin-left: 1px; background: #fff; }
.hdev-web[data-state="editing"] .hdev-caret { display: block; animation: hdev-blink 1s steps(1) infinite; }
.hdev-web.is-typing .hdev-caret { animation: none; opacity: 1; } /* a real caret holds solid while keys go down */
@keyframes hdev-blink { 50% { opacity: 0; } }
.hdev-site-h {
  max-width: 8.5rem;                   /* breaks as "Bydlení v / korunách stromů" */
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
/* Status: both lines share one grid cell → the card never changes height when it flips */
.hdev-web-status { display: grid; margin-top: var(--hdev-p); padding-inline: 0.25rem; font-size: 0.8125rem; line-height: 1.3; }
.hdev-web-editing,
.hdev-web-online { grid-area: 1 / 1; transition: opacity 0.3s ease; }
.hdev-web-online .hdev-dot { margin-right: 0.4375rem; vertical-align: 0.0625rem; }
.hdev-web[data-state="published"] .hdev-web-editing,
.hdev-web:not([data-state="published"]) .hdev-web-online { opacity: 0; visibility: hidden; }
/* Collaborator-style cursor; JS moves it (transform) — hidden in the final state */
.hdev-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  opacity: 0;
  text-shadow: none;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.3s ease; /* hand-like: accelerates, then settles */
  will-change: transform;
}
.hdev-cursor svg { width: 0.9375rem; height: 0.9375rem; fill: #fff; stroke: rgb(var(--hdev-navy)); stroke-width: 1; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(var(--hdev-shade), 0.35)); }
.hdev-web.has-cursor .hdev-cursor { opacity: 1; }

/* --- Lead card --- */
.hdev-lead-head { display: flex; align-items: center; gap: 0.625rem; padding: 0.125rem 0.25rem 0; }
.hdev-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  flex-shrink: 0;
  background: #fff;
  color: rgb(var(--hdev-navy));
  font-size: 0.75rem;
  font-weight: 600;
  text-shadow: none;
}
.hdev-lead-meta { display: flex; flex-direction: column; min-width: 0; font-size: 0.8125rem; line-height: 1.3; }
.hdev-lead-msg {
  margin-top: var(--hdev-p);
  padding: 0.5rem 0.625rem;
  border-radius: var(--hdev-r-in);
  background: var(--hdev-fill);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--hdev-ink-soft);
}
.hdev-lead-msg .hdev-strong { margin-right: 0.25rem; }

/* --- Availability grid — white steps (free bright, sold faint); the only colour is the
   small amber dot on reserved units, mirrored 1:1 in the legend. --- */
.hdev-avail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding: 0.125rem 0.25rem 0; font-size: 0.8125rem; }
.hdev-avail-flip { color: var(--hdev-ink-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.hdev-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem; margin-top: var(--hdev-p); }
.hdev-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.3125rem 0;
  border-radius: var(--hdev-r-in);
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px transparent;
  transition: background-color 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.hdev-cell::before {
  content: '';
  width: 0.3125rem;
  height: 0.3125rem;
  margin-left: -0.5625rem;             /* dot hangs left, so codes stay centred in every state */
  border-radius: 999px;
  background: #fbbf24;
  opacity: 0;
  transform: scale(0.5);
  transition: transform 0.3s var(--hdev-ease), opacity 0.3s var(--hdev-ease);
}
.hdev-cell.is-free,
.hdev-cell.is-reserved { background: var(--hdev-fill-2); }
.hdev-cell.is-reserved::before { opacity: 1; transform: none; }
.hdev-cell.is-sold     { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.6); }
.hdev-cell.is-target   { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9); }
.hdev-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-top: var(--hdev-p); padding-inline: 0.25rem; font-size: 0.75rem; color: var(--hdev-ink-muted); }
.hdev-legend > span { display: inline-flex; align-items: center; gap: 0.3125rem; }
.hdev-swatch { width: 0.625rem; height: 0.625rem; border-radius: 3px; flex-shrink: 0; }
.hdev-swatch.is-free { background: rgba(255, 255, 255, 0.5); }
.hdev-swatch.is-sold { background: rgba(255, 255, 255, 0.16); }
.hdev-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  flex-shrink: 0;
  background: #fff;
  color: rgb(var(--hdev-navy));
  font-size: 0.6875rem;
  font-weight: 700;
  text-shadow: none;
}

/* --- Proof: one soft lead line over muted, logo-like figures at the stage foot --- */
.hdev-proof {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(1.25rem, 2.4vw, 2.5rem);
  width: min(68rem, 94%);
  transform: translateX(-50%);
  text-align: center;
  text-shadow: 0 1px 12px rgba(var(--hdev-shade), 0.45);
}
.hdev-proof-lead {
  font-size: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);
  font-weight: 450;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: balance;
}
.hdev-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem clamp(1.75rem, 4.5vw, 4.5rem);
  margin-top: clamp(0.625rem, 1vw, 1rem);
}
/* one-line lockups, figure and words in the same muted type (logo-strip feel) */
.hdev-stat {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  font-size: clamp(1.0625rem, 0.85rem + 0.65vw, 1.4375rem);
  font-weight: 450;
  line-height: 1.25;
  letter-spacing: -0.015em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.64);
}

/* --- Entrance ---
   Copy drops in from above (title → sub → CTA, 80 ms apart); the person rises from
   below on a longer, softer ease so it lands after the copy. Story cards start after. */
@media (prefers-reduced-motion: no-preference) {
  .hdev-title,
  .hdev-sub,
  .hdev-actions { animation: hdev-drop 0.6s var(--hdev-ease) both; }
  .hdev-sub     { animation-delay: 0.08s; }
  .hdev-actions { animation-delay: 0.16s; }
  .hdev-person  { animation: hdev-rise 1.3s var(--hdev-ease) 0.12s both; }
  /* proof surfaces last, from below, while the person settles — done before the story gets going */
  .hdev-proof-lead,
  .hdev-stat    { animation: hdev-surface 0.6s var(--hdev-ease) 0.7s both; }
  .hdev-stat:nth-child(1) { animation-delay: 0.78s; }
  .hdev-stat:nth-child(2) { animation-delay: 0.86s; }
  .hdev-stat:nth-child(3) { animation-delay: 0.94s; }
}
@media (prefers-reduced-motion: reduce) {
  .hdev-title, .hdev-sub, .hdev-actions, .hdev-proof-lead, .hdev-stat { animation: hdev-fade 0.4s ease both; }
}
@keyframes hdev-drop { from { opacity: 0; transform: translateY(-0.875rem); } }
@keyframes hdev-rise { from { opacity: 0; transform: translateY(2.5rem); } }
@keyframes hdev-fade { from { opacity: 0; } }
@keyframes hdev-surface { from { opacity: 0; transform: translateY(0.5rem); } }

/* --- Story sequence ---
   Final state is the default. With motion allowed, steps wait hidden for JS
   (failsafe reveal after 2.5 s if JS never runs). */
@media (prefers-reduced-motion: no-preference) {
  .hdev-step {
    opacity: 0;
    transform: translateY(0.5rem);
    animation: hdev-failsafe 0.4s var(--hdev-ease) 2.5s forwards;
  }
  .hdev.is-playing .hdev-step {
    animation: none;
    transition: opacity 0.4s var(--hdev-ease), transform 0.4s var(--hdev-ease);
  }
  .hdev.is-playing .hdev-step.is-in { opacity: 1; transform: none; }
  .hdev-cell.is-flash { box-shadow: inset 0 0 0 1px #fff, 0 0 0 3px rgba(255, 255, 255, 0.3); }
}
@keyframes hdev-failsafe { to { opacity: 1; transform: none; } }

/* --- Small desktop: keep the right column clear of the proof line --- */
@media (min-width: 1024px) and (max-width: 1359px) {
  .hdev-chip--block[data-step="catalog"] { display: none; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .hdev-chip--action { display: none; }
}

/* --- Tablet: web card + lead card only --- */
@media (max-width: 1023px) {
  .hdev { --hdev-card-w: 31%; }
  .hdev-lg-only { display: none !important; }
  .hdev-col { top: 14%; }               /* clears the proof line at the stage foot */
  .hdev-site-h { font-size: 0.8125rem; }
  .hdev-stat { font-size: 1rem; }    /* keeps the three lockups on one line */
  .hdev-stats { column-gap: 1.75rem; }
  .hdev-col--left { width: var(--hdev-card-w); }
}

/* --- Mobile: poster only (no video), portrait crop --- */
@media (max-width: 767px) {
  .hdev {
    --hdev-clear: 1.75rem;
    --hdev-card-w: min(17rem, 76%);
  }
  .hdev-copy { padding-top: calc(var(--hdev-nav-h) + 2.5rem); }
  .hdev-actions { flex-direction: column; gap: 1rem; }
  .hdev-cta { width: 100%; max-width: 20rem; padding-block: 0.8125rem; }
  .hdev-stage {
    aspect-ratio: 9 / 16;
    max-height: none;
    margin-top: calc(var(--hdev-clear) - 33.78%); /* 19 % of a 9:16 frame, in % of width */
  }
  /* the baked portrait poster already is the frame — no scale/lift */
  .hdev-sky {
    left: 0;
    width: 100%;
    aspect-ratio: 9 / 16;
    margin-top: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 84%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 84%, transparent 100%);
  }
  /* cards sit on the jacket + white t-shirt here — scrim the lower half, and give the
     glass a navy body so white type holds over the shirt */
  .hdev-media::after {
    background:
      linear-gradient(to bottom, rgba(var(--hdev-shade), 0) 40%, rgba(var(--hdev-shade), 0.45) 100%);
  }
  .hdev-cards .hdev-glass {
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.24), rgba(var(--hdev-navy), 0.34));
  }
  .hdev-video, .hdev-person { display: none; }
  /* staggered pair below the chin (face ends at ~48 % of the frame). The cards are in flow,
     so the stage grows past the poster when they need it (the poster fades into navy) and
     they never run into the proof band; a late font swap only grows them downward. */
  .hdev-stage { aspect-ratio: auto; min-height: 177.78vw; }
  .hdev-cards { position: relative; inset: auto; display: flex; flex-direction: column; gap: var(--hdev-gap); padding: 88.89vw 1rem 0; }
  .hdev-col { position: static; width: var(--hdev-card-w); }
  .hdev-col--right { order: -1; align-self: flex-end; }
  .hdev-col--left  { align-self: flex-start; }
  .hdev-browser-url { font-size: 0.6875rem; }
  .hdev-proof { position: relative; left: auto; bottom: auto; width: auto; transform: none; padding: 2.25rem 1rem 2.5rem; }
  .hdev-stats { flex-direction: column; align-items: center; gap: 0.375rem; margin-top: 0.875rem; }
}