/* Wrappers introduced by layout.js do not change the original slide canvas. */
.comparison-viewport,.comparison-canvas,.comparison-art{display:contents}
.oversight-chart,.oversight-column{display:contents}
.agent-terminal-viewport{display:contents}
.comparison-hint,.mobile-tagline{display:none}

/* Use the compact tagline composition on phones and portrait displays. */
@media screen and (orientation:portrait), screen and (max-width:900px), screen and (max-height:500px) and (pointer:coarse){
  .layouts-ready [data-layout="tagline"] .slide-media{display:none}
  .layouts-ready .mobile-tagline{
    display:block;position:absolute;left:160px;top:95px;width:1120px;height:620px;
    object-fit:contain;
  }
}

@media screen and (orientation:portrait){
  .layouts-ready .slide-section{
    display:block;min-height:0;padding:0;scroll-snap-align:none;
  }
  .layouts-ready .slide-viewport{
    width:100%;height:100%;aspect-ratio:auto;overflow:hidden;container-type:inline-size;
  }
  .layouts-ready .slide{
    --slide-gutter:clamp(32px,8vw,64px);
    --fit-content:1;
    position:relative;width:100%;height:auto;min-height:100%;
    transform:none;zoom:1;overflow:visible;
    display:flex;flex-direction:column;align-items:flex-start;gap:calc(24px * var(--fit-content));
    padding:calc(32px * var(--fit-content)) max(var(--slide-gutter),env(safe-area-inset-right)) 64px max(var(--slide-gutter),env(safe-area-inset-left));
    max-width:760px;margin:0 auto;
  }
  .layouts-ready .slide > .object{
    position:relative;left:auto!important;top:auto!important;
    width:100%!important;height:auto!important;min-width:0;
    padding:0!important;transform:none!important;
    order:var(--reading-order,50);flex:none;
  }
  .layouts-ready .slide > .slide-decoration{display:none!important}
  .layouts-ready .slide > .slide-logo{
    width:25px!important;height:26.28px!important;
    margin-bottom:calc(24px * var(--fit-content));align-self:flex-start;
  }
  .layouts-ready .slide-logo img{width:100%!important;height:100%!important;left:0!important;top:0!important}
  .layouts-ready .slide > .text{
    font-family:'EB Garamond',serif;
    font-size:calc(clamp(22px,3.8vw,28px) * var(--fit-content));line-height:1.38;
    overflow-wrap:break-word;white-space:normal!important;
  }
  .layouts-ready .slide > .text :is(p,span){
    font-size:inherit!important;line-height:inherit!important;
    letter-spacing:normal!important;white-space:normal!important;
  }
  .layouts-ready .slide > .text p{
    margin:0!important;text-align:left!important;
  }
  .layouts-ready .slide > .text p + p{margin-top:.7em!important}
  .layouts-ready .slide > .text .blank-line{display:none}
  .layouts-ready .slide > .joined-copy p{display:inline}
  .layouts-ready .slide > .joined-copy p + p::before{content:' '}
  .layouts-ready .slide > .text p:has(> span[aria-hidden="true"]:first-child){
    padding-left:.8em!important;text-indent:-.8em!important;
  }
  .layouts-ready .slide > .slide-title{
    font-size:calc(clamp(38px,7.2vw,58px) * var(--fit-content));line-height:1.08;
    text-wrap:pretty;
  }
  .layouts-ready .slide > .slide-label{
    width:fit-content!important;border:1px solid #999999;
    border-radius:999px;padding:calc(7px * var(--fit-content)) 14px!important;margin-bottom:0;
    font-size:12px;line-height:1.3;
  }
  .layouts-ready .slide > .slide-label :is(p,span){letter-spacing:.07em!important}
  .layouts-ready .slide > .slide-media{width:var(--media-fit-width,100%)!important;align-self:center;margin-top:calc(8px * var(--fit-content));overflow:hidden;aspect-ratio:var(--media-ratio)}
  .layouts-ready .slide-media img{
    position:absolute;
    width:var(--crop-width)!important;height:var(--crop-height)!important;
    left:var(--crop-left)!important;top:var(--crop-top)!important;
  }
  .layouts-ready .slide > .slide-media:has(video){aspect-ratio:auto}
  .layouts-ready .slide-media video{
    position:relative;width:100%!important;height:auto!important;
    left:0!important;top:0!important;object-fit:contain!important;
  }
  /* Let the app demo span the viewport without changing the text gutters. */
  .layouts-ready [data-source-slide="16"] .slide-viewport{container-type:inline-size}
  .layouts-ready [data-source-slide="16"] .slide > [data-media="running-application"]{
    width:var(--media-fit-width,100cqw)!important;align-self:center;
  }
  /* The two diagrams include intentional crops and an aligned SVG label. */
  .layouts-ready [data-layout="diagram"] .slide-media{
    aspect-ratio:var(--media-ratio);max-width:560px;align-self:center;
    margin-top:calc(12px * var(--fit-content));
  }
  .layouts-ready [data-layout="cover"] .slide,
  .layouts-ready [data-layout="tagline"] .slide,
  .layouts-ready [data-layout="divider"] .slide,
  .layouts-ready [data-layout="closing"] .slide{justify-content:center}
  .layouts-ready :is([data-layout="cover"],[data-layout="tagline"],[data-layout="divider"],[data-layout="closing"]) .slide-logo{
    position:absolute;top:calc(32px * var(--fit-content))!important;left:max(var(--slide-gutter),env(safe-area-inset-left))!important;margin:0;
  }
  .layouts-ready [data-layout="cover"] .slide-title{
    width:68%!important;max-width:300px;align-self:center;
    aspect-ratio:var(--media-ratio);
  }
  .layouts-ready [data-layout="cover"] .slide-title img{
    position:relative;width:100%!important;height:auto!important;left:0!important;top:0!important;
  }
  .layouts-ready [data-layout="cover"] .slide-copy{margin-top:calc(28px * var(--fit-content));font-size:calc(20px * var(--fit-content))}
  .layouts-ready [data-layout="cover"] .slide-copy p{text-align:center!important}
  .layouts-ready .mobile-tagline{position:relative;left:auto;top:auto;width:var(--media-fit-width,100%);height:auto;align-self:center;order:20}
  .layouts-ready [data-layout="statement"] .slide-title{font-size:calc(clamp(40px,7.6vw,64px) * var(--fit-content))}
  .layouts-ready [data-source-slide="3"] .slide-title{font-size:calc(clamp(48px,10vw,80px) * var(--fit-content))}
  .layouts-ready [data-source-slide="5"] .slide-title{font-size:calc(clamp(32px,6vw,48px) * var(--fit-content))}
  .layouts-ready :is([data-layout="divider"],[data-layout="closing"]) .slide-title{font-size:calc(clamp(56px,11vw,88px) * var(--fit-content))}
  .layouts-ready [data-layout="team"] .slide-copy > p{padding-bottom:calc(22px * var(--fit-content))}
  .layouts-ready [data-layout="team"] .slide-copy > p:nth-child(-n+4){border-bottom:1px solid #ffffff14}
  .layouts-ready [data-layout="team"] .slide-copy > p:nth-child(-n+4) > span:first-child{display:block;font-size:1.2em!important;margin-bottom:4px}
  .layouts-ready [data-layout="team"] .slide-copy > p:nth-child(n+6){font-size:.9em!important}
  .layouts-ready [data-layout="team"] .slide-copy > p:nth-child(6) > span:first-child{font-size:1.2em!important}
  .layouts-ready [data-layout="traction"] .slide-copy > p + p{margin-top:1.25em!important}
  .layouts-ready [data-layout="oversight"] br{display:none}
  .layouts-ready [data-layout="oversight"] [data-shape="oversight-finding"]{font-size:calc(clamp(18px,3vw,23px) * var(--fit-content))}
  .layouts-ready [data-layout="oversight"] .slide-source{font-size:max(10px,calc(clamp(12px,2vw,14px) * var(--fit-content)));line-height:1.5}
  .layouts-ready [data-layout="agent-bonus"] .slide-title{font-size:calc(clamp(32px,6vw,48px) * var(--fit-content))}
  .layouts-ready [data-layout="agent-bonus"] .slide-source{font-size:calc(clamp(14px,2.2vw,18px) * var(--fit-content));line-height:1.4}
  .layouts-ready .slide > .agent-terminal-viewport{display:block;position:relative;max-width:516px;flex:none;order:50;overflow:visible}
  .layouts-ready .agent-terminal-viewport > .agent-terminal{left:0!important;top:0!important;transform:scale(var(--terminal-scale,1));transform-origin:top left}
  .layouts-ready .oversight-chart{
    --chart-height:calc(clamp(180px,32vw,260px) * var(--fit-content));
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;
    gap:clamp(24px,5vw,48px);width:100%;max-width:460px;align-self:center;order:50;
  }
  .layouts-ready .oversight-column{display:flex;flex-direction:column;justify-content:flex-end;gap:calc(12px * var(--fit-content));min-width:0}
  .layouts-ready .oversight-column > .object{position:relative;left:auto!important;top:auto!important;width:100%!important;height:auto!important;padding:0!important}
  .layouts-ready .oversight-column .text p{font-size:calc(clamp(64px,12vw,100px) * var(--fit-content))!important;line-height:1!important;letter-spacing:-.03em!important;text-align:center!important}
  .layouts-ready .oversight-column .text span{font-size:.6em!important;letter-spacing:normal!important}
  .layouts-ready .oversight-column .geometry{height:var(--chart-height)!important}
  .layouts-ready .oversight-previous .geometry{height:calc(var(--chart-height) * 22 / 63)!important}
  .layouts-ready .oversight-column .text:last-child p{font-size:calc(18px * var(--fit-content))!important;line-height:1.3!important;letter-spacing:normal!important}
  .layouts-ready .comparison-viewport{
    display:block;position:relative;width:var(--media-fit-width,100cqw);aspect-ratio:640 / 680;overflow:hidden;align-self:center;flex:none;order:50;
  }
  .layouts-ready .comparison-canvas{display:block;position:relative;width:640px;height:680px;transform:scale(var(--chart-scale,1));transform-origin:top left}
  .layouts-ready .comparison-art{display:block;position:absolute;left:-750px;top:-80px;width:1440px;height:810px}
}

@media screen and (orientation:portrait) and (max-width:600px){
  .layouts-ready [data-source-slide="3"] .slide-copy{font-size:calc(clamp(28px,7.2vw,30px) * var(--fit-content))}
  .layouts-ready :is([data-source-slide="4"],[data-source-slide="6"]) .slide-copy{font-size:calc(clamp(30px,7.7vw,32px) * var(--fit-content))}
  /* Separate slide 3's two opening sentences when they wrap on phones. */
  .layouts-ready [data-source-slide="3"] [data-shape="84"] br{display:none}
  .layouts-ready [data-source-slide="3"] [data-shape="84"] p > span:last-child{display:block;margin-top:.7em}
  /* Start each italic term on its own line, keeping its punctuation attached. */
  .layouts-ready [data-source-slide="4"] [data-shape="97"] span[style*="font-style:italic"]::before{content:'\A';white-space:pre}
  .layouts-ready [data-source-slide="4"] [data-shape="98"]{margin-top:calc(12px * var(--fit-content))}
  .layouts-ready [data-source-slide="12"] .slide-viewport{container-type:inline-size}
  .layouts-ready [data-source-slide="12"] .slide > [data-media="authoring"]{
    width:var(--media-fit-width,100cqw)!important;align-self:center;
  }
}