/* AIOS Pro — the Living File window.
   The product capture is the calm surface. The field labels either side are what the
   parallel file carries and the interface does not show. Greyed until a view applies. */

.lfw { margin-top: clamp(30px, 3.6vw, 54px); }

.lfw-head {
  display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.lfw-head .lfw-eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-4); margin-right: 10px;
}
.lfw-head button {
  font-family: var(--body); font-size: 14px; font-weight: 400; color: var(--ink-3);
  background: none; border: 0; border-bottom: 1.5px solid transparent;
  padding: 0 0 4px; margin-right: 16px; cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.lfw-head button:hover { color: var(--ink-2); }
.lfw-head button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--iris); }

.lfw-grid {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(0, 640px) minmax(170px, 1fr);
  align-items: start;
}

.lfw-col { position: relative; height: 470px; }
.lfw-colhead { position: absolute; top: 0; max-width: 205px; }
.lfw-col-l .lfw-colhead { right: 0; padding-right: 30px; text-align: right; }
.lfw-col-r .lfw-colhead { left: 0; padding-left: 30px; }
.lfw-colhead b {
  display: block; font-family: var(--display); font-style: italic; font-weight: 300;
  font-size: 16px; color: var(--ink-2); line-height: 1.35;
}
.lfw-colhead span { display: block; font-size: 12px; line-height: 1.5; color: var(--ink-3); margin-top: 4px; }

.lfw-slot { position: absolute; max-width: 205px; }
.lfw-col-l .lfw-slot { right: 0; padding-right: 30px; text-align: right; }
.lfw-col-r .lfw-slot { left: 0; padding-left: 30px; }
.lfw-slot em {
  display: block; font-style: normal; font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #7C7889;
  transition: color .3s var(--ease);
}
.lfw-slot p {
  font-size: 13.5px; line-height: 1.56; color: var(--ink-2); margin: 6px 0 0; max-width: none;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .42s var(--ease), opacity .34s var(--ease);
}
.lfw-slot i, .lfw-slot u { position: absolute; top: 6px; background: #C4BFD2; transition: background .3s var(--ease); }
.lfw-slot i { width: 22px; height: 1px; }
.lfw-slot u { top: 4px; width: 5px; height: 5px; border-radius: 50%; text-decoration: none; }
.lfw-col-l .lfw-slot i { right: 0; } .lfw-col-l .lfw-slot u { right: -2px; }
.lfw-col-r .lfw-slot i { left: 0; } .lfw-col-r .lfw-slot u { left: -2px; }

.lfw-slot[data-lit="1"] em { color: var(--iris-deep); }
.lfw-slot[data-lit="1"] p { max-height: 150px; opacity: 1; }
.lfw-slot[data-lit="1"] i { background: #A78BFA; }
.lfw-slot[data-lit="1"] u { background: var(--iris); }

.lfw-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: 11px;
  box-shadow: 0 8px 24px rgba(24,22,29,.09); background: var(--paper);
}
.lfw-frame img {
  position: absolute; max-width: none; height: auto; display: block;
  opacity: 0; transition: opacity .38s var(--ease);
}
.lfw-frame img[aria-current="true"] { opacity: 1; }

.lfw-cap { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.lfw-cap b { display: block; font-family: var(--display); font-size: 20px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.lfw-cap span { display: block; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin-top: 4px; }

@media (max-width: 960px) {
  .lfw-grid { display: flex; flex-direction: column; align-items: stretch; }
  .lfw-mid { order: 0; max-width: 640px; width: 100%; margin: 0 auto; }
  .lfw-col-l { order: 1; margin-top: 26px; }
  .lfw-col-r { order: 2; margin-top: 16px; }
  .lfw-col { position: static; height: auto; display: flex; flex-direction: column; gap: 16px; }
  .lfw-col-r .lfw-colhead { display: none; }
  .lfw-col-l .lfw-colhead, .lfw-col-r .lfw-colhead {
    position: static; max-width: none; padding: 0; text-align: left;
  }
  .lfw-col-l .lfw-slot, .lfw-col-r .lfw-slot {
    position: static; max-width: none; padding: 0 0 0 14px; text-align: left;
    border-left: 1px solid var(--line-2);
  }
  .lfw-slot[data-lit="0"] { display: block; opacity: 1; transform: none; }
  .lfw-slot[data-lit="0"] p { display: none; }
  .lfw-slot i, .lfw-slot u { display: none; }
}

/* section eyebrow */
.eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--iris); margin-bottom: clamp(14px, 1.8vw, 22px);
}

/* the movement of thought — one connected line, not four cards */
.movement { display: flex; align-items: center; flex-wrap: wrap; gap: 0 12px; }
.movement span {
  font-family: var(--display); font-size: clamp(16px, 1.5vw, 19px); font-weight: 400;
  color: var(--ink); white-space: nowrap; padding: 4px 0;
}
.movement i { width: 26px; height: 1px; background: var(--line-2); flex: none; }
@media (max-width: 620px) {
  .movement { flex-direction: column; align-items: flex-start; gap: 0; }
  .movement i { width: 1px; height: 14px; margin-left: 3px; }
}

/* use-case selector — one segmented surface, not five long sections */
.uc-nav { display: flex; flex-wrap: wrap; gap: 0 26px; border-bottom: 1px solid var(--line); margin-bottom: clamp(26px, 3vw, 40px); }
.uc-nav button {
  font-family: var(--body); font-size: 15px; font-weight: 300; color: var(--ink-4);
  background: none; border: 0; border-bottom: 1.5px solid transparent;
  padding: 0 0 12px; margin-bottom: -1px; cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.uc-nav button:hover { color: var(--ink-3); }
.uc-nav button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--iris); }
.uc-panel p { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.6; color: var(--ink-2); max-width: 50ch; }

/* the film — one poster, click to play, never autoplay */
.film {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 40px);
  padding: clamp(34px, 5vw, 72px) clamp(26px, 4vw, 56px);
  border: 1px solid var(--line); border-radius: 18px; background: var(--paper-2);
  box-shadow: var(--sh-1); text-decoration: none;
  transition: box-shadow .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.film:hover { box-shadow: var(--sh-2); border-color: var(--line-2); transform: translateY(-2px); }
.film-play {
  flex: none; width: clamp(58px, 5vw, 74px); height: clamp(58px, 5vw, 74px);
  border-radius: 50%; border: 1px solid var(--line-2); background: var(--paper);
  display: grid; place-items: center; color: var(--iris);
  transition: border-color .22s var(--ease);
}
.film:hover .film-play { border-color: var(--iris); }
.film-play svg { width: 40%; height: 40%; }
.film-label {
  font-family: var(--display); font-size: clamp(24px, 2.6vw, 36px); font-weight: 300;
  color: var(--ink); line-height: 1.1; letter-spacing: -.014em;
}
.film-label em { display: block; font-style: italic; font-size: clamp(15px, 1.3vw, 17px); color: var(--ink-4); margin-top: 8px; letter-spacing: 0; }