/* Lona website: the page shell (nav, hero, how it works, privacy, FAQ, closing, footer) and the Studio screen
   that the hero and the Studio section share. */

/* ---------- Nav ---------- */
.skip:focus { position: fixed !important; top: 12px; left: 12px; width: auto; height: auto; clip: auto; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--paper); border-radius: 10px; }
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248, 244, 238, 0.72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
.nav.is-scrolled { border-bottom-color: var(--line); background: rgba(248, 244, 238, 0.86); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 68px; }
.nav__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 650; font-size: 19px; letter-spacing: -0.02em; }
.nav__brand img { width: 32px; height: 32px; border-radius: 22.37%; box-shadow: 0 0 0 1px rgba(27, 24, 21, 0.1); }
.nav__links { display: none; gap: 4px; }
.nav__links a {
  display: inline-block; padding: 8px 12px; border-radius: 999px;
  text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink-2);
  transition: color 0.2s, background 0.2s;
}
.nav__links a:hover { color: var(--ink); background: rgba(27, 24, 21, 0.05); }
.nav__links a.is-current { color: var(--ink); background: rgba(27, 24, 21, 0.07); }
@media (min-width: 960px) { .nav__links { display: flex; } }
@media (max-width: 420px) { .nav .pill-soon { font-size: 12.5px; padding: 7px 12px; } }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(24px, 5vw, 64px) 0 0; overflow: hidden; }
.hero__inner { display: grid; gap: 56px; align-items: center; }
@media (min-width: 960px) { .hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: 40px; } }
.hero__copy { display: grid; gap: 26px; justify-items: start; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hero__trust { display: flex; align-items: center; gap: 8px; }
.hero__trust::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--good); }

.hero__stage { position: relative; display: grid; place-items: center; min-height: 600px; padding: 64px 0 28px; }
.hero__arch {
  position: absolute; z-index: 0;
  width: min(500px, 100%); top: 0; bottom: 0;
  border-radius: 999px 999px 36px 36px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.55), transparent 60%),
    linear-gradient(180deg, #dcdcf7 0%, #a8a9ee 55%, #5a5bd8 100%);
  opacity: 0.85;
}
.hero__phone { position: relative; z-index: 2; --phone-w: min(340px, 78vw) !important; }
/* On a frosted chip: it sits on the deep purple foot of the arch. */
.hero__note {
  position: relative; z-index: 2; width: fit-content; max-width: 300px; margin: 14px auto 0; padding: 6px 12px;
  border-radius: 12px; background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ink-2);
}
.float {
  position: absolute; z-index: 1; width: 150px; height: auto;
  filter: drop-shadow(0 18px 24px rgba(60, 35, 20, 0.18));
  animation: float 9s ease-in-out infinite;
  pointer-events: none;
}
.float--coat { width: 170px; left: -2%; top: 8%; rotate: -10deg; }
.float--boots { width: 140px; left: 2%; bottom: 8%; rotate: 6deg; animation-delay: -3s; }
.float--bag { width: 130px; right: -1%; top: 14%; rotate: 9deg; animation-delay: -5s; }
.float--skirt { width: 120px; right: 4%; bottom: 10%; rotate: -7deg; animation-delay: -1.5s; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@media (max-width: 959px) {
  .hero__stage { min-height: 0; }
  .float { width: 26vw !important; max-width: 150px; }
  .float--coat { left: -4%; }
  .float--bag { right: -4%; }
}
@media (max-width: 520px) { .float--skirt, .float--boots { display: none; } }

.hero__strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
  margin-top: clamp(48px, 7vw, 88px); padding: 22px 0; border-block: 1px solid var(--line);
  font-size: 15px; font-weight: 550; color: var(--ink-2);
}
.hero__strip li { display: inline-flex; align-items: center; gap: 10px; }
.hero__strip li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* Simulated finger tap inside a phone (hero autoplay). */
.tap-dot {
  position: absolute; z-index: 40; width: calc(var(--pt) * 44); height: calc(var(--pt) * 44); margin: calc(var(--pt) * -22) 0 0 calc(var(--pt) * -22);
  border-radius: 50%; background: rgba(255, 255, 255, 0.55); border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); opacity: 0; pointer-events: none; scale: 1.4;
  transition: opacity 0.25s, scale 0.35s var(--ease), left 0.6s var(--ease), top 0.6s var(--ease);
}
.tap-dot.is-down { opacity: 1; scale: 0.85; }

/* =====================================================================================================
   Studio screen (the app's Studio tab), shared by the hero and the Studio section. Sizes in pt, from the app on
   an iPhone 17. You stand tall in the AI's own picture, whose studio wall is carried on to fill the screen (the
   picture's edges fade into it), with the clothes in a glass panel floating over the bottom.
   Markup: .studio-screen > .studio-look (two .studio-render images, for cross-fades), .studio-bar,
   .studio-status, .studio-tray (.studio-grabber, .studio-chiprow, .studio-items > .studio-item).
   ===================================================================================================== */
.studio-screen {
  /* The wall every render is drawn on: warm grey at the top, a little cooler and lighter towards the floor, and
     lit in the middle, where the picture's own light falls on it. */
  background:
    radial-gradient(ellipse 46% 34% at 50% 44%, rgba(222, 219, 223, 0.95) 0%, rgba(222, 219, 223, 0.55) 45%, rgba(222, 219, 223, 0) 100%),
    linear-gradient(180deg, #b8b7b3 0%, #bdbcb8 14%, #c8c7ca 34%, #cdcbd1 50%, #d0d0d6 68%, #d3d3da 100%);
}
.studio-look {
  position: absolute; left: 50%; translate: -50% 0;
  top: calc(var(--pt) * 100); height: calc(var(--pt) * 530); aspect-ratio: 1536 / 2752;
  transition: opacity 0.4s ease;
}
.studio-render {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.5s ease;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%, #000 74%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 26%, #000 74%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 90%, transparent 100%);
  mask-composite: intersect;
}
.studio-render.is-shown { opacity: 1; }
/* Alt text is for screen readers: never drawn over the wall if a picture is late or missing. */
.studio-render { color: transparent; font-size: 0; }
/* While the next look is made, the last one dims towards the wall. */
.studio-look.is-dim { opacity: 0.45; }

.studio-bar {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(var(--pt) * 56);
  display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--pt) * 16);
}
.studio-bar .ios-glassbtn { font-weight: 600; letter-spacing: 0.04em; background: rgba(250, 250, 250, 0.82); }
.studio-save { color: var(--ios-label-2); font-weight: 500 !important; letter-spacing: -0.01em !important; transition: color 0.3s; }
.studio-save.is-ready { color: #000; font-weight: 600 !important; }

.studio-status {
  position: absolute; z-index: 6; top: calc(var(--pt) * 582); left: 50%; translate: -50% 0;
  white-space: nowrap; transition: opacity 0.3s;
}
.studio-status.is-hidden { opacity: 0; }
.studio-status .spinner {
  width: calc(var(--pt) * 14); height: calc(var(--pt) * 14); border-radius: 50%;
  border: calc(var(--pt) * 2) solid rgba(0, 0, 0, 0.15); border-top-color: rgba(0, 0, 0, 0.6);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }

/* The glass panel of clothes: categories over one row you swipe sideways. */
.studio-tray {
  position: absolute; z-index: 10;
  left: calc(var(--pt) * 13); right: calc(var(--pt) * 13); top: calc(var(--pt) * 636); height: calc(var(--pt) * 146);
  border-radius: calc(var(--pt) * 30); overflow: hidden;
  background: rgba(244, 244, 247, 0.6);
  backdrop-filter: blur(22px) saturate(1.7);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.75), 0 calc(var(--pt) * 8) calc(var(--pt) * 28) rgba(0, 0, 0, 0.1);
}
.studio-grabber {
  position: absolute; top: calc(var(--pt) * 7); left: 50%; translate: -50% 0;
  width: calc(var(--pt) * 36); height: calc(var(--pt) * 5); border-radius: 999px; background: rgba(0, 0, 0, 0.2);
}
.studio-chiprow {
  position: absolute; top: calc(var(--pt) * 20); left: 0; right: 0;
  display: flex; align-items: center; gap: calc(var(--pt) * 6); padding-right: calc(var(--pt) * 12);
}
.studio-chiprow .ios-chips {
  flex: 1; min-width: 0;
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent);
}
.studio-chiprow .ios-chip { background: rgba(255, 255, 255, 0.55); }
.studio-chiprow .ios-chip.is-on { background: #000; }
.studio-chevron {
  flex: none; display: grid; place-items: center;
  width: calc(var(--pt) * 32); height: calc(var(--pt) * 32); border-radius: 50%;
  background: rgba(255, 255, 255, 0.55); color: rgba(0, 0, 0, 0.6);
}
.studio-chevron svg { width: calc(var(--pt) * 16); height: calc(var(--pt) * 16); }
.studio-items {
  position: absolute; top: calc(var(--pt) * 62); left: 0; right: 0;
  display: flex; gap: calc(var(--pt) * 10); padding: 0 calc(var(--pt) * 16);
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  scroll-padding-inline: calc(var(--pt) * 16);
}
.studio-items::-webkit-scrollbar { display: none; }
.studio-item {
  position: relative; flex: none; scroll-snap-align: start;
  width: calc(var(--pt) * 58); height: calc(var(--pt) * 74); border-radius: calc(var(--pt) * 12);
  background: var(--paper-2); display: grid; place-items: center;
}
.studio-item img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.studio-item::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 calc(var(--pt) * 2.5) var(--accent); opacity: 0; transition: opacity 0.2s;
}
.studio-item::before {
  content: ""; position: absolute; z-index: 1; right: calc(var(--pt) * 4); bottom: calc(var(--pt) * 4);
  width: calc(var(--pt) * 17); height: calc(var(--pt) * 17); border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.3 2.2 2.2 4.8-5' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
  box-shadow: 0 0 0 calc(var(--pt) * 1.5) #fff; opacity: 0; scale: 0.6; transition: opacity 0.2s, scale 0.25s var(--ease);
}
.studio-item.is-worn::after, .studio-item.is-worn::before { opacity: 1; scale: 1; }

/* ---------- How it works ---------- */
.how__steps { display: grid; gap: 28px; padding: 0; list-style: none; }
@media (min-width: 600px) and (max-width: 899px) {
  .how__steps { grid-template-columns: 1fr 1fr; gap: 20px; }
  .how__step:last-child { grid-column: 1 / -1; }
}
@media (min-width: 900px) { .how__steps { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.how__step {
  position: relative; display: grid; align-content: start; gap: 12px;
  padding: 18px 18px 30px; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-1);
}
.how__step .h3 { margin-top: 6px; padding-inline: 8px; }
.how__step p { padding-inline: 8px; }
.how__num {
  position: absolute; top: 28px; left: 28px; z-index: 5;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: var(--paper); font-weight: 650; font-size: 15px;
}
.how__visual {
  position: relative; height: 300px; border-radius: 22px; overflow: hidden; background: var(--paper-2);
  display: flex; align-items: center; justify-content: center; gap: 10px;
}

/* 1 · The body picker (the app's illustration with your face photo pinned to it), then the look it makes. */
.how__visual--you { background: var(--sand); padding: 20px 14px 0; align-items: flex-end; }
.how__picker { position: relative; flex: 0 1 42%; height: 92%; display: grid; justify-items: center; align-content: end; }
.how__figure { height: 86%; width: auto; max-width: 100%; object-fit: contain; }
.how__polaroid {
  position: absolute; top: 2%; right: -6%; width: clamp(54px, 44%, 76px);
  padding: 5px 5px 12px; background: #fff; rotate: 4deg;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
.how__polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.how__type { margin: 4px 0 10px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.how__arrow { flex: none; width: clamp(20px, 9%, 34px); margin-bottom: 40%; color: var(--ink-3); }
.how__body { flex: 0 1 40%; min-width: 0; height: 94%; width: auto; object-fit: contain; object-position: bottom; }

/* 2 · The scan: each piece found gets the sheet's numbered box. */
.how__visual--snap { background: #e9e5df; }
.how__photo { position: relative; width: min(100% - 32px, 236px); aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-1); }
.how__bed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.how__box { position: absolute; border: 2px solid var(--accent); border-radius: 6px; }
.how__num-badge {
  position: absolute; top: -6px; left: -6px; display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; box-shadow: 0 0 0 1.5px #fff;
}
.how__found { position: absolute; bottom: 14px; left: 50%; translate: -50% 0; --pt: 1px; font-size: 13px; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .how__step.in .how__box { animation: how-box 0.5s var(--ease) both; animation-delay: calc(0.4s + var(--i) * 0.12s); }
  @keyframes how-box { from { opacity: 0; transform: scale(1.12); } }
}

/* 3 · A slice of the Studio: the last look dims while the next is made, then the new look shows. */
.how__visual--dress { display: block; }
.how__look { position: absolute; left: 50%; translate: -50% 0; top: 4%; height: 100%; aspect-ratio: 1536 / 2752; }
.how__look .studio-render { transition: none; }
.how__pill { position: absolute; z-index: 2; left: 50%; bottom: 84px; translate: -50% 0; --pt: 1px; font-size: 13px; display: inline-flex; gap: 6px; white-space: nowrap; }
.how__spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.15); border-top-color: rgba(0, 0, 0, 0.6); animation: spin 0.8s linear infinite; }
.how__tray {
  position: absolute; z-index: 2; left: 8px; right: 8px; bottom: 8px; height: 66px; padding: 8px 10px;
  display: flex; gap: 8px; overflow: hidden; border-radius: 20px;
  background: rgba(244, 244, 247, 0.6); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.75), 0 6px 20px rgba(0, 0, 0, 0.08);
}
.how__tile { position: relative; flex: none; width: 40px; height: 50px; border-radius: 9px; background: var(--paper-2); }
.how__tile img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.how__tile.is-worn { box-shadow: inset 0 0 0 2px var(--accent); }
.how__tile.is-worn::after {
  content: ""; position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.3 2.2 2.2 4.8-5' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
  box-shadow: 0 0 0 1px #fff;
}
/* The loop: the last look dims towards the wall with "Dressing you…", then the new look shows. The dimming is a
   wall-coloured veil over the whole slice, so no picture edge shows through. Without motion, only the new look. */
.how__veil { position: absolute; inset: 0; background: #cbc9cc; opacity: 0; pointer-events: none; }
.how__look .how__after, .how__pill { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .how__look .how__after { opacity: 1; } .how__look .how__before { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .how__after { animation: how-after 6s ease-in-out infinite; }
  .how__veil { animation: how-veil 6s ease-in-out infinite; }
  .how__pill { animation: how-pill 6s ease-in-out infinite; }
  @keyframes how-after { 0%, 42% { opacity: 0; } 50%, 96% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes how-veil { 0%, 3% { opacity: 0; } 9%, 42% { opacity: 0.5; } 50%, 100% { opacity: 0; } }
  @keyframes how-pill { 0%, 4% { opacity: 0; } 9%, 40% { opacity: 1; } 46%, 100% { opacity: 0; } }
}

/* ---------- FAQ ---------- */
.faq__inner { display: grid; gap: 32px; }
@media (min-width: 960px) { .faq__inner { grid-template-columns: 0.8fr 1.2fr; gap: 64px; } .faq__inner .section-head { position: sticky; top: 120px; align-self: start; } }
.faq__list { display: grid; border-top: 1px solid var(--line-2); }
.faq__list details { border-bottom: 1px solid var(--line-2); }
.faq__list summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--paper-2)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' stroke='%231b1815' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: rotate 0.3s var(--ease);
}
.faq__list details[open] summary::after { rotate: 45deg; }
.faq__list details p { padding: 0 48px 26px 0; color: var(--ink-2); }

/* ---------- Closing ---------- */
.closing { text-align: center; padding-bottom: 0; overflow: hidden; background: linear-gradient(180deg, var(--paper) 0%, var(--sand) 100%); }
.closing__inner { display: grid; justify-items: center; gap: 24px; }
.closing .lede { margin-inline: auto; }
.closing__lineup {
  display: flex; justify-content: center; align-items: flex-end; gap: 0;
  margin-top: clamp(40px, 6vw, 72px); height: clamp(260px, 38vw, 520px);
}
.closing__lineup img { height: 100%; width: auto; margin-inline: clamp(-60px, -4vw, -20px); }
.closing__lineup img:nth-child(odd) { height: 92%; }
.closing__lineup img:nth-child(3) { height: 100%; position: relative; z-index: 1; }
@media (max-width: 600px) { .closing__lineup img:nth-child(1), .closing__lineup img:nth-child(5) { display: none; } }

/* ---------- Footer ---------- */
.footer { background: var(--sand); border-top: 1px solid var(--line); }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-block: 32px; }
.footer .nav__brand img { width: 28px; height: 28px; }
.footer__links { display: flex; gap: 20px; }
.footer__links a { display: inline-flex; align-items: center; min-height: 40px; padding-inline: 4px; font-size: 14px; font-weight: 550; color: var(--ink-2); text-decoration: none; }
.footer__links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }