/* The narrated story's own pieces (index.html), over deck.css. */

/* The opening: the two of them, each in their place. She is further off, on
   her sofa; he is at his counter, nearer. */
.duo{position:relative;display:block;width:100%;height:calc(60 * var(--u))}
.duo .cutout{position:absolute;max-height:none;height:auto}
.duo-far{right:0;top:0;width:52%}
.duo-near{left:0;bottom:0;width:80%}
/* The idea: WhatsApp, beside him. */
.idea{position:relative}
.idea-app{position:absolute;right:4%;top:2%;width:calc(11 * var(--u));height:auto;padding:calc(1.6 * var(--u));background:#fff;border-radius:22%}
/* The poster at the till with what the customer agrees to under it. */
.at-till{justify-items:center;gap:0}
/* The two reports, one frame. */
.screen-tabs{display:flex;gap:4px;padding:calc(.8 * var(--u));border-bottom:1px solid #dce5d9;background:var(--cream)}
.screen-tabs button{min-height:max(36px,4.4 * var(--u));padding:0 calc(2 * var(--u));border:1px solid transparent;background:transparent;color:var(--green);font-size:max(15px,1.8 * var(--u));font-weight:800}
.screen-tabs button[aria-pressed=true]{background:#fff;border-color:#cbd9c8}
#investimento .prices{max-width:calc(110 * var(--u));margin-inline:auto}

/* Watching on a phone: the title and the picture, the rest is said aloud. */
@media (max-width:760px){
  .watching-story .slide-inner{padding:calc(3 * var(--u)) 0 calc(4 * var(--u))}
  .watching-story .s-split .slide-inner{gap:calc(3 * var(--u))}
  .watching-story :is(.lead,.foot,.chips,.actions,.kicker,.caption,.example){display:none}
  .watching-story .title,.watching-story .title.is-big,.watching-story .title.is-small{font-size:calc(6.2 * var(--u))}
  .watching-story .cutout{max-height:calc(46 * var(--u))}
  .watching-story .pair .cutout{max-height:calc(40 * var(--u))}
  .watching-story .phone{width:min(100%,calc(40 * var(--u)))}
  .watching-story .phone-body{min-height:0}
  .watching-story .poster{padding:calc(2 * var(--u))}
  .watching-story .poster img{width:calc(14 * var(--u));margin-block:calc(1.4 * var(--u)) calc(1 * var(--u))}
  .watching-story .consent{display:none}
  .watching-story #investimento .prices{margin-top:calc(3 * var(--u))}
}