/* Cocon: white-paper trial. Accent panels retain their established palette. */
:root { --ivory: #fff; --paper: #fff; }
body.cocon-white { background: #fff; }

/* Human moments breathe between the product introduction and its explanations. */
.life-interlude { padding-top: 55px; padding-bottom: 55px; }
.life-heading { display: grid; grid-template-columns: 1.35fr 1fr; gap: 50px; align-items: end; margin-bottom: 30px; }
.life-heading h2 { font-size: clamp(34px, 4.1vw, 56px); margin-bottom: 0; }
.life-heading > p { color: var(--muted); font-size: 14px; line-height: 1.85; max-width: 370px; padding-bottom: 4px; }
.life-interlude figure { margin: 0; }
.life-interlude figure > img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 43%; border-radius: 32px; background: var(--lilac); }
.life-interlude figcaption { font-size: 10px; color: var(--muted); margin-top: 10px; text-align: right; }
.family-lifestyle { margin: 0; min-width: 0; }
.family-lifestyle > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; border-radius: 32px; }
.family-lifestyle figcaption { padding-top: 16px; font-family: var(--serif); font-size: 23px; line-height: 1.4; }
.family-lifestyle figcaption > span { display: block; margin-top: 7px; font: 10px/1.6 var(--sans); color: var(--muted); }
@media (max-width: 760px) {
  .life-interlude { padding-top: 40px; padding-bottom: 35px; }
  .life-heading { grid-template-columns: 1fr; gap: 18px; margin-bottom: 24px; }
  .life-heading > p { max-width: 100%; }
  .life-interlude figure > img { aspect-ratio: 4 / 3; border-radius: 24px; }
  .family-lifestyle > img { border-radius: 24px; }
}

/* A solid reading surface for the sharing explanation on the lilac section. */
#confiance .sharing-preview > figcaption {
  min-width: 0;
  background: #fff;
  color: #2b2440;
  border: 1px solid #ded5e7;
  border-radius: 24px;
  padding: clamp(22px, 3vw, 36px);
}
#confiance .sharing-preview figcaption > p:not(.eyebrow) {
  color: #51485e;
}
#confiance .sharing-preview figcaption > .eyebrow,
#confiance .sharing-preview h3 em {
  color: #76519d;
}
#confiance .sharing-preview h3,
#confiance .sharing-preview .capture-link {
  color: #2b2440;
}
#confiance .sharing-preview .capture-link:hover { color: #6f45cc; }
#confiance .sharing-preview figcaption > p.sharing-preview-note {
  font-size: 12px;
  border-top: 1px solid #ded5e7;
  padding-top: 18px;
}

/* Share the media row across the three figures despite different system-bar crops.
   The shorter captures are centered inside the common frame, never recropped. */
@media (min-width: 761px) {
  .cocon-white .capture-grid { row-gap: 0; }
  .cocon-white .capture-grid > figure {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }
  .cocon-white .capture-grid > figure > .capture-image {
    align-self: stretch;
    align-items: center;
  }
}

/* Original logo geometry; the two wrappers only animate its arrival. */
.arrival-logo { display: block; overflow: visible; }
.arrival-seal { transform-box: fill-box; transform-origin: center; }
.brush-phrase { position: relative; display: inline-block; isolation: isolate; }
.arrival-brush {
  position: absolute;
  left: -1%;
  bottom: -.035em;
  width: 102%;
  height: .17em;
  fill: #c7a7e8;
  opacity: .45;
  z-index: -1;
  pointer-events: none;
}

/* Adapted from the auth brush gesture: cubic(.19,.75,.25,1), without a splash. */
@media (prefers-reduced-motion: no-preference) {
  .arrival-seal { animation: cocon-seal-in 850ms cubic-bezier(.19,.75,.25,1) both; }
  .arrival-word { animation: cocon-word-in 1100ms cubic-bezier(.19,.75,.25,1) 80ms both; }
  .hero-copy > .eyebrow,
  .hero-copy > h1,
  .hero-copy > .intro,
  .hero-actions,
  .hero-security,
  .hero-app-stage {
    animation: cocon-content-in 700ms cubic-bezier(.19,.75,.25,1) both;
  }
  .hero-copy > .eyebrow { animation-delay: 60ms; }
  .hero-copy > h1 { animation-delay: 130ms; }
  .hero-copy > .intro { animation-delay: 210ms; }
  .hero-actions { animation-delay: 270ms; }
  .hero-security { animation-delay: 310ms; }
  .hero-app-stage { animation-delay: 190ms; }
  .arrival-brush { animation: cocon-brush-in 1000ms cubic-bezier(.19,.75,.25,1) 320ms both; }
}
@keyframes cocon-seal-in {
  from { opacity: 0; transform: translateX(-8px) rotate(-12deg); }
  to { opacity: 1; transform: translateX(0) rotate(0); }
}
@keyframes cocon-word-in {
  from { opacity: .25; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0); }
}
@keyframes cocon-content-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cocon-brush-in {
  0% { opacity: .1; clip-path: inset(0 100% 0 0); }
  65% { opacity: .65; clip-path: inset(0); }
  100% { opacity: .45; clip-path: inset(0); }
}
@media (prefers-reduced-motion: reduce) {
  .arrival-seal, .arrival-word, .arrival-brush,
  .hero-copy > *, .hero-app-stage { animation: none; }
}