/* Additive prototype-demo section. Colours and type inherit the original site. */
.lia-demo-section {
  padding: 80px var(--pad, clamp(22px, 6vw, 96px));
  background: var(--cream, #F5F1E8);
  color: var(--ink, #2B2823);
}

.lia-demo-inner {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(48px, 8vw, 120px);
  align-items: center;
}

.lia-demo-copy {
  min-width: 0;
  max-width: 450px;
}

.lia-demo-heading.sec {
  margin: 0;
  color: var(--ink, #2B2823);
  font-family: var(--serif, 'Fraunces', Georgia, serif);
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 340;
  line-height: 1.08;
  letter-spacing: -.018em;
  text-wrap: balance;
}

.lia-demo-description {
  margin: 20px 0 0;
  max-width: 35ch;
  font-size: 17px;
  line-height: 1.65;
  color: #5d574b;
}

.lia-demo-app-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin-top: 15px;
  padding: 5px 0;
  color: var(--sage, #56704F);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: rgba(86, 112, 79, .35);
  text-underline-offset: 5px;
}

.lia-demo-app-link:hover,
.lia-demo-fallback-link:hover {
  text-decoration-color: currentColor;
}

.lia-demo-development-note {
  margin: 28px 0 0;
  max-width: 48ch;
  color: var(--muted, #6b665c);
  font-size: 13px;
  line-height: 1.65;
}

.lia-demo-media {
  min-width: 0;
  width: 100%;
  max-width: 420px;
  justify-self: end;
}

.lia-demo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 16px;
  background: #252b22;
  isolation: isolate;
}

.lia-demo-host,
.lia-demo-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lia-demo-host iframe,
.lia-demo-host > div {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.lia-demo-poster {
  z-index: 1;
  display: grid;
  place-items: center;
  background: #8b7155;
}

.lia-demo-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(25, 23, 19, .02), rgba(25, 23, 19, .16));
}

.lia-demo-poster-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.lia-demo-play {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: calc(100% - 36px);
  min-height: 52px;
  padding: 15px 22px;
  border: 1px solid rgba(245, 241, 232, .55);
  border-radius: 999px;
  background: rgba(245, 241, 232, .96);
  color: var(--ink, #2B2823);
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(43, 40, 35, .14);
}

.lia-demo-play:hover {
  background: var(--card, #FBF8F2);
}

.lia-demo-play:disabled {
  cursor: progress;
}

.lia-demo-play-icon {
  display: block;
  flex: 0 0 auto;
}

.lia-demo-controls {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.lia-demo-stage {
  min-width: 0;
  margin: 0;
  padding: 10px 0;
  color: var(--muted, #6b665c);
  font-size: 13px;
  line-height: 1.55;
}

.lia-demo-sound {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 94px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line, #E2DCCD);
  border-radius: 999px;
  background: transparent;
  color: var(--ink, #2B2823);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 650;
  cursor: pointer;
}

.lia-demo-sound:hover:not(:disabled),
.lia-demo-sound[aria-pressed="true"] {
  background: var(--sage-bg, #E9EDE4);
  border-color: rgba(86, 112, 79, .35);
}

.lia-demo-sound:disabled {
  color: var(--muted, #6b665c);
  cursor: default;
}

.lia-demo-play:focus-visible,
.lia-demo-sound:focus-visible,
.lia-demo-app-link:focus-visible,
.lia-demo-fallback-link:focus-visible {
  outline: 2px solid var(--sage, #56704F);
  outline-offset: 5px;
}

.lia-demo-status,
.lia-demo-fallback,
.lia-demo-noscript {
  margin: 10px 0 0;
  color: var(--muted, #6b665c);
  font-size: 13px;
  line-height: 1.6;
}

.lia-demo-fallback-link {
  color: var(--sage, #56704F);
  text-decoration: underline;
  text-decoration-color: rgba(86, 112, 79, .35);
  text-underline-offset: 4px;
}

.lia-demo-host[hidden],
.lia-demo-poster[hidden],
.lia-demo-status[hidden],
.lia-demo-fallback[hidden] {
  display: none !important;
}

@media (min-width: 900px) and (max-width: 1000px) {
  .lia-demo-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
    gap: 32px;
  }
}

@media (max-width: 899px) {
  .lia-demo-section {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .lia-demo-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .lia-demo-copy {
    max-width: 450px;
  }

  .lia-demo-heading.sec {
    font-size: clamp(32px, 8vw, 42px);
  }

  .lia-demo-description {
    font-size: 16px;
    margin-top: 16px;
  }

  .lia-demo-development-note {
    margin-top: 20px;
  }

  .lia-demo-media {
    justify-self: center;
  }

  .lia-demo-controls {
    padding: 0 2px;
  }

  .lia-demo-play {
    padding: 15px 18px;
  }
}

.lia-demo-native{display:block;width:100%;height:100%;object-fit:contain;background:#161714}.lia-demo-native::cue{font-family:Arial,sans-serif;font-size:16px;color:white;background:rgba(0,0,0,.75)}
.lia-demo-play{width:64px;height:64px;min-height:64px;max-width:64px;padding:0;border-radius:50%;background:rgba(30,29,25,.32);color:white;border:1px solid rgba(255,255,255,.65);box-shadow:0 4px 20px rgba(0,0,0,.12);backdrop-filter:blur(8px)}
.lia-demo-play:hover{background:rgba(30,29,25,.48)}
.lia-demo-play-icon{margin-left:3px}
.lia-demo-play-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.lia-demo-caption{position:absolute;z-index:3;left:5%;right:5%;bottom:64px;text-align:center;white-space:pre-line;margin:0 auto;width:fit-content;max-width:90%;padding:5px 9px;border-radius:5px;background:rgba(0,0,0,.72);color:#fff;font-size:clamp(14px,1.4vw,17px);line-height:1.35;pointer-events:none}
.lia-demo-caption[hidden],.lia-demo-toggle[hidden]{display:none!important}
.lia-demo-toggle{position:absolute;top:12px;right:12px;z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(25,25,23,.3);backdrop-filter:blur(8px);color:#fff;font:700 16px Arial;cursor:pointer}
.lia-demo-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lia-demo-section{scroll-margin-top:76px}
.lia-demo-media{max-width:min(420px,calc(56.25svh - 90px))}
/* Let the real portrait demo use the phone's width without cropping it. */
@media(max-width:700px){
 .lia-demo-section{padding-left:0;padding-right:0}
 .lia-demo-inner{max-width:none}
 .lia-demo-copy{padding-left:var(--pad,22px);padding-right:var(--pad,22px)}
 .lia-demo-media{width:100%;max-width:none;justify-self:stretch;position:relative}
 .lia-demo-frame{border-radius:0;scroll-margin-top:64px}
 .lia-demo-controls{margin-left:var(--pad,22px);margin-right:var(--pad,22px)}
 .lia-demo-sound,.lia-demo-sound[aria-pressed="true"]{position:absolute;z-index:4;top:12px;right:68px;height:44px;min-height:44px;padding:8px 12px;background:rgba(25,25,23,.62);color:white;border-color:rgba(255,255,255,.5);backdrop-filter:blur(8px)}
 .lia-demo-sound:hover:not(:disabled),.lia-demo-sound[aria-pressed="true"]:hover{background:rgba(25,25,23,.72);color:white}
 .lia-demo-toggle{width:44px;height:44px;background:rgba(25,25,23,.5)}
 .lia-demo-status,.lia-demo-fallback,.lia-demo-noscript{margin-left:var(--pad,22px);margin-right:var(--pad,22px)}
}