/* =====================================================
   Layo — bespoke case study layout
   ===================================================== */

.layo {
  --lf: var(--layo-font, var(--font-regular));

  /* 1px of the 1920px Figma frame, measured on the page width (excludes scrollbar) */
  container-type: inline-size;
  --u: calc(100cqw / 1920);

  font-family: var(--lf);
  color: #fff;
}
/* base.css gives headings Poppins; on this page every heading is Montserrat */
.layo :is(h1, h2, h3, h4) { font-family: var(--lf); }

/* Shared Layo button behaviour: Figma "Button / Primary" double shadow;
   on hover the button grows and lifts while its shadow deepens (colours stay). */
.layo-hero__btn,
.layo-cta__btn,
.layo-embed__open {
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow:
    0 calc(7.68 * var(--u)) calc(5.76 * var(--u)) rgba(0, 0, 0, 0.15),
    0 calc(3.84 * var(--u)) calc(1.92 * var(--u)) rgba(0, 0, 0, 0.3);
  transition: transform 0.25s var(--ease-standard, ease), box-shadow 0.25s var(--ease-standard, ease);
}
.layo-hero__btn:hover,
.layo-cta__btn:hover,
.layo-embed__open:hover,
.layo-hero__btn:focus-visible,
.layo-cta__btn:focus-visible,
.layo-embed__open:focus-visible {
  color: var(--btn-fg); /* base.css turns hovered links green */
  text-decoration: none;
  transform: translateY(-3px) scale(1.06);
  box-shadow:
    0 calc(12 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.18),
    0 calc(5 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.28);
}
/* hero buttons: softer than the Figma shadow (user: "se ve mucho") */
.layo-hero__btn {
  box-shadow:
    0 calc(4 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.08),
    0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.12);
}
.layo-hero__btn:hover,
.layo-hero__btn:focus-visible {
  box-shadow:
    0 calc(8 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.12),
    0 calc(3 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.15);
}
.layo-hero__btn:active,
.layo-cta__btn:active,
.layo-embed__open:active { transform: translateY(0); }

/* ====================================================
   1. HERO — Figma node 6536:4198 (1920px reference frame)
   Every measurement is expressed in --u (1px at 1920 wide),
   so the section scales proportionally with the viewport.
   ==================================================== */
/* On request the cover fills the screen: the characters stay on the floor
   (bottom edge) and the logo/subtitle/buttons block is centred in the space
   between the navbar (118) and the characters. With height = 958 these
   paddings reproduce the Figma positions exactly (logo top at 190.85). */
.layo-hero {
  position: relative;
  z-index: 3; /* characters overhang the next section by a few px, as in Figma */
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: max(100svh, calc(958 * var(--u)));
  padding: calc(118 * var(--u)) 0 calc(226 * var(--u));
  background: #bcd5ff;
}

/* Logo, subtitle and buttons share a column centred at x≈949 in Figma */
.layo-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-right: calc(22 * var(--u));
}

.layo-hero__logo {
  margin: 0;
  width: calc(400.125 * var(--u));
  line-height: 0;
}
.layo-hero__logo img {
  width: 100%;
  height: auto;
}

.layo-hero__subtitle {
  margin: calc(27.8 * var(--u)) 0 0;
  font-size: calc(37.914 * var(--u));
  font-weight: 400;
  line-height: normal;
  color: #000;
  text-align: center;
  white-space: nowrap;
}
.layo-hero__subtitle strong {
  font-weight: 700;
  color: #1439e1;
}

.layo-hero__links {
  display: flex;
  gap: calc(64 * var(--u));
  margin-top: calc(50.6 * var(--u));
}

.layo-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(272 * var(--u));
  height: calc(48 * var(--u));
  padding: calc(9.6 * var(--u)) calc(40.32 * var(--u));
  border-radius: calc(24 * var(--u));
  --btn-bg: #192d8f;
  --btn-fg: #bcd5ff;
  font-family: var(--lf);
  font-size: calc(15.36 * var(--u));
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
  text-decoration: none;
}

/* Characters: absolute x / bottom offsets taken from the Figma frame.
   Negative bottoms reproduce the small overhang past the section edge. */
.layo-hero__characters {
  position: absolute;
  inset: auto 0 0;
  pointer-events: none;
}
.layo-hero__char {
  position: absolute;
  display: block;
  height: auto;
}
.layo-hero__char--waving   { left: calc(48.8 * var(--u));    bottom: calc(-5.58 * var(--u)); width: calc(127.444 * var(--u)); }
.layo-hero__char--bench    { left: calc(366 * var(--u));     bottom: calc(-7 * var(--u));    width: calc(209 * var(--u)); }
.layo-hero__char--coffee   { left: calc(732.55 * var(--u));  bottom: calc(-5.58 * var(--u)); width: calc(99.123 * var(--u)); }
.layo-hero__char--pair     { left: calc(1052.17 * var(--u)); bottom: calc(-5.58 * var(--u)); width: calc(159.81 * var(--u)); }
.layo-hero__char--reading  { left: calc(1430.46 * var(--u)); bottom: calc(-8.36 * var(--u)); width: calc(100.134 * var(--u)); }
.layo-hero__char--backpack { left: calc(1739 * var(--u));    bottom: calc(-5.59 * var(--u)); width: calc(94.066 * var(--u)); }

/* Phones: pure proportional scaling would make text unreadable, so the
   text column switches to readable sizes; characters keep scaling. */
@media (max-width: 767px) {
  .layo-hero {
    height: auto;
    min-height: 100svh;
    padding-top: calc(var(--header-height) + 1rem);
    padding-bottom: calc(220 * var(--u) + 1.5rem);
  }
  .layo-hero__content { padding: 0 1rem; }
  .layo-hero__logo { width: min(60vw, 260px); }
  .layo-hero__subtitle {
    margin-top: 1rem;
    font-size: 1.15rem;
    white-space: normal;
  }
  .layo-hero__links {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0 2.5rem;
  }
  .layo-hero__btn {
    width: 240px;
    height: 44px;
    padding: 0 1.25rem;
    border-radius: 22px;
    font-size: 0.95rem;
  }
}

/* ====================================================
   2. OVERVIEW — Figma frame y 958 → 2362 (1404px tall)
   Overlapping collage, so blocks are placed absolutely
   in --u units relative to the section's top-left.
   ==================================================== */
.layo-overview {
  position: relative;
  height: calc(1404 * var(--u));
  overflow: hidden;
  background: #151b41;
}
/* Background photo + gradient (Figma node 6756:174 starts 26px above the section) */
.layo-overview::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-26 * var(--u));
  height: calc(1582 * var(--u));
  background:
    linear-gradient(to bottom, rgba(25, 45, 143, 0.5) 0%, #151b41 85.161%),
    url('/assets/img/layo/esta1.jpg') center / cover no-repeat;
}
.layo-overview > * { position: absolute; }

/* Tags */
.layo-overview__tags {
  left: calc(115 * var(--u));
  top: calc(221 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}
.layo-overview__tags li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(246.747 * var(--u));
  height: calc(56 * var(--u));
  border-radius: calc(16 * var(--u));
  background: #fef9c3;
  color: #1b2348;
  font-size: calc(24 * var(--u));
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

/* Light-blue intro card */
.layo-overview__card {
  left: calc(485 * var(--u));
  top: calc(221 * var(--u));
  width: calc(542 * var(--u));
  height: calc(447 * var(--u));
  padding: calc(67 * var(--u)) 0 0 calc(67 * var(--u));
  border-radius: calc(16 * var(--u));
  background: #bcd5ff;
}
.layo-overview__card p {
  width: calc(362 * var(--u));
  margin: 0;
  color: #192d8f;
  font-size: calc(24 * var(--u));
  font-weight: 500;
  line-height: normal;
}

/* Photo: 960×678 frame (exported at its Figma crop), bleeds past the right edge */
.layo-overview__photo {
  left: calc(986 * var(--u));
  top: calc(59 * var(--u));
  width: calc(960 * var(--u));
  height: calc(678.47 * var(--u));
  overflow: hidden;
}
/* the export's last pixel row is almost transparent; overscan it so no
   seam (previously a white line) shows at the bottom edge */
.layo-overview__photo img {
  display: block;
  width: 100%;
  height: calc(100% + 2px);
  object-fit: cover;
  object-position: top;
}

/* iPhone PNG includes its own shadow padding; phone itself is 385×781 at (256,267) */
.layo-overview__phone {
  left: calc(550.8 * var(--u));
  top: calc(275.5 * var(--u));
  width: calc(955 * var(--u));
  max-width: none;
  height: auto;
  pointer-events: none;
}

/* Description paragraphs */
.layo-overview__body {
  inset: 0;
  pointer-events: none;
}
.layo-overview__body p {
  position: absolute;
  left: calc(115 * var(--u));
  width: calc(585 * var(--u));
  margin: 0;
  color: #bcd5ff;
  font-size: calc(24 * var(--u));
  font-weight: 400;
  line-height: normal;
  pointer-events: auto;
}
.layo-overview__body p:nth-child(1) { top: calc(894 * var(--u)); color: #bbd3fe; }
.layo-overview__body p:nth-child(2) { top: calc(1168 * var(--u)); }
.layo-overview__body strong { font-weight: 700; }

/* Meta (Figma 6818:417 + 6833:804): labels in a right-aligned column, each on
   a blue pill whose right edge is 7px past the label; values in a second
   column 22px to the right. Rows 38.4px (160% of 24) + 13.67 paragraph space. */
.layo-overview__meta {
  left: calc(1292 * var(--u));
  top: calc(932 * var(--u));
  width: calc(580 * var(--u));
  margin: 0;
  color: #bbd3fd;
  font-weight: 500;
  text-transform: capitalize; /* Figma text style: "Individual Project" */
  z-index: 0;
  isolation: isolate;
}
.layo-overview__meta-row {
  display: grid;
  grid-template-columns: calc(76 * var(--u)) 1fr;
  column-gap: calc(22 * var(--u));
  align-items: center;
  height: calc(38.4 * var(--u));
  margin-bottom: calc(13.667 * var(--u));
}
.layo-overview__meta-row:last-child { margin-bottom: 0; }
.layo-overview__meta dt,
.layo-overview__meta dd { margin: 0; line-height: 1; }
.layo-overview__meta dt {
  position: relative;
  text-align: right;
  font-size: calc(16 * var(--u));
}
.layo-overview__meta dt::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: calc(-7 * var(--u));
  top: 50%;
  width: calc(var(--pill-w) * var(--u));
  height: calc(29 * var(--u));
  transform: translateY(-50%);
  border-radius: calc(16 * var(--u));
  background: #3772ff;
}
.layo-overview__meta dd { font-size: calc(24 * var(--u)); }
.layo-overview__meta-row--role     { --pill-w: 102; }
.layo-overview__meta-row--type     { --pill-w: 102; }
.layo-overview__meta-row--duration { --pill-w: 128; }
.layo-overview__meta-row--method   { --pill-w: 122; }
.layo-overview__meta-row--tools    { --pill-w: 102; }

/* Phones: one readable column — tags, card, photo, phone, text, meta */
@media (max-width: 767px) {
  .layo-overview {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 3rem 1.25rem;
  }
  .layo-overview::before { top: 0; height: 100%; }
  .layo-overview > * { position: relative; inset: auto; left: auto; top: auto; }
  .layo-overview__tags {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .layo-overview__tags li {
    width: auto;
    height: auto;
    padding: 0.4rem 1rem;
    border-radius: 12px;
    font-size: 0.95rem;
  }
  .layo-overview__card {
    width: auto;
    height: auto;
    padding: 1.5rem;
    border-radius: 12px;
  }
  .layo-overview__card p { width: auto; font-size: 1.05rem; }
  .layo-overview__photo {
    width: auto;
    height: auto;
    aspect-ratio: 960 / 678.47;
    margin: 0 -1.25rem;
  }
  .layo-overview__phone {
    width: 130%;
    max-width: 520px;
    align-self: center;
    margin: -12% 0;
  }
  .layo-overview__body { display: flex; flex-direction: column; gap: 1rem; }
  .layo-overview__body p {
    position: static;
    width: auto;
    font-size: 1rem;
  }
  .layo-overview__meta { width: auto; }
  .layo-overview__meta-row {
    grid-template-columns: 4.75rem 1fr;
    column-gap: 0.9rem;
    height: auto;
    margin-bottom: 0.6rem;
  }
  .layo-overview__meta dt { font-size: 0.75rem; padding-right: 0.45rem; }
  .layo-overview__meta dt::before { right: 0; width: 4.75rem; height: 1.6em; border-radius: 8px; }
  .layo-overview__meta dd { font-size: 1rem; }
}

/* ====================================================
   3. PROBLEM
   ==================================================== */
.layo-problem {
  position: relative;
  /* Figma 6536:4183: solid #151b41 at the top (continues the Overview's gradient) → 70%,
     over the check-in counters photo at its Figma crop (EXIF-rotated portrait). */
  background:
    linear-gradient(to bottom, #151b41 0%, rgba(21, 27, 65, 0.7) 100%),
    url('/assets/img/layo/20250619_130539.jpg') calc(-280.8 * var(--u)) calc(-1240.3 * var(--u)) / calc(2709.6 * var(--u)) auto no-repeat;
  padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 10vw, 8rem);
}

.layo-problem__inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.layo-problem__inner > p {
  font-size: clamp(0.9rem, 1.7vw, 1.1rem);
  line-height: 1.75;
}

.layo-problem__question {
  border-left: 3px solid #fff;
  padding-left: 1.5rem;
}
.layo-problem__question-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  opacity: 0.75;
}
.layo-problem__question p:last-child {
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.55;
}

@media (max-width: 767px) {
  .layo-problem {
    background-position: center, center 45%;
    background-size: auto, cover;
  }
}

/* ====================================================
   4. DESIGN PROCESS — Figma node 6536:4197 (1078px tall)
   Giant 70%-opacity phase words with their lists laid over them.
   ==================================================== */
.layo-process {
  position: relative;
  height: calc(1078 * var(--u));
  /* Black 20% over cream 70% over the photo. The photo is esta2.png (a tighter
     crop of the Figma image) placed so it lands on the same Figma crop, which is
     stretched non-uniformly in the design (width 1931.5, height 2317.6). */
  background:
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    linear-gradient(rgba(254, 249, 195, 0.7), rgba(254, 249, 195, 0.7)),
    url('/assets/img/layo/esta2.png') calc(-5.4 * var(--u)) calc(-584.8 * var(--u)) / calc(1930.4 * var(--u)) calc(2182.8 * var(--u)) no-repeat;
  color: #000;
  overflow: hidden;
}

.layo-process__grid { display: contents; }

.layo-process__phase {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
}
.layo-process__phase--empathize { --x: 156;  --y: 85;  --lx: 54; --ly: 103; --c: #f9c80e; }
.layo-process__phase--define    { --x: 1184; --y: 88;  --lx: 54; --ly: 101; --c: #fa7f3d; }
.layo-process__phase--ideate    { --x: 156;  --y: 477; --lx: 54; --ly: 101; --c: #f86624; }
.layo-process__phase--prototype { --x: 871;  --y: 477; --lx: 54; --ly: 92;  --c: #3772ff; }
.layo-process__phase--test      { --x: 172;  --y: 792; --lx: 53; --ly: 91;  --c: #192d8f; }

.layo-process__label {
  margin: 0;
  font-family: var(--lf);
  font-size: calc(150 * var(--u));
  font-weight: 800;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--c);
  opacity: 0.7;
}

.layo-process__phase ul {
  position: absolute;
  left: calc(var(--lx) * var(--u));
  top: calc(var(--ly) * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}
.layo-process__phase li {
  font-size: calc(24 * var(--u));
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

/* Phones: phases stacked, words scaled to ~56px, list still overlapping the word */
@media (max-width: 767px) {
  .layo-process {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 3rem 1.25rem;
    background-position: 0 0, 0 0, center 40%;
    background-size: auto, auto, cover;
  }
  .layo-process__phase { position: relative; left: auto; top: auto; }
  .layo-process__label { font-size: 56px; }
  .layo-process__phase ul {
    position: relative;
    left: auto;
    top: auto;
    margin: -32px 0 0 20px;
  }
  .layo-process__phase li { font-size: 1rem; white-space: normal; }
}

/* ====================================================
   5. KEY INSIGHTS — Figma y 3992 → 5222 (1230px tall)
   Absolute collage over a framed, washed-out photo.
   ==================================================== */
.layo-insights {
  position: relative;
  height: calc(1230.4 * var(--u));
  background: #b7c1bc;
  overflow: hidden;
}
.layo-insights > * { position: absolute; margin: 0; }

.layo-insights__photo {
  left: calc(289.9 * var(--u));
  top: calc(110.6 * var(--u));
  width: calc(1340 * var(--u));
  height: calc(1005 * var(--u));
  background:
    linear-gradient(rgba(217, 217, 217, 0.6), rgba(217, 217, 217, 0.6)),
    url('/assets/img/layo/esta3.jpg') center / cover no-repeat;
}

.layo-insights__eyebrow {
  left: calc(100 * var(--u));
  top: calc(222.6 * var(--u));
  color: #0f1945;
  font-size: calc(24 * var(--u));
  font-weight: 400;
  line-height: normal;
}

/* Pills: the <li> is the right-aligned text box; ::before/::after draw the
   pill(s) at their own Figma coordinates, offset from the text box. */
.layo-insights__pills {
  inset: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.layo-insights__pills li {
  position: absolute;
  z-index: 0;
  left: calc((var(--tr) - var(--tw)) * var(--u));
  top: calc(var(--ty) * var(--u));
  width: calc(var(--tw) * var(--u));
  font-size: calc(24 * var(--u));
  font-weight: 500;
  line-height: normal;
  text-align: right;
}
.layo-insights__pills li::before,
.layo-insights__pill--double::after {
  content: "";
  position: absolute;
  z-index: -1;
  height: calc(41 * var(--u));
  border-radius: calc(24 * var(--u));
  background: var(--pill-bg);
}
.layo-insights__pills li::before {
  left: calc((var(--px) - var(--tr) + var(--tw)) * var(--u));
  top: calc((var(--py) - var(--ty)) * var(--u));
  width: calc(var(--pw) * var(--u));
}
.layo-insights__pill--double::after {
  left: calc((var(--p2x) - var(--tr) + var(--tw)) * var(--u));
  top: calc((var(--p2y) - var(--ty)) * var(--u));
  width: calc(var(--p2w) * var(--u));
}
.layo-insights__pills strong { font-weight: 700; }
.layo-insights__pills--blue   li { --pill-bg: #192d8f; color: #bcd5ff; }
.layo-insights__pills--yellow li { --pill-bg: #fef9c3; color: #192d8f; }

/* Persona card, flush with the right edge */
.layo-insights__card {
  left: calc(1415 * var(--u));
  top: calc(605.6 * var(--u));
  width: calc(465 * var(--u));
  height: calc(335 * var(--u));
  padding: calc(51 * var(--u)) calc(38 * var(--u)) 0 0;
  border-radius: calc(24 * var(--u));
  background: #fef9c3;
  text-align: right;
  font-size: calc(24 * var(--u));
  line-height: normal;
}
.layo-insights__card h3 {
  margin: 0 0 calc(15.1 * var(--u));
  color: #2e4b9b;
  font-size: inherit;
  font-weight: 700;
  line-height: normal;
}
.layo-insights__card p {
  width: calc(373 * var(--u));
  margin: 0 0 0 auto;
  color: #192d8f;
  font-weight: 400;
}
.layo-insights__card p + p { margin-top: calc(29.26 * var(--u)); }

.layo-insights__char {
  left: calc(1341.1 * var(--u));
  top: calc(676.7 * var(--u));
  width: calc(117 * var(--u));
  height: auto;
}

.layo-insights__solo {
  left: calc(1395 * var(--u));
  top: calc(955.4 * var(--u));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(3.7 * var(--u));
  color: #192d8f;
  font-size: calc(24 * var(--u));
  line-height: normal;
  white-space: nowrap;
}
.layo-insights__solo strong { font-weight: 700; }
.layo-insights__solo span { font-weight: 500; }

/* Phones: photo on top, then blue pills, yellow pills and the persona */
@media (max-width: 767px) {
  .layo-insights {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 3rem 1.25rem;
  }
  .layo-insights > * { position: relative; inset: auto; left: auto; top: auto; }
  .layo-insights__photo {
    width: auto;
    height: auto;
    aspect-ratio: 1340 / 1005;
    margin: 0 -1.25rem;
  }
  .layo-insights__eyebrow { font-size: 1rem; margin-top: 0.5rem; }
  .layo-insights__pills {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
  }
  .layo-insights__pills li {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    padding: 0.45rem 1rem;
    font-size: 0.95rem;
  }
  .layo-insights__pills li::before { inset: 0; width: auto; height: auto; border-radius: 999px; }
  .layo-insights__pill--double::after { display: none; }
  .layo-insights__card {
    width: auto;
    height: auto;
    margin: 1.5rem 0 0 4.5rem;
    padding: 1.25rem;
    border-radius: 16px;
    font-size: 0.95rem;
  }
  .layo-insights__card h3 { margin-bottom: 0.5rem; }
  .layo-insights__card p { width: auto; }
  .layo-insights__card p + p { margin-top: 0.75rem; }
  .layo-insights__char {
    position: absolute;
    left: 1.25rem;
    top: auto;
    bottom: 5.5rem;
    width: 70px;
  }
  .layo-insights__solo {
    transform: none;
    align-self: flex-start;
    gap: 0.15rem;
    font-size: 1rem;
  }
}

/* ====================================================
   6. FEATURES (+ 7. THREE DIMENSIONS share this section)
   Figma y 5222 → 7413 (2191px): one continuous background —
   esta4.jpg at its Figma crop, black 55% over blue 30%, and a
   fade (Figma "Rectangle 7") into solid #4f5a71, the Evolution
   section's color, so the two sections join seamlessly.
   ==================================================== */
.layo-features {
  position: relative;
  height: calc(2191 * var(--u));
  overflow: hidden;
  color: #fff;
  background:
    /* Figma blends this fade with straight (non-premultiplied) alpha; browsers
       premultiply, which darkens the middle and leaves a visible edge at the
       Evolution section. Explicit intermediate stops reproduce Figma's curve. */
    linear-gradient(to bottom,
        rgba(113, 128, 153, 0) 0,
        rgba(113, 128, 153, 0.1) calc(391.3 * var(--u)),
        rgba(110, 124, 149, 0.19) calc(462.2 * var(--u)),
        rgba(106, 120, 145, 0.28) calc(533.0 * var(--u)),
        rgba(103, 117, 141, 0.37) calc(603.9 * var(--u)),
        rgba(99, 113, 137, 0.46) calc(674.8 * var(--u)),
        rgba(96, 109, 133, 0.55) calc(745.6 * var(--u)),
        rgba(93, 105, 129, 0.64) calc(816.5 * var(--u)),
        rgba(89, 101, 125, 0.73) calc(887.4 * var(--u)),
        rgba(86, 98, 121, 0.82) calc(958.2 * var(--u)),
        rgba(82, 94, 117, 0.91) calc(1029.1 * var(--u)),
        #4f5a71 calc(1100.0 * var(--u)))
      0 calc(1094 * var(--u)) / 100% calc(1097 * var(--u)) no-repeat,
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
    linear-gradient(rgba(25, 45, 143, 0.3), rgba(25, 45, 143, 0.3)),
    url('/assets/img/layo/esta4.jpg') calc(-641.3 * var(--u)) calc(-212.3 * var(--u)) / calc(3203.6 * var(--u)) calc(2403.3 * var(--u)) no-repeat;
}

/* Exported Figma group: 4 phones rotated 25°, clipped at the left edge */
.layo-features__phones {
  position: absolute;
  left: 0;
  top: calc(-191.4 * var(--u));
  width: calc(1273 * var(--u));
  max-width: none;
  height: auto;
  pointer-events: none;
}

.layo-features__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.layo-features__item {
  position: absolute;
  right: calc(80 * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  text-align: right;
  font-size: calc(24 * var(--u));
  line-height: normal;
}
.layo-features__item--map          { --y: 154.8; --w: 814; }
.layo-features__item--feed         { --y: 306.8; --w: 864; }
.layo-features__item--connection   { --y: 570.6; --w: 820; }
.layo-features__item--gamification { --y: 771.6; --w: 814; }
.layo-features__item h3 {
  margin: 0;
  font-size: inherit;
  font-weight: 600;
  line-height: normal;
}
.layo-features__item p {
  margin: 0;
  font-weight: 300;
}

/* Hand + phone: user export of the visible part (Figma clips it at the right edge) */
.layo-features__hand {
  position: absolute;
  left: calc(976 * var(--u));
  top: calc(881.6 * var(--u));
  width: calc(944 * var(--u));
  height: auto;
  pointer-events: none;
}

/* Phones: phones on top, then the feature texts, then the hand */
@media (max-width: 767px) {
  .layo-features {
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 2rem 1.25rem 0;
    background-image:
      linear-gradient(to bottom, rgba(113, 128, 153, 0) 0, rgba(113, 128, 153, 0.1) 35.6%, rgba(110, 124, 149, 0.19) 42.0%, rgba(106, 120, 145, 0.28) 48.5%, rgba(103, 117, 141, 0.37) 54.9%, rgba(99, 113, 137, 0.46) 61.4%, rgba(96, 109, 133, 0.55) 67.8%, rgba(93, 105, 129, 0.64) 74.2%, rgba(89, 101, 125, 0.73) 80.7%, rgba(86, 98, 121, 0.82) 87.1%, rgba(82, 94, 117, 0.91) 93.6%, #4f5a71 100.0%),
      linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
      linear-gradient(rgba(25, 45, 143, 0.3), rgba(25, 45, 143, 0.3)),
      url('/assets/img/layo/esta4.jpg');
    background-size: 100% 50%, auto, auto, cover;
    background-position: 0 100%, 0 0, 0 0, center;
  }
  .layo-features__phones {
    position: relative;
    top: auto;
    width: 85%;
    margin: -4rem 0 -18% -1.25rem;
  }
  .layo-features__list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
  }
  .layo-features__item {
    position: static;
    width: auto;
    font-size: 1rem;
  }
  .layo-features__hand {
    position: relative;
    left: auto;
    top: auto;
    width: 75%;
    align-self: flex-end;
    margin: 1.5rem -1.25rem 0 0;
  }
}

/* ====================================================
   7. THREE DIMENSIONS — inside .layo-features (shared background)
   Exact Figma coordinates; the triangle is the Figma "Subtract"
   vector (two polygons), which gives the open, rounded corners.
   Diagram origin = the "Social" label's top-left (638, 1983−386); Figma 6818:222.
   ==================================================== */
.layo-triangle__text {
  position: absolute;
  left: calc(282 * var(--u));
  top: calc(1763 * var(--u));
  width: calc(406 * var(--u));
  margin: 0;
  color: #fff;
  font-size: calc(32 * var(--u));
  font-weight: 400;
  line-height: normal;
}

.layo-triangle__diagram {
  position: absolute;
  left: calc(638 * var(--u));
  top: calc(1597 * var(--u));
  width: calc(628 * var(--u));
  height: calc(425 * var(--u));
}
.layo-triangle__diagram > * { position: absolute; }

.layo-triangle__shape {
  left: calc(127.168 * var(--u));
  top: calc(62 * var(--u));
  width: calc(370.664 * var(--u));
  height: calc(325.25 * var(--u));
}
.layo-triangle__char {
  left: calc(265 * var(--u));
  top: calc(162 * var(--u));
  width: calc(98 * var(--u));
  height: calc(210 * var(--u));
}

.layo-triangle__label {
  height: calc(39 * var(--u));
  color: #f9c80e;
  font-size: calc(32 * var(--u));
  font-weight: 700;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
}
.layo-triangle__label--physical { left: calc(241 * var(--u)); top: 0;                     width: calc(141 * var(--u)); }
.layo-triangle__label--social   { left: 0;                    top: calc(386 * var(--u)); width: calc(100 * var(--u)); }
.layo-triangle__label--media    { left: calc(525 * var(--u)); top: calc(386 * var(--u)); width: calc(103 * var(--u)); }

/* Phones: text, then the diagram scaled to the column width */
@media (max-width: 767px) {
  .layo-triangle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 3rem 0 4rem;
  }
  .layo-triangle__text {
    position: static;
    width: auto;
    font-size: 1.25rem;
    text-align: center;
  }
  .layo-triangle__diagram {
    position: relative;
    left: auto;
    top: auto;
    /* re-scale the diagram's own units to the column */
    --u: calc(min(100vw - 2.5rem, 340px) / 628);
  }
  .layo-triangle__label { font-size: calc(32 * var(--u) * 1.15); }
}

/* ====================================================
   8. TESTING — Figma 6818:222, y 7413 → 15658, solid #4f5a71 (continues
   the features fade). Coordinates below are relative to the section top.
   Three method buttons in a staircase; each opens its text below with a
   54px bar dropping from the button (assets/js/layo-testing.js sets the
   bar lengths). Closed texts take no space. Where an open text crosses a
   later bar, the text's own band (#4f5a71 at 80%) dims the bar, as the
   Figma "Rectangle 220/221/222" masks do.
   ==================================================== */
.layo-testing {
  position: relative;
  overflow: hidden;
  padding-bottom: calc(144 * var(--u));
  background: #4f5a71;
  box-shadow: 0 -2px 0 #4f5a71; /* hides the sub-pixel seam with the section above */
  color: #fff;
  font-size: calc(24 * var(--u));
  line-height: normal;
}
.layo-testing h2,
.layo-testing h3,
.layo-testing p,
.layo-testing blockquote,
.layo-testing figure { margin: 0; }

.layo-testing__giant {
  position: absolute;
  left: 50%; /* centred on the page (user request); wider than the screen */
  top: calc(-98 * var(--u));
  transform: translateX(-50%);
  color: #192d8f;
  opacity: 0.7;
  font-size: calc(1078.71 * var(--u));
  font-weight: 800;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* first open text starts at Figma y 8465 */
.layo-testing__methods { padding-top: calc(1052 * var(--u)); }

/* --- buttons (Figma "Button / Primary" 6818:751/753/756) --- */
.layo-test-btn {
  --c: 55, 114, 255;
  position: absolute;
  z-index: 3;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(40 * var(--u));
  box-sizing: border-box;
  width: calc(527 * var(--u));
  height: calc(93 * var(--u));
  padding: 0 calc(64 * var(--u)) 0 calc(16 * var(--u));
  border: calc(4 * var(--u)) solid rgb(var(--c));
  border-radius: calc(44.64 * var(--u));
  background: rgba(var(--c), 0.6);
  box-shadow:
    0 calc(7.44 * var(--u)) calc(7.44 * var(--u)) rgba(0, 0, 0, 0.3),
    0 calc(14.88 * var(--u)) calc(22.32 * var(--u)) calc(11.16 * var(--u)) rgba(0, 0, 0, 0.15);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: transform 0.25s var(--ease-standard), background-color 0.25s var(--ease-standard);
}
.layo-test-btn:hover,
.layo-test-btn:focus-visible { transform: translateY(-3px) scale(1.03); }
.layo-test-btn[aria-expanded="true"] { background: rgb(var(--c)); }
.layo-test-btn__num { font-size: calc(64 * var(--u)); line-height: 1; }
.layo-test-btn__label { font-size: calc(24 * var(--u)); line-height: normal; }
.layo-test-btn--1 { --x: 210;  --y: 459; }
.layo-test-btn--2 { --x: 688;  --y: 616; --c: 248, 102, 36; }
.layo-test-btn--3 { --x: 1162; --y: 773; --c: 249, 200, 14; }

/* --- compact dock: the same three toggles, pinned under the header while
   the big buttons are scrolled away and a method text is on screen --- */
.layo-test-dock {
  position: fixed;
  left: 50%;
  top: var(--dock-top, 96px);
  z-index: 40; /* under the site header (50) */
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(79, 90, 113, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(10, 16, 40, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}
.layo-test-dock.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}
.layo-test-dock__btn {
  --c: 55, 114, 255;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px 0 6px;
  border: 2px solid rgb(var(--c));
  border-radius: 999px;
  background: rgba(var(--c), 0.6);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s var(--ease-standard), background-color 0.2s var(--ease-standard);
}
.layo-test-dock__btn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  font-size: 15px;
}
.layo-test-dock__btn b { font-weight: inherit; }
.layo-test-dock__btn .is-short { display: none; }
.layo-test-dock__btn:hover,
.layo-test-dock__btn:focus-visible { transform: translateY(-2px) scale(1.04); }
.layo-test-dock__btn[aria-expanded="true"] { background: rgb(var(--c)); }
.layo-test-dock__btn--2 { --c: 248, 102, 36; }
.layo-test-dock__btn--3 { --c: 249, 200, 14; }

/* --- bars: length = 0 while closed, set by layo-testing.js when open --- */
.layo-testing__bar {
  position: absolute;
  z-index: 0;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(54 * var(--u));
  height: 0;
  border-radius: calc(64 * var(--u));
  background: rgba(var(--c), 0.6);
}
.layo-testing__bar--1 { --x: 228;  --y: 589; --c: 55, 114, 255; }
.layo-testing__bar--2 { --x: 979;  --y: 740; --c: 248, 102, 36; }
.layo-testing__bar--3 { --x: 1579; --y: 912; --c: 249, 200, 14; }

/* --- method texts --- */
.layo-test {
  position: relative;
  z-index: 1;
  height: 0;
  overflow: hidden;
}
.layo-test.is-open { height: auto; }
.layo-test--2 .layo-test__inner { padding-top: calc(61 * var(--u)); }
.layo-test--3 .layo-test__inner { padding-top: calc(146 * var(--u)); }
.layo-test__body {
  position: relative;
  box-sizing: border-box;
  margin-left: calc(var(--x) * var(--u));
  width: calc(var(--w) * var(--u));
  padding: calc(48 * var(--u)) 0 calc(65 * var(--u));
  opacity: 0;
  transition: opacity 0.35s ease;
}
.layo-test.is-shown .layo-test__body { opacity: 1; }
.layo-test--1 .layo-test__body { --x: 314; --w: 1424; background: rgba(79, 90, 113, 0.8); }
.layo-test--2 .layo-test__body { --x: 246; --w: 701;  text-align: right; }
.layo-test--3 .layo-test__body { --x: 246; --w: 1301; text-align: right; }
.layo-test__body h3 { font-size: inherit; font-weight: 700; margin-bottom: calc(29 * var(--u)); }
.layo-test__body p + p { margin-top: calc(29 * var(--u)); }
.layo-test__body strong { font-weight: 700; }

/* traveler quote, right of the orange bar, dimming the yellow one */
.layo-test__quote {
  position: absolute;
  left: calc(874 * var(--u));   /* Figma x 1120 */
  top: calc(482 * var(--u));    /* Figma y 9672 */
  width: calc(635 * var(--u));
  padding: calc(58 * var(--u)) 0 calc(43 * var(--u));
  background: rgba(79, 90, 113, 0.8);
  text-align: left;
  font-size: calc(32 * var(--u));
}
.layo-test__quote blockquote { font-weight: 700; font-style: italic; }
.layo-test__quote figcaption { margin-top: calc(29 * var(--u)); font-size: calc(24 * var(--u)); /* user: 24px */ }

/* --- expert feedback (Figma y 11351) --- */
.layo-experts,
.layo-changes {
  margin-left: calc(227 * var(--u));
}
.layo-experts {
  width: calc(1461 * var(--u));
  margin-top: calc(281 * var(--u));
}
.layo-experts h2,
.layo-changes h2 { font-size: calc(40 * var(--u)); font-weight: 600; }
.layo-experts__intro { margin-top: calc(25 * var(--u)) !important; }
.layo-experts__grid {
  display: grid;
  grid-template-columns: repeat(2, calc(640 * var(--u)));
  column-gap: calc(181 * var(--u));
  row-gap: calc(108 * var(--u));
  margin-top: calc(107 * var(--u));
}
.layo-expert h3 {
  font-size: inherit;
  font-weight: 600;
  margin-bottom: calc(59 * var(--u)); /* two empty lines in Figma */
}
.layo-expert blockquote {
  position: relative;
  padding-left: calc(34 * var(--u));
}
.layo-expert blockquote + blockquote { margin-top: calc(29 * var(--u)); }
/* these two have two empty lines between quotes in Figma */
.layo-expert--wide blockquote + blockquote { margin-top: calc(58 * var(--u)); }
.layo-expert blockquote::before {
  content: "“";
  position: absolute;
  left: 0;
  top: calc(-4 * var(--u));
  color: rgba(255, 255, 255, 0.45);
  font-size: calc(40 * var(--u));
  font-weight: 700;
  font-style: italic;
  line-height: 1;
}
.layo-expert blockquote::after {
  content: "";
  position: absolute;
  left: calc(6 * var(--u));
  top: calc(30 * var(--u));
  bottom: 0;
  width: calc(2 * var(--u));
  background: rgba(255, 255, 255, 0.4);
}

/* --- how testing changed the design (Figma y 13777) --- */
.layo-changes {
  width: calc(1477 * var(--u));
  margin-top: calc(289 * var(--u));
}
.layo-changes h2 { margin-bottom: calc(58 * var(--u)); }
.layo-changes p + p { margin-top: calc(29 * var(--u)); }
.layo-changes strong { font-weight: 700; }

/* --- the five home-screen iterations (Figma y 14981, 144 under the text) --- */
.layo-evolution__screens {
  display: flex;
  align-items: flex-start;
  gap: calc(72 * var(--u));
  margin: calc(144 * var(--u)) 0 0 calc(216 * var(--u));
  padding: 0;
  list-style: none;
}
.layo-evolution__screens li {
  width: calc(240 * var(--u));
  height: calc(533 * var(--u));
  /* rounded + lifted off the background (user request, not in Figma) */
  border-radius: calc(18 * var(--u));
  overflow: hidden;
  box-shadow:
    0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(10, 16, 40, 0.25),
    0 calc(22 * var(--u)) calc(44 * var(--u)) rgba(10, 16, 40, 0.45);
}
.layo-evolution__screens li.layo-evolution__screen--short { height: calc(520 * var(--u)); }
.layo-evolution__screens img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Phones: one column; each button opens its text right below it (accordion),
   with the bar running down the text's left edge */
@media (max-width: 767px) {
  .layo-testing {
    padding: 3rem 1.25rem;
    font-size: 0.95rem;
  }
  .layo-testing__giant {
    left: 50%;
    top: 0.5rem;
    width: auto;
    transform: translateX(-50%);
    font-size: 42vw;
  }
  .layo-testing__methods { padding-top: 0; }
  .layo-testing__bar { display: none; }
  .layo-test-dock { gap: 6px; padding: 5px; }
  .layo-test-dock__btn { height: 36px; padding: 0 12px 0 5px; font-size: 13px; gap: 6px; }
  .layo-test-dock__btn span { width: 24px; height: 24px; font-size: 13px; }
  .layo-test-dock__btn .is-long { display: none; }
  .layo-test-dock__btn .is-short { display: inline; }
  .layo-test-btn {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    min-height: 64px;
    margin-top: 1rem;
    padding: 0.6rem 1.25rem 0.6rem 1rem;
    gap: 1rem;
    justify-content: flex-start;
    border-width: 3px;
    border-radius: 32px;
  }
  .layo-test-btn__num { font-size: 2.4rem; }
  .layo-test-btn__label { font-size: 0.95rem; }
  .layo-test--2 .layo-test__inner,
  .layo-test--3 .layo-test__inner { padding-top: 0; }
  .layo-test__body {
    margin: 0;
    width: auto;
    padding: 1.25rem 0 1.5rem 1.5rem;
    text-align: left !important;
    background: none !important;
  }
  .layo-test__body::before {
    content: "";
    position: absolute;
    left: 0.4rem;
    top: 0;
    bottom: 0.75rem;
    width: 6px;
    border-radius: 6px;
    background: rgba(var(--c), 0.6);
  }
  .layo-test--1 { --c: 55, 114, 255; }
  .layo-test--2 { --c: 248, 102, 36; }
  .layo-test--3 { --c: 249, 200, 14; }
  .layo-test__body h3 { margin-bottom: 1rem; }
  .layo-test__body p + p { margin-top: 1rem; }
  .layo-test__quote {
    position: static;
    width: auto;
    margin-top: 1.5rem;
    padding: 0;
    background: none;
    font-size: 1.1rem;
  }
  .layo-test__quote figcaption { margin-top: 0.75rem; font-size: 0.95rem; }
  .layo-experts,
  .layo-changes { width: auto; margin-left: 0; }
  .layo-experts { margin-top: 3.5rem; }
  .layo-changes { margin-top: 3.5rem; }
  .layo-experts h2,
  .layo-changes h2 { font-size: 1.5rem; }
  .layo-experts__intro { margin-top: 0.75rem !important; }
  .layo-experts__grid {
    grid-template-columns: 1fr;
    row-gap: 2.5rem;
    margin-top: 2rem;
  }
  .layo-expert h3 { margin-bottom: 1rem; }
  .layo-expert blockquote { padding-left: 1.75rem; }
  .layo-expert blockquote + blockquote { margin-top: 1rem; }
  .layo-expert blockquote::before { font-size: 1.75rem; top: -0.15rem; }
  .layo-expert blockquote::after { left: 0.3rem; top: 1.4rem; width: 2px; }
  .layo-changes h2 { margin-bottom: 1.25rem; }
  .layo-changes p + p { margin-top: 1rem; }
  .layo-evolution__screens {
    gap: 1rem;
    margin: 2.5rem -1.25rem 0;
    padding: 0 1.25rem 2rem; /* room for the shadows inside the scroller */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
  }
  .layo-evolution__screens li {
    flex: 0 0 auto;
    width: 160px;
    height: calc(160px * 533 / 240);
    scroll-snap-align: start;
    border-radius: 14px;
    box-shadow: 0 3px 8px rgba(10, 16, 40, 0.25), 0 14px 28px rgba(10, 16, 40, 0.45);
  }
  .layo-evolution__screens li.layo-evolution__screen--short { height: calc(160px * 520 / 240); }
}

/* ====================================================
   9. OUTCOME — Figma y 8202 → 9114 (912px); on request the section is
   one screen tall, with the Figma content block (text top → card bottom,
   512px) centred vertically. Card + figures overlap its left edge.
   ==================================================== */
.layo-outcome {
  position: relative;
  height: max(100svh, calc(912 * var(--u)));
  background: #192d8f;
  --block-top: calc(50% - 256 * var(--u));
}

.layo-outcome__text {
  position: absolute;
  left: calc(461 * var(--u));
  top: var(--block-top);
  width: calc(1027 * var(--u));
  margin: 0;
  color: #fef9c3;
  font-size: calc(24 * var(--u));
  font-weight: 400;
  line-height: normal;
}
.layo-outcome__text strong { font-weight: 700; }

.layo-outcome__group {
  position: absolute;
  left: calc(744 * var(--u));
  top: calc(var(--block-top) + 177 * var(--u));
  width: calc(768 * var(--u));
  height: calc(335 * var(--u));
}

.layo-outcome__card {
  position: absolute;
  left: calc(79 * var(--u));
  top: 0;
  width: calc(689 * var(--u));
  height: calc(335 * var(--u));
  padding: calc(95 * var(--u)) calc(37 * var(--u)) 0 0;
  border-radius: calc(24 * var(--u));
  background: #fef9c3;
  color: #192d8f;
  text-align: right;
}
.layo-outcome__card p {
  width: calc(530 * var(--u));
  margin: 0 0 0 auto;
  font-size: calc(24 * var(--u));
  font-weight: 400;
  line-height: normal;
}
.layo-outcome__card strong { font-weight: 700; }

.layo-outcome__chars {
  position: absolute;
  left: 0;
  top: calc(128 * var(--u));
  width: calc(158 * var(--u));
  height: calc(207 * var(--u));
}

/* Phones: text, then the card full width with the figures on its left edge */
@media (max-width: 767px) {
  .layo-outcome {
    height: auto;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 1.25rem;
  }
  .layo-outcome__text {
    position: static;
    width: auto;
    font-size: 1rem;
  }
  .layo-outcome__group {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    margin-top: 2rem;
  }
  .layo-outcome__card {
    position: relative;
    left: auto;
    width: auto;
    height: auto;
    margin-left: 3.25rem;
    padding: 1.25rem;
    border-radius: 16px;
  }
  .layo-outcome__card p { width: auto; font-size: 0.95rem; }
  .layo-outcome__chars {
    top: auto;
    bottom: 0;
    width: 76px;
    height: auto;
  }
}

/* ====================================================
   10. LIFESTYLE PHOTOS — Figma y 9114 → 10242 (1128px)
   Three 640px columns. The local exports are wider crops than the
   Figma frames, so each image is scaled/offset to land on the Figma
   crop (registered against the Figma render, 97–99% match).
   ==================================================== */
.layo-lifestyle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: calc(1127.9 * var(--u));
}
.layo-lifestyle__photo {
  position: relative;
  overflow: hidden;
}
.layo-lifestyle__photo img {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: auto;
  max-width: none;
}
.layo-lifestyle__photo--passport { --x: -384; --y: -536; --w: 1470.7; --fx: 47.9%; --fy: 52.9%; }
.layo-lifestyle__photo--car      { --x: -64;  --y: 0;    --w: 883.7;  --fx: 43.5%; --fy: 45.1%; }
.layo-lifestyle__photo--friends  { --x: -208; --y: -24;  --w: 896.9;  --fx: 58.9%; --fy: 46.4%; }

/* Phones: photos stacked full width, cropped around the same focus point */
@media (max-width: 767px) {
  .layo-lifestyle {
    grid-template-columns: 1fr;
    height: auto;
  }
  .layo-lifestyle__photo { height: 420px; }
  .layo-lifestyle__photo img {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--fx) var(--fy);
  }
}

/* ====================================================
   11. REFLECTION + CTA — Figma y 10242 → 12157 (1915px), redesigned:
   one horizontal light-blue → peach gradient, giant traveler standing
   on the bottom edge, two-line "Explore / Layo" title, hero-style buttons.
   ==================================================== */

.layo-cta {
  position: relative;
  height: calc(1915.1 * var(--u));
  background: linear-gradient(to right, #bcd5ff 60.577%, #fdcfab);
  overflow: hidden;
}
.layo-cta > * { position: absolute; margin: 0; }

.layo-cta__reflection {
  left: calc(215 * var(--u));
  top: calc(265.1 * var(--u));
  width: calc(549 * var(--u));
  color: #192d8f;
  font-size: calc(24 * var(--u));
  font-weight: 400;
  line-height: calc(38 * var(--u));
}

.layo-cta__char {
  left: calc(463 * var(--u));
  top: calc(714 * var(--u));
  width: calc(729 * var(--u));
  height: auto;
}

.layo-cta__title {
  left: calc(1022 * var(--u));
  top: calc(1352.1 * var(--u));
  width: calc(809.75 * var(--u));
  color: #192d8f;
  font-size: calc(148.619 * var(--u));
  line-height: calc(153 * var(--u));
  text-align: right;
  text-shadow:
    0 calc(3.357 * var(--u)) calc(3.357 * var(--u)) rgba(0, 0, 0, 0.3),
    0 calc(6.714 * var(--u)) calc(10.07 * var(--u)) rgba(0, 0, 0, 0.15);
}
.layo-cta__title span { display: block; }
.layo-cta__title-explore { font-weight: 800; }
/* "Layo" is the Hoss Round wordmark as outlined SVG (em-sized so it follows the
   title's font-size); Figma places its glyph top 14.3px into the 153px line. */
.layo-cta__title-layo {
  height: 1.0295em;
  line-height: 0;
}
.layo-cta__title-layo svg {
  width: 2.0592em;
  height: auto;
  margin: 0.0962em 0.012em 0 0;
  filter:
    drop-shadow(0 0.0226em 0.0113em rgba(0, 0, 0, 0.3))
    drop-shadow(0 0.0452em 0.0339em rgba(0, 0, 0, 0.15));
}

.layo-cta__links {
  left: calc(1264 * var(--u));
  top: calc(1717.1 * var(--u));
  display: flex;
  gap: calc(24 * var(--u));
}
/* same component as the hero buttons (Figma "Button / Primary") */
.layo-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(272 * var(--u));
  height: calc(48 * var(--u));
  border-radius: calc(24 * var(--u));
  font-family: var(--lf);
  font-size: calc(15.36 * var(--u));
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
  text-decoration: none;
}
.layo-cta__btn--prototype { --btn-bg: #192d8f; --btn-fg: #bcd5ff; }
.layo-cta__btn--figma     { --btn-bg: #bcd5ff; --btn-fg: #192d8f; }

/* Phones: reflection, then the traveler beside the title and buttons */
@media (max-width: 767px) {
  .layo-cta {
    display: grid;
    grid-template-columns: 38% 1fr;
    column-gap: 1rem;
    height: auto;
    padding: 3rem 1.25rem 0;
    background: linear-gradient(to right, #bcd5ff 45%, #fdcfab);
  }
  .layo-cta > * { position: static; }
  .layo-cta__reflection {
    grid-column: 1 / -1;
    width: auto;
    margin-bottom: 2rem;
    font-size: 1rem;
    line-height: 1.6;
  }
  .layo-cta__char {
    grid-row: 2 / span 2;
    width: 100%;
    align-self: end;
  }
  .layo-cta__title {
    width: auto;
    font-size: 3rem;
    line-height: 1.05;
    align-self: end;
  }
  .layo-cta__links {
    flex-direction: column;
    gap: 0.6rem;
    margin: 1rem 0 2.5rem;
  }
  .layo-cta__btn {
    width: 100%;
    height: 44px;
    padding: 0 0.75rem;
    border-radius: 22px;
    font-size: 0.85rem;
    white-space: normal;
    text-align: center;
  }
}

/* ====================================================
   12. EMBEDS — not in the Figma frame; designed with the page's
   palette. Hero/CTA buttons scroll here (#layo-prototype / #layo-figma).
   ==================================================== */
.layo-embed {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
  padding: calc(130 * var(--u)) calc(80 * var(--u)) calc(64 * var(--u));
  text-align: center;
}
.layo-embed--prototype { background: #192d8f; color: #fef9c3; }

/* Desktop: intro (title, lead, Full screen) beside a phone as tall as the screen allows */
@media (min-width: 768px) {
  .layo-embed--prototype {
    flex-direction: row;
    justify-content: center;
    gap: calc(140 * var(--u));
    padding-top: max(calc(132 * var(--u)), 96px);
    padding-bottom: calc(48 * var(--u));
    text-align: left;
  }
  .layo-embed--prototype .layo-embed__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: calc(520 * var(--u));
  }
  .layo-embed--prototype .layo-embed__lead { max-width: none; }
}
.layo-embed--figma     { background: #fdcfab; color: #192d8f; }

.layo-embed__title {
  margin: 0;
  font-size: clamp(28px, calc(48 * var(--u)), 48px);
  font-weight: 800;
  line-height: normal;
}
.layo-embed__lead {
  margin: 0.75rem 0 calc(36 * var(--u));
  max-width: 40rem;
  font-size: clamp(16px, calc(24 * var(--u)), 24px);
  font-weight: 400;
  line-height: normal;
}

/* iPhone-style frame around the live prototype (app screens are 360×800) */
.layo-phone {
  /* phone fills the screen height (below the navbar); the app scales to fit */
  --screen-h: clamp(460px, calc(100svh - 210px), 960px);
  --bezel: calc(var(--screen-h) * 0.018);
  padding: var(--bezel);
  border-radius: calc(var(--screen-h) * 0.075);
  background: #0b0d14;
  box-shadow:
    inset 0 0 0 2px #2a2f3d,
    0 calc(var(--screen-h) * 0.03) calc(var(--screen-h) * 0.08) rgba(5, 10, 40, 0.55);
}
.layo-phone__screen {
  position: relative;
  width: calc(var(--screen-h) * 0.45);
  height: var(--screen-h);
  overflow: hidden;
  border-radius: calc(var(--screen-h) * 0.06);
  background: #fff;
}
/* dynamic island */
.layo-phone__screen::after {
  content: "";
  position: absolute;
  top: calc(var(--screen-h) * 0.014);
  left: 50%;
  width: 30%;
  height: calc(var(--screen-h) * 0.034);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #0b0d14;
  pointer-events: none;
}
/* Figma's embed letterboxes the prototype with a fixed ~48px margin; the
   iframe is enlarged by that margin on every side and clipped by the screen,
   so the 360×800 app fills it edge to edge. */
.layo-phone__app {
  --embed-pad: 48px;
  position: absolute;
  left: calc(-1 * var(--embed-pad));
  top: calc(-1 * var(--embed-pad));
  width: calc(100% + 2 * var(--embed-pad));
  height: calc(100% + 2 * var(--embed-pad));
  border: 0;
}
.layo-phone__preview {
  width: 100%;
  height: 100%;
}

/* "Full screen" inside the page (phones, or when the browser refuses native
   fullscreen): the screen covers the viewport; layo-embeds.js toggles it. */
.layo-phone__screen.is-expanded {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  height: 100dvh;
  border-radius: 0;
}
.layo-phone__screen.is-expanded::after { display: none; } /* no dynamic island */
.layo-phone__close {
  display: none;
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(11, 13, 20, 0.75);
  color: #fff;
  cursor: pointer;
}
.layo-phone__screen.is-expanded .layo-phone__close { display: flex; }
.layo-no-scroll { overflow: hidden; }
.layo-phone__preview { display: none; object-fit: cover; }

.layo-embed__frame {
  width: min(100%, 1600px);
  height: clamp(420px, calc(100svh - 380px), 900px);
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(25, 45, 143, 0.25);
}
.layo-embed__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.layo-embed__open {
  margin-top: calc(48 * var(--u));
  padding: 0.75rem 1.75rem;
  border-radius: 999px;
  font-size: clamp(15px, calc(20 * var(--u)), 20px);
  font-weight: 500;
  text-decoration: none;
}
.layo-embed--prototype .layo-embed__open { --btn-bg: #fdcfab; --btn-fg: #192d8f; }
.layo-embed__fullscreen {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: 0;
  font-family: var(--lf);
  line-height: normal;
  cursor: pointer;
}
.layo-embed--figma .layo-embed__open     { --btn-bg: #192d8f; --btn-fg: #bcd5ff; }

@media (max-width: 767px) {
  .layo-embed { padding: calc(var(--header-height) + 1.5rem) 1.25rem 4rem; }
  .layo-embed__lead { margin-bottom: 2rem; }
  /* the live prototype runs right in the page here too (user request), in a
     phone frame as wide as the column allows; "Full screen" expands it inside
     the page (see .is-expanded) */
  .layo-phone { --screen-h: min(calc((100vw - 4rem) / 0.45), 78svh); }
  .layo-embed__fullscreen { margin: 0 0 1.5rem; }
  .layo-embed--prototype .layo-embed__intro { margin-bottom: 0; }
  .layo-embed--prototype .layo-embed__lead { margin-bottom: 1.5rem; }
  .layo-embed__frame { height: 70svh; border-radius: 16px; }
  .layo-embed__open { margin-top: 1.5rem; }
}