/* =========================================================================
   Plouse homepage (Figma 295:1719) — freelancers & small creative teams.
   Loaded after styles.css on index.html only; the header, download button,
   partners strip, FAQ and footer keep their shared styles from styles.css.
   ========================================================================= */

.page-home {
  --bg: #fcfcfb;
  --line: #eae9e2;
  --wrap: 1362px;
  --gutter: 40px;
  background: var(--bg);
}

/* Brand radial gradient, rising from the bottom centre (pink → peach → mint). */
.h-grad {
  background: radial-gradient(100% 100% at 50% 100%,
    #ffa4c9 14.4%, #fcab99 52.9%, #e6d5c8 75.7%, #d0fff7 98.6%);
}
/* Lilac variant (teams + about). */
.h-grad--lilac {
  background: radial-gradient(100% 100% at 50% 100%,
    #ffa4c9 14.4%, #fcab99 52.9%, #e8bdcc 75.7%, #d4d0ff 98.6%);
}

.home {
  width: min(var(--wrap), 100% - 2 * var(--gutter));
  margin: 0 auto;
}

/* ---------- Shared type ---------- */
.h-display {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-align: center;
  color: #000;
}
.h-lead {
  margin: 0;
  max-width: 684px;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  color: #000;
  text-wrap: pretty;
}
.h-eyebrow {
  margin: 0;
  font-size: 16px;
  color: #000;
}

/* ---------- Buttons ---------- */
/* .download-btn (black, Apple logo) comes from styles.css; these are its siblings. */
.h-btn-light,
.h-btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 16px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.h-btn-light {
  background: #fff;
  color: #000;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.h-btn-light img { display: block; }
.h-btn-dark { background: #000; color: #fff; }
.h-btn-light:hover,
.h-btn-dark:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16); }

/* ---------- Hero ---------- */
.h-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
  padding-top: 182px;
}
.h-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 760px;
}
.h-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.h-hero__ctas .download-btn { margin-top: 0; }

/* Stage = the 1362×594 Figma frame. Everything inside is placed in % of it and
   sized in container units, so the composition scales as one piece. */
.h-hero__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1362 / 593.75;
  border-radius: 24px;
  overflow: hidden;
  container-type: inline-size;
}
.h-hero__window {
  position: absolute;
  left: 19.27%;
  top: 14.04%;
  width: 62.43%;
  bottom: 0;
  overflow: hidden;
  background: #fcfcfb;
  border-radius: 1.3cqw 1.3cqw 0 0;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.h-hero__window img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.h-chip {
  position: absolute;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  height: 4.13cqw;
  padding: 0 1.9cqw 0 0.28cqw;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  font-size: max(10px, 1.3cqw);
  white-space: nowrap;
  animation: h-float 6s ease-in-out infinite;
}
.h-chip__avatar {
  display: grid;
  place-items: center;
  width: 3.5cqw;
  height: 3.5cqw;
  border-radius: 50%;
  background: #141b34;
  color: #f7f7f7;
}
.h-chip--laura { left: 13.24%; top: 47.54%; }
.h-chip--vincent { left: 16.17%; top: 60.99%; animation-delay: -3s; }

.h-hero__card {
  position: absolute;
  margin: 0;
  left: 61.14%;
  top: 51.91%;
  width: 30.48%;
  height: 40.82%;
  display: grid;
  place-items: center;
  padding: 1.2cqw;
  background: #fff;
  border-radius: 0.97cqw;
  box-shadow: 0 4.4px 33px rgba(0, 0, 0, 0.08);
}
.h-hero__card img { display: block; width: 100%; height: auto; }

@keyframes h-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.5cqw); }
}

/* ---------- Sections ---------- */
.h-section { padding-top: 160px; }
.h-hero + .h-section { padding-top: 140px; }
.h-section--tight { padding-top: 160px; }

.h-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
  max-width: 760px;
  margin: 0 auto 100px;
}

/* ---------- Split: screenshot card + accordion card ---------- */
.h-split {
  --acc-open: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.h-split--lg { --acc-open: 40px; }
.h-split--reverse .h-split__visual { order: 2; }

.h-split__visual,
.h-split__panel {
  border-radius: 40px;
  min-height: 621px;
}
.h-split__visual {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.h-split__panel {
  background: #fff;
  padding: 64px;
}

/* Each accordion item owns one .h-shot; the active one crossfades in. */
.h-shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.h-shot.is-active { opacity: 1; transform: none; }

/* App window: floats in from the top-left and bleeds off the right/bottom edge. */
.h-shot--window img {
  position: absolute;
  left: 9%;
  top: 13%;
  width: 135%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(60, 30, 40, 0.16);
  background: #fcfcfb;
}
/* Ask Plouse demo. The window is shown larger than the other shots so the typed
   question stays legible; everything inside is placed in % of the 1280×860pt
   capture and sized in container units, so the overlay tracks the image. */
.h-ask {
  position: absolute;
  left: 9%;
  top: 13%;
  width: 165%;
  aspect-ratio: 1280 / 860;
  overflow: hidden;
  border-radius: 14px;
  background: #fcfcfb;
  box-shadow: 0 10px 40px rgba(60, 30, 40, 0.16);
  container-type: inline-size;
}
.h-ask__home,
.h-ask__report {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.h-ask__report {
  opacity: 0;
  transform: scale(0.985);
  transform-origin: 30% 20%;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.h-ask.is-answered .h-ask__report { opacity: 1; transform: none; }

/* White strip over the field's placeholder; the question types into it.
   Geometry from the capture: text starts at x 270pt, field row at y 326pt. */
.h-ask__field {
  position: absolute;
  left: 20.78%;
  top: 37.91%;
  width: 62.5%;
  height: 2.79%;
  display: flex;
  align-items: center;
  padding-left: 0.3125cqw;
  background: #fff;
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: 1.094cqw;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.h-ask.is-typing .h-ask__field { opacity: 1; }
.h-ask__caret {
  width: 1px;
  height: 1.25cqw;
  margin-left: 1px;
  background: #000;
  animation: h-caret 1s steps(1) infinite;
}
.h-ask.is-sent .h-ask__caret { visibility: hidden; }
@keyframes h-caret { 50% { opacity: 0; } }

/* ---------- Menu-bar scene (Figma 608:5444) ----------
   A desktop with the Plouse menu-bar item open. Built at the frame's 660px card
   width; every length is a multiple of --u (1/660 of the card), so the scene
   scales as one piece. The floating row's timer is ticked by main.js. */
.h-split__visual { container-type: inline-size; }
.h-mb {
  --u: calc(100cqw / 660);
  --line: #eae9e2;
  --peak: radial-gradient(100% 100% at 50% 100%, #ffa4c9 14.4%, #fcab99 52.9%, #e8bdcc 75.7%, #d4d0ff 98.6%);
  position: absolute;
  inset: 0;
  font-family: "Inter", var(--font-sans);
  color: #000;
}
.h-mb img { display: block; }
.h-mb__desk {
  position: absolute;
  left: 0;
  top: calc(43.38 * var(--u));
  width: calc(605.18 * var(--u));
  bottom: 0;
  border-radius: 0 calc(24 * var(--u)) 0 calc(24 * var(--u));
  background: radial-gradient(100% 100% at 50% 100%,
    #ffa4c9 15%, #fcab99 52.9%, #e6d5c8 75.7%, #d0fff7 98.6%);
  box-shadow: calc(10 * var(--u)) calc(-20 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, 0.06);
}

/* Mac menu bar: battery, wifi, search, with the Plouse pill to their left. */
.h-mb__bar {
  position: absolute;
  left: calc(374.15 * var(--u));
  top: calc(53.75 * var(--u));
  height: calc(49.35 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(24.7 * var(--u));
  padding: 0 calc(16.45 * var(--u));
}
.h-mb__batt {
  display: flex;
  align-items: center;
  gap: calc(6.6 * var(--u));
  font-size: calc(18.09 * var(--u));
}
.h-mb__batt img { width: calc(29.69 * var(--u)); height: calc(15.42 * var(--u)); }
.h-mb__icon { width: calc(26.32 * var(--u)); height: calc(26.32 * var(--u)); }
.h-mb__pill {
  position: absolute;
  left: calc(-95.27 * var(--u));
  top: calc(9.62 * var(--u));
  height: calc(32.03 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(5.47 * var(--u));
  padding: 0 calc(10.17 * var(--u));
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-family: var(--font-sans);
  font-size: calc(17.49 * var(--u));
  line-height: 1;
}
.h-mb__pill img { width: calc(21.83 * var(--u)); height: calc(19.26 * var(--u)); }

/* Popover + its tail. */
.h-mb__tail {
  position: absolute;
  left: calc(314.84 * var(--u));
  top: calc(110.2 * var(--u));
  width: calc(22.3 * var(--u));
  height: calc(22.3 * var(--u));
  background: #fff;
  border-top-left-radius: calc(7.64 * var(--u));
  transform: rotate(45deg);
}
.h-mb__pop {
  position: absolute;
  left: calc(173.01 * var(--u));
  top: calc(121.53 * var(--u));
  width: calc(303.9 * var(--u));
  height: calc(467.88 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(22.93 * var(--u));
  padding: calc(22.93 * var(--u));
  background: #fff;
  border-radius: calc(22.93 * var(--u));
}
.h-mb__focus {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  row-gap: calc(11.46 * var(--u));
  padding-bottom: calc(22.93 * var(--u));
  border-bottom: calc(0.955 * var(--u)) solid var(--line);
}
.h-mb__focus span { font-family: var(--font-sans); font-size: calc(11.46 * var(--u)); }
.h-mb__focus b { font-family: var(--font-serif); font-weight: 400; font-size: calc(15.29 * var(--u)); }
.h-mb__bars { grid-column: 1 / -1; display: flex; gap: calc(3.82 * var(--u)); }
.h-mb__bars i { flex: 1; height: calc(11.7 * var(--u)); border-radius: calc(3.82 * var(--u)); }

.h-mb__list {
  height: calc(278.76 * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(19.1 * var(--u));
  padding-bottom: calc(19.1 * var(--u));
  border-bottom: calc(0.955 * var(--u)) solid var(--line);
  font-size: calc(11.46 * var(--u));
}
.h-mb__list p, .h-mb__list ul { margin: 0; }
.h-mb__today { display: flex; justify-content: space-between; align-items: baseline; }
.h-mb__today span { font-size: calc(13.38 * var(--u)); }
.h-mb__calls, .h-mb__list li { display: flex; align-items: center; }
.h-mb__calls img { width: calc(15.29 * var(--u)); height: calc(15.29 * var(--u)); }
.h-mb__list ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(15.29 * var(--u));
}
.h-mb__dot {
  flex: none;
  width: calc(15.29 * var(--u));
  height: calc(15.29 * var(--u));
  border-radius: calc(6 * var(--u));
}
.h-mb__name { margin-left: calc(10.51 * var(--u)); color: #303030; }
.h-mb__calls .h-mb__name { color: #000; }
.h-mb__val { margin-left: auto; font-variant-numeric: tabular-nums; }

.h-mb__actions { display: flex; justify-content: space-between; align-items: center; }
.h-mb__btn-group { display: flex; gap: calc(7.64 * var(--u)); }
.h-mb__btn {
  display: inline-flex;
  align-items: center;
  gap: calc(9.55 * var(--u));
  height: calc(38.21 * var(--u));
  padding: 0 calc(11.46 * var(--u));
  border-radius: calc(11.46 * var(--u));
  background: #f6f6f6;
  font-size: calc(11.46 * var(--u));
}
.h-mb__btn img { width: calc(15.29 * var(--u)); height: calc(15.29 * var(--u)); }
.h-mb__btn--dark { background: #000; color: #fff; }

/* The project being tracked right now, lifted out of the list. */
.h-mb__live {
  position: absolute;
  left: calc(-52.47 * var(--u));
  top: calc(81.99 * var(--u));
  width: calc(412.13 * var(--u));
  height: calc(62.31 * var(--u));
  display: flex;
  align-items: center;
  padding: 0 calc(18.81 * var(--u));
  background: #fff;
  border: calc(1.567 * var(--u)) solid var(--line);
  border-radius: calc(18.81 * var(--u));
  box-shadow: 0 calc(4.37 * var(--u)) calc(10.93 * var(--u)) rgba(0, 0, 0, 0.1);
  font-size: calc(18.81 * var(--u));
}
.h-mb__live-dot {
  position: relative;
  flex: none;
  width: calc(25.08 * var(--u));
  height: calc(25.08 * var(--u));
  border-radius: calc(9.4 * var(--u));
  background: #fba9c8;
}
/* Soft "recording" ring so the row reads as live. */
.h-mb__live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: h-live 2s ease-out infinite;
}
@keyframes h-live {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.9); opacity: 0; }
}
.h-mb__live-name { margin-left: calc(12.54 * var(--u)); color: #303030; }
.h-mb__live-time { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---------- Team project sync scene ----------
   A simplified "New team project" modal with teammates floating around it.
   Lengths are multiples of --u (1/660 of the card), like the menu-bar scene.
   States (set by main.js): .is-typing → .has-keywords → .is-pressed →
   .is-created; each teammate gets .is-synced in turn. */
.h-sync {
  --u: calc(100cqw / 660);
  --pill: #f3f2ee;
  position: absolute;
  inset: 0;
  font-family: "Inter", var(--font-sans);
  color: #000;
}
.h-sync__modal {
  position: absolute;
  left: calc(160 * var(--u));
  top: calc(168 * var(--u));
  width: calc(340 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--u));
  padding: calc(24 * var(--u));
  background: #fff;
  border-radius: calc(28 * var(--u));
  box-shadow: 0 calc(16 * var(--u)) calc(48 * var(--u)) rgba(60, 30, 40, 0.16);
}
.h-sync p { margin: 0; }
.h-sync__head { display: flex; justify-content: space-between; gap: calc(16 * var(--u)); }
.h-sync__title { font-family: var(--font-serif); font-size: calc(22 * var(--u)); line-height: 1.2; }
.h-sync__sub {
  margin-top: calc(6 * var(--u)) !important;
  font-size: calc(11 * var(--u));
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.55);
}
.h-sync__close {
  flex: none;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  transform: rotate(45deg);
  opacity: 0.6;
}

.h-sync__name {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(40 * var(--u));
  padding: 0 calc(12 * var(--u));
  border-radius: 999px;
  background: var(--pill);
  font-size: calc(12 * var(--u));
}
.h-sync__swatch {
  flex: none;
  width: calc(19.4 * var(--u));
  height: calc(19.4 * var(--u));
  margin-right: calc(10 * var(--u));
  border-radius: calc(4 * var(--u));
  background: #a18ff0;
}
.h-sync__ph {
  position: absolute;
  left: calc(41.4 * var(--u));
  color: rgba(0, 0, 0, 0.5);
}
.h-sync.is-typing .h-sync__ph { display: none; }
.h-sync__caret {
  width: 1px;
  height: calc(14 * var(--u));
  margin-left: 1px;
  background: #000;
  opacity: 0;
}
.h-sync.is-typing .h-sync__caret { opacity: 1; animation: h-caret 1s steps(1) infinite; }
.h-sync.has-keywords .h-sync__caret { visibility: hidden; }

.h-sync__label { font-size: calc(11 * var(--u)); }
.h-sync__help { margin-top: calc(3 * var(--u)) !important; font-size: calc(10 * var(--u)); color: rgba(0, 0, 0, 0.5); }
.h-sync__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--u));
  min-height: calc(28 * var(--u));
  margin-top: calc(10 * var(--u));
}
.h-sync__chip {
  display: inline-flex;
  align-items: center;
  height: calc(28 * var(--u));
  padding: 0 calc(12 * var(--u));
  border-radius: 999px;
  background: var(--pill);
  font-size: calc(11 * var(--u));
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.h-sync.has-keywords .h-sync__chip { opacity: 1; transform: none; }
.h-sync.has-keywords .h-sync__chip:nth-child(2) { transition-delay: 0.18s; }
.h-sync.has-keywords .h-sync__chip:nth-child(3) { transition-delay: 0.36s; }

.h-sync__foot { display: flex; justify-content: space-between; align-items: center; margin-top: calc(4 * var(--u)); }
.h-sync__team { display: flex; align-items: center; font-size: calc(11 * var(--u)); color: rgba(0, 0, 0, 0.55); }
.h-sync__team i {
  display: grid;
  place-items: center;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  margin-right: calc(-6 * var(--u));
  border: calc(2 * var(--u)) solid #fff;
  border-radius: 50%;
  color: #fff;
  font-style: normal;
  font-size: calc(9 * var(--u));
}
.h-sync__team span { margin-left: calc(14 * var(--u)); }
.h-sync__btn {
  display: grid;
  height: calc(36 * var(--u));
  padding: 0 calc(16 * var(--u));
  border-radius: calc(12 * var(--u));
  background: #000;
  color: #fff;
  font-size: calc(12 * var(--u));
  transition: transform 0.15s ease, background 0.3s ease;
}
.h-sync__btn > span { grid-area: 1 / 1; align-self: center; justify-self: center; transition: opacity 0.25s ease; }
.h-sync__btn-b { opacity: 0; }
.h-sync.is-pressed .h-sync__btn { transform: scale(0.94); }
.h-sync.is-created .h-sync__btn-a { opacity: 0; }
.h-sync.is-created .h-sync__btn-b { opacity: 1; }

/* Floating teammates. */
.h-sync__mate {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
  padding: calc(6 * var(--u)) calc(14 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 calc(6 * var(--u)) calc(24 * var(--u)) rgba(60, 30, 40, 0.12);
  font-size: calc(13 * var(--u));
  white-space: nowrap;
  animation: h-sync-float 6s ease-in-out infinite;
  animation-delay: var(--fd);
}
@keyframes h-sync-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(-7 * var(--u))); }
}
.h-sync__av {
  display: grid;
  place-items: center;
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  border-radius: 50%;
  color: #fff;
  font-size: calc(13 * var(--u));
}
.h-sync__who { display: flex; flex-direction: column; }
.h-sync__who b { font-weight: 400; }
/* "Northwind added" unfolds under the name once the project reaches them. */
.h-sync__note {
  display: grid;
  grid-template-rows: 0fr;
  max-width: 0;
  font-size: calc(10.5 * var(--u));
  color: rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  transition: grid-template-rows 0.35s ease, max-width 0.35s ease;
}
.h-sync__note > span { overflow: hidden; }
.h-sync__mate.is-synced .h-sync__note { grid-template-rows: 1fr; max-width: calc(110 * var(--u)); }
.h-sync__tick {
  width: 0;
  height: calc(18 * var(--u));
  border-radius: 50%;
  position: relative;
  flex: none;
  margin-left: calc(-9 * var(--u));
  background: #34c759;
  opacity: 0;
  transform: scale(0.4);
  transition: width 0.3s ease, margin-left 0.3s ease, opacity 0.25s ease, transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.h-sync__mate.is-synced .h-sync__tick { width: calc(18 * var(--u)); margin-left: 0; opacity: 1; transform: none; }
.h-sync__tick::after {
  content: "";
  position: absolute;
  left: calc(6.6 * var(--u));
  top: calc(3.6 * var(--u));
  width: calc(4.5 * var(--u));
  height: calc(8.5 * var(--u));
  border: solid #fff;
  border-width: 0 calc(2 * var(--u)) calc(2 * var(--u)) 0;
  transform: rotate(45deg);
}

/* ---------- Team report export scene ----------
   A simplified "Export team report" sheet beside the report it produces. --u = 1/660 of the card. States (main.js): .is-quarter swaps
   the period, rows get .is-on, .is-pressed squeezes Export PDF; main.js marks
   the matching report page .is-shown. */
.h-rep {
  --u: calc(100cqw / 660);
  --pill: #f3f2ee;
  position: absolute;
  inset: 0;
  font-family: "Inter", var(--font-sans);
  color: #000;
}
.h-rep p { margin: 0; }
/* The report page stays put; its pages are stacked and the one matching the
   current selection fades in. */
.h-rep__doc {
  position: absolute;
  left: calc(318 * var(--u));
  top: calc(96 * var(--u));
  width: calc(300 * var(--u));
  aspect-ratio: 1200 / 1697;
  overflow: hidden;
  border-radius: calc(6 * var(--u));
  background: #fff;
  box-shadow: 0 calc(18 * var(--u)) calc(50 * var(--u)) rgba(60, 30, 40, 0.2);
}
.h-rep__page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.h-rep__page.is-shown { opacity: 1; }

.h-rep__sheet {
  position: absolute;
  left: calc(40 * var(--u));
  top: calc(176 * var(--u));
  width: calc(300 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--u));
  padding: calc(26 * var(--u));
  background: #fff;
  border-radius: calc(26 * var(--u));
  box-shadow: 0 calc(16 * var(--u)) calc(48 * var(--u)) rgba(60, 30, 40, 0.16);
}
.h-rep__title { font-family: var(--font-serif); font-size: calc(21 * var(--u)); line-height: 1.2; }
.h-rep__group { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.h-rep__label { font-size: calc(10.5 * var(--u)); color: rgba(0, 0, 0, 0.5); }
.h-rep__period {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: calc(8 * var(--u));
  height: calc(36 * var(--u));
  padding: 0 calc(14 * var(--u));
  border: 1px solid #eae9e2;
  border-radius: 999px;
  font-family: var(--font-serif);
  font-size: calc(13.5 * var(--u));
}
.h-rep__period svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.h-rep__span { display: grid; }
.h-rep__span > span { grid-area: 1 / 1; transition: opacity 0.3s ease, transform 0.3s ease; }
.h-rep__span-b { opacity: 0; transform: translateY(40%); }
.h-rep.is-quarter .h-rep__span-a { opacity: 0; transform: translateY(-40%); }
.h-rep.is-quarter .h-rep__span-b { opacity: 1; transform: none; }

.h-rep__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(9 * var(--u));
}
.h-rep__check {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  font-family: var(--font-serif);
  font-size: calc(13 * var(--u));
}
.h-rep__box {
  position: relative;
  flex: none;
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  border: 1px solid #c9c7c0;
  border-radius: calc(4 * var(--u));
  transition: background 0.2s ease, border-color 0.2s ease;
}
.h-rep__box::after {
  content: "";
  position: absolute;
  left: calc(4.4 * var(--u));
  top: calc(1.4 * var(--u));
  width: calc(4 * var(--u));
  height: calc(7.6 * var(--u));
  border: solid #fff;
  border-width: 0 calc(1.8 * var(--u)) calc(1.8 * var(--u)) 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.h-rep__check.is-on .h-rep__box { background: #000; border-color: #000; }
.h-rep__check.is-on .h-rep__box::after { transform: rotate(45deg) scale(1); }
.h-rep__dot {
  flex: none;
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  border-radius: 50%;
}

.h-rep__buttons { display: flex; justify-content: flex-end; gap: calc(8 * var(--u)); margin-top: calc(4 * var(--u)); }
.h-rep__btn {
  display: inline-flex;
  align-items: center;
  height: calc(34 * var(--u));
  padding: 0 calc(14 * var(--u));
  border: 1px solid #eae9e2;
  border-radius: calc(11 * var(--u));
  font-size: calc(11.5 * var(--u));
  transition: transform 0.15s ease;
}
.h-rep__btn--dark { background: #000; border-color: #000; color: #fff; }
.h-rep.is-pressed .h-rep__btn--dark { transform: scale(0.94); }

/* Heatmap card, centred. */
.h-shot--card {
  display: grid;
  place-items: center;
}
.h-shot--card img {
  display: block;
  width: 86%;
  height: auto;
  padding: 20px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(60, 30, 40, 0.14);
  box-sizing: border-box;
}

/* On-device card (insights → "stay yours"). */
.h-shot--local { display: grid; place-items: center; }
.h-local {
  width: min(78%, 380px);
  padding: 36px 32px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 12px 40px rgba(60, 30, 40, 0.14);
  text-align: center;
}
.h-local__mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.h-local__mark img:first-child { height: 30px; width: auto; }
.h-local__mark img:last-child { height: 20px; width: auto; }
.h-local__title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: 24px;
}
.h-local__body { margin: 0; font-size: 15px; line-height: 1.45; color: #303030; }

/* Accordion */
.h-acc {
  list-style: none;
  margin: 0;
  padding: 0;
}
.h-acc__item + .h-acc__item {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.h-acc__title { margin: 0; }
.h-acc__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #000;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
}
/* Title size follows .is-big, which main.js swaps while the title is masked out
   (open/close state itself is .is-open and applies immediately). */
.h-acc__item.is-big .h-acc__q { font-size: var(--acc-open); }
.h-acc__q:focus-visible { outline: 2px solid #000; outline-offset: 4px; border-radius: 6px; }
/* Clipping mask the title slides out of / into. The small bottom padding keeps
   descenders from being clipped; the height is eased by main.js on a swap. */
.h-acc__mask {
  display: block;
  max-width: 420px;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  transition: height 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.h-acc__mask-inner {
  display: block;
  transition: transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.h-acc__mask-inner.is-leaving {
  transform: translateY(-110%);
  transition: transform 0.2s cubic-bezier(0.5, 0, 0.75, 0);
}
.h-acc__mask-inner.is-below {
  transform: translateY(110%);
  transition: none;
}
.h-acc__icon {
  flex: none;
  display: block;
  margin-top: 4px;
  transition: transform 0.35s ease;
}
/* The plus turns into the design's × on the open item. */
.h-acc__item.is-open .h-acc__icon { transform: rotate(45deg); }

.h-acc__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}
.h-acc__item.is-open .h-acc__a { grid-template-rows: 1fr; }
.h-acc__a-inner { overflow: hidden; }
.h-acc__a-inner p {
  margin: 0;
  padding-top: 24px;
  font-size: 16px;
  line-height: 1.4;
  color: #000;
}

/* ---------- Latest release ---------- */
.h-news {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 621px;
  border-radius: 40px;
  overflow: hidden;
}
.h-news__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.h-news__logo { display: block; width: min(301px, 70%); height: auto; filter: brightness(0); }
.h-news__version { margin: 0; font-size: 16px; }
.h-news__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  padding: 64px;
}
.h-news__tag {
  padding: 6px 12px;
  border-radius: 100px;
  background: #fff;
  font-size: 16px;
}
.h-news__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 3vw, 40px);
  line-height: 1.2;
  text-wrap: pretty;
}
.h-news__desc { margin: 0; font-size: 16px; line-height: 1.4; }

/* ---------- Pricing ---------- */
.h-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  padding: 100px;
  background: #fff;
  border-radius: 40px;
}
.h-price__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 520px;
}
.h-price__title {
  margin: -8px 0 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 3.6vw, 48px);
  line-height: 1.15;
  max-width: 464px;
}
.h-price__sub { margin: 0; font-size: 16px; line-height: 1.4; }
.h-price__main .download-btn { margin-top: 0; }
.h-price__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 396px;
  max-width: 100%;
}
.h-price__list li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  line-height: 2;
}
.h-price__list li + li { margin-top: 16px; }
.h-price__list li::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background: url("assets/home/icon-check.svg") center / 24px 24px no-repeat;
}

/* ---------- About ---------- */
.h-about {
  display: flex;
  justify-content: center;
  padding: 100px 40px;
  border-radius: 40px;
}
.h-about__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 563px;
  text-align: center;
}
.h-about__title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.25;
}
.h-about__body p { margin: 0; font-size: 16px; line-height: 1.4; }
.h-about__body p + p { margin-top: 1.4em; }

/* Partners strip sits inside .home here; drop its own side padding. */
.home .partners { padding: 160px 0 40px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .h-split__panel { padding: 48px; }
  .h-price { padding: 64px; }
}

@media (max-width: 960px) {
  .h-hero { gap: 56px; padding-top: 140px; }
  .h-section,
  .h-hero + .h-section,
  .h-section--tight { padding-top: 104px; }
  .h-head { margin-bottom: 56px; }

  .h-split { grid-template-columns: 1fr; gap: 20px; }
  .h-split--reverse .h-split__visual { order: 0; }
  .h-split__visual { min-height: 0; aspect-ratio: 660 / 560; border-radius: 32px; }
  .h-split__panel { min-height: 0; border-radius: 32px; }
  /* The card is shorter than the 621px frame here; lift the scene so the
     popover's buttons stay in view. */
  .h-mb, .h-sync, .h-rep { top: calc(-40 * var(--u)); }

  .h-news { grid-template-columns: 1fr; min-height: 0; border-radius: 32px; }
  .h-news__brand { padding: 64px 24px 0; }
  .h-news__body { padding: 40px 32px 56px; }

  .h-price { flex-direction: column; align-items: flex-start; padding: 48px 32px; border-radius: 32px; }
  .h-price__list { width: 100%; }
  .h-about { border-radius: 32px; }
  .home .partners { padding-top: 104px; }
}

@media (max-width: 640px) {
  .page-home { --gutter: 16px; }
  .h-hero__stage { border-radius: 18px; }
  .h-chip { font-size: 10px; }
  .h-split__visual { aspect-ratio: 4 / 4; }
  .h-mb, .h-sync, .h-rep { top: 0; }
  .h-split__panel { padding: 32px 24px; }
  .h-acc__q { font-size: 21px; }
  .h-split, .h-split--lg { --acc-open: 28px; }
  .h-shot--window img { left: 7%; top: 10%; width: 170%; }
  .h-ask { left: -14%; top: 8%; width: 190%; }
  .h-about { padding: 64px 24px; }
  .h-about__title { font-size: 28px; }
  .h-lead br, .h-about__title br { display: none; }
  .h-price__list li { line-height: 1.5; }

  /* Taller hero stage so the report stays legible on a phone. */
  .h-hero__stage { aspect-ratio: 4 / 3.4; }
  .h-hero__window { left: 8%; width: 84%; top: 10%; }
  .h-chip--laura { left: 3%; top: 46%; }
  .h-chip--vincent { left: 6%; top: 60%; }
  .h-hero__card { left: 50%; top: 56%; width: 46%; height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .h-chip, .h-mb__live-dot::after, .h-sync__mate { animation: none; }
  .h-shot, .h-acc__mask, .h-acc__mask-inner, .h-acc__icon, .h-acc__a, .h-ask__report, .h-rep__page { transition: none; }
}