/* /about below the hero: the focus shield, the Journey Store, sync, two pictures and the sprout, and their narrower
   layouts. */

/* ---------- A shield for your focus: the shield in front of the calm new tab ---------- */

.chrome-show {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.browser {
  overflow: hidden;
  border-radius: 14px;
  background: var(--bezel);
  box-shadow:
    var(--shadow),
    inset 0 0 0 1px var(--device-edge);
}
.browser .bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: var(--device-bar);
}
.browser .bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--device-dot);
}
.browser .bar span {
  margin-left: 10px;
  padding: 3px 12px;
  border-radius: 8px 8px 0 0;
  background: var(--bezel);
  color: var(--device-dot);
  font: 600 0.7rem/1 var(--font-ui);
}
.browser img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
}
.windows {
  position: relative;
  padding: 0 0 22% 0;
}
.windows .back {
  width: 78%;
  opacity: 0.75;
}
.windows .front {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 72%;
}
/* The shield's page is mostly quiet dark: the window shows its message, closer. */
.windows .view {
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.windows .view img {
  transform: scale(1.6);
  transform-origin: 50% 50%;
}
.chrome-copy > p:not(.kicker) {
  margin: 0 0 18px;
  font-size: 1.08rem;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 26px;
  padding: 0;
  list-style: none;
}
.chips li {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-size: 0.94rem;
}

/* ---------- One room, every screen ---------- */

.sync-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}
.mini {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 0;
}
.mini figcaption {
  color: var(--text-3);
  font-size: 0.92rem;
}
.mini .laptop {
  width: clamp(130px, 30vw, 300px);
}
.mini .phone {
  width: clamp(54px, 9vw, 92px);
  min-width: 0;
}
.mini .browser {
  width: clamp(120px, 26vw, 250px);
  border-radius: 10px;
}
.mini .browser .bar {
  height: 18px;
  padding: 0 8px;
  gap: 4px;
}
.mini .browser .bar i {
  width: 5px;
  height: 5px;
}
.wire {
  position: relative;
  flex: 1;
  min-width: 16px;
  max-width: 120px;
  height: 1px;
  margin: 0 10px 64px;
  overflow: hidden;
  background: var(--line-strong);
}
.wire i {
  position: absolute;
  inset: -1px auto -1px 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, var(--link), transparent);
  animation: pass 4.4s var(--ease-out) infinite;
}
.wire.later i {
  animation-delay: 1.6s;
}
@keyframes pass {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(240%);
  }
}
.synced {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.synced li {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-size: 0.92rem;
}

/* ---------- The Journey Store: a card per study mate, his world and his face ---------- */

.mates {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(0, 0.42fr);
  gap: 16px;
  text-align: left;
}
.mate {
  margin: 0;
}
.who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.face {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
}
.who h3 {
  margin: 0;
  color: var(--text-1);
  font: 400 1.5rem/1.2 var(--font-display);
  font-variation-settings: 'SOFT' 100, 'opsz' 72;
}
.who p {
  margin: 2px 0 0;
}
.mate--more {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  aspect-ratio: auto;
  min-height: 100%;
  padding: 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--text-3);
  text-align: center;
}
.mate--more span {
  font: 400 2.4rem/1 var(--font-display);
}
.mate--more p {
  margin: 0;
  color: var(--text-3);
  font-size: 0.95rem;
}

/* ---------- Two pictures: sound and the log ---------- */

.duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 820px;
  margin: 0 auto;
}
.vcard {
  margin: 0;
  text-align: left;
}
.crop {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bezel);
  box-shadow: var(--shadow);
  transition: transform var(--t-calm) var(--ease-out);
}
.vcard:hover .crop {
  transform: translateY(-3px);
}
.crop img {
  position: absolute;
  max-width: none;
  width: var(--zoom, 100%);
  left: var(--x, 0);
  top: var(--y, 0);
}
.vcard figcaption {
  margin-top: 14px;
  color: var(--text-2);
}
.vcard figcaption b {
  display: block;
  margin-bottom: 2px;
  color: var(--text-1);
  font: 400 1.35rem/1.25 var(--font-display);
  font-variation-settings: 'SOFT' 100, 'opsz' 72;
}

/* ---------- The sprout: it grows once, as it comes into view ---------- */

.sprout {
  display: block;
  width: 120px;
  margin: 0 auto 18px;
  overflow: visible;
}
.sprout .soil {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 3;
  stroke-linecap: round;
}
.sprout .stem {
  fill: none;
  stroke: var(--leaf);
  stroke-width: 5;
  stroke-linecap: round;
}
.sprout .leaf {
  fill: var(--leaf);
  transform-box: fill-box;
}
.sprout .l {
  transform-origin: 100% 100%;
}
.sprout .r {
  transform-origin: 0% 100%;
}
.js .sprout .stem {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
}
.js .sprout .leaf {
  transform: scale(0);
}
.js .in .sprout .stem {
  animation: draw 1.4s var(--ease-out) 200ms forwards;
}
.js .in .sprout .leaf {
  animation: unfurl 1s var(--ease-out) 1.2s forwards;
}
.js .in .sprout .r {
  animation-delay: 1.45s;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes unfurl {
  to {
    transform: scale(1);
  }
}

/* ---------- Narrower screens ---------- */

@media (max-width: 900px) {
  .chrome-show {
    grid-template-columns: 1fr;
  }
  .mates {
    grid-template-columns: 1fr 1fr;
  }
  .mate--more {
    grid-column: 1 / -1;
    grid-auto-flow: column;
    min-height: 0;
  }
}

@media (max-width: 600px) {
  .mates,
  .duo {
    grid-template-columns: 1fr;
  }
  .wire {
    margin: 0 6px 52px;
  }
  .chrome-copy .btn {
    width: 100%;
  }
}

/* ---------- lofispot cloud: the one card ---------- */

.plans--one {
  grid-template-columns: 1fr;
  max-width: 420px;
}
.plan .alt + .price {
  margin-top: 14px;
}
.plan .price + .alt {
  margin-top: 6px;
}
.plan--premium .price {
  font-size: 2.1rem;
}